:root{
  --navy:#8E1B2B; --navy-dark:#5E1119; --navy-light:#B23347;
  --gold:#C9962B; --gold-light:#E8C878;
  --bg:#F6F3F3; --card:#FFFFFF; --line:#E9DFDF;
  --text:#241A1B; --text-mute:#7A6A6B;
  --green:#1B8A5A; --green-dark:#0F5E3C;
  --orange:#C97A11; --orange-dark:#8F5608;
  --red:#D14343; --red-dark:#9B2C2C;
  --radius:12px; --shadow:0 1px 3px rgba(142,27,43,0.10), 0 1px 2px rgba(142,27,43,0.07);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
input, select, button { font-family: inherit; }
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#c7cede;border-radius:6px;}

.app-header{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);color:#fff;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.app-header h1{ margin:0; font-size:20px; font-weight:700; letter-spacing:0.2px; }
.app-header .sub{ font-size:12.5px; color:#EFC9CE; margin-top:2px; }
.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.header-badge{background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);color:var(--gold-light); font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px;}
.role-badge {padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; text-transform: uppercase;}
.role-badge.admin { color: #fff; background: var(--red); border: 1px solid #E25B5B; }
.role-badge.user { color: #fff; background: var(--green); border: 1px solid #0d6841; }
.campaign-select{ background:rgba(255,255,255,0.14); color:#fff; border:1px solid rgba(255,255,255,0.35); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:700; outline:none; cursor:pointer; }
.campaign-select option{ color:#241A1B; }
.btn-logout {background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4);padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.2s;}
.btn-logout:hover { background: rgba(255,255,255,0.25); }

.tabbar{display:flex; gap:6px; background:var(--card); padding:8px; margin:16px 28px 0 28px;border-radius:var(--radius); box-shadow:var(--shadow); flex-wrap:wrap;}
.tabbtn{border:none; background:transparent; padding:11px 18px; border-radius:9px;font-size:14px; font-weight:600; color:var(--text-mute); cursor:pointer; transition:background .15s,color .15s;}
.tabbtn:hover{background:#EEF1F8;}
.tabbtn.active{background:var(--navy);color:#fff;}

.container{padding:20px 28px 60px 28px;max-width:1200px;margin:0 auto;}
.tabpage{display:none;}
.tabpage.active{display:block;}

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);padding:22px; margin-bottom:18px; border:1px solid var(--line);}
.card h2{ margin:0 0 4px 0; font-size:16px; font-weight:700; color:var(--navy); }
.card .desc{ font-size:13px; color:var(--text-mute); margin:0 0 16px 0; }

.prefix-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.prefix-lbl{font-size:12.5px;font-weight:700;color:var(--text-mute);}
.search-row{display:flex;gap:10px;}
#searchInput{flex:1; font-size:20px; padding:16px 18px; border:2px solid var(--line); border-radius:10px;font-weight:700; letter-spacing:0.5px; outline:none; transition:border-color .15s;}
#searchInput:focus{border-color:var(--navy);}
.btn{border:none; border-radius:10px; padding:12px 20px; font-size:14px; font-weight:700;cursor:pointer; transition:filter .15s, transform .05s; display: inline-flex; align-items: center; justify-content: center; gap: 6px;}
.btn:active{transform:scale(0.98);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{filter:brightness(1.12);}
.btn-ghost{background:#EEF1F8;color:var(--navy);}
.btn-ghost:hover{background:#E3E8F5;}
.btn-outline{background:#fff;border:1.5px solid var(--line);color:var(--text);}
.btn-outline:hover{border-color:var(--navy);color:var(--navy);}
.btn-small { padding: 6px 12px; font-size: 12.5px; border-radius: 6px; }
.btn:disabled{opacity:0.5;cursor:not-allowed;}

#resultZone{margin-top:20px;}
.placeholder{ text-align:center; color:var(--text-mute); font-size:14px; padding:50px 10px; }
.placeholder .big-icon{font-size:40px;display:block;margin-bottom:10px;}
.student-card{ border:1.5px solid var(--line); border-radius:var(--radius); padding:20px 22px; background:#FAFBFD; }
.student-name{ font-size:22px; font-weight:800; color:var(--navy); margin:0 0 2px 0; }
.student-msv{ font-size:14px; color:var(--text-mute); font-weight:600; margin:0 0 14px 0; }
.student-class-badge { background: #EEF1F8; color: var(--navy); padding: 3px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 700; display: inline-block; margin-left: 8px; }
.status-locked{ display:flex; align-items:center; gap:14px; background:#EAF6EF; border:1.5px solid #BFE3CC; border-radius:10px; padding:16px 18px; }
.status-locked .icon{font-size:26px;}
.status-locked .msg-title{font-weight:800;color:var(--green-dark);font-size:15px;}
.status-locked .msg-sub{font-size:13px;color:#3E7A5B;margin-top:2px;}
.out-of-size-note{ background:#FDF4E6; border:1.5px solid #F3D9A5; border-radius:10px; padding:12px 16px; font-size:13px; color:var(--orange-dark); margin-bottom:16px; font-weight:600; }
.size-label{ font-size:13px; font-weight:700; color:var(--text); margin:4px 0 10px 0; text-transform:uppercase; letter-spacing:0.5px; }
.size-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(50px, 1fr)); gap:8px; margin-bottom:22px; }
.size-opt{ position:relative; }
.size-opt input{ position:absolute; opacity:0; width:100%;height:100%; margin:0; cursor:pointer; }
.size-opt label{display:flex; align-items:center; justify-content:center; height:52px; border:2px solid var(--line); border-radius:10px;font-weight:800; font-size:15px; color:var(--text); background:#fff; cursor:pointer; transition:all .12s;}
.size-opt input:checked + label{ border-color:var(--navy); background:var(--navy); color:#fff; }
.size-opt label:hover{border-color:var(--navy-light);}
.action-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:10px; }
.big-action{border:none; border-radius:14px; padding:26px 14px; font-size:17px; font-weight:800; cursor:pointer; color:#fff;display:flex; flex-direction:column; align-items:center; gap:6px; transition:filter .15s, transform .05s; font-family: inherit;}
.big-action:active{transform:scale(0.98);}
.big-action .emoji{font-size:26px;}
.big-action.received{background:var(--green);}
.big-action.received:hover{filter:brightness(1.08);}
.big-action.outsize{background:var(--orange);}
.big-action.outsize:hover{filter:brightness(1.08);}
.big-action:disabled{background:#CBD2DE;cursor:not-allowed;filter:none;}
.not-found{text-align:center; padding:40px 10px; color:var(--red);}
.not-found .big-icon{font-size:40px;display:block;margin-bottom:10px;}
.not-found .sub{color:var(--text-mute);font-size:13px;margin-top:6px;}

.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);background:var(--navy-dark); color:#fff; padding:14px 24px; border-radius:10px;font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,0.25);opacity:0; transition:opacity .2s, transform .2s; z-index:9999; pointer-events:none; max-width:90vw; text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.success{background:var(--green-dark);}
.toast.warn{background:var(--orange-dark);}
.toast.error{background:var(--red-dark);}

.upload-box{border:2px dashed var(--line); border-radius:var(--radius); padding:34px 20px;text-align:center; background:#FAFBFD; transition: background 0.2s;}
.upload-box:hover { background: #EEF1F8; }
.upload-box.dragover { background:#EAF6EF; border-color:var(--navy); border-style:solid; }
.upload-box.dragover .big-icon { transform: scale(1.12); transition: transform .12s; }
.upload-box .big-icon{font-size:34px;display:block;margin-bottom:10px;color:var(--navy);}
.upload-box p{margin:4px 0 16px 0;font-size:13.5px;color:var(--text-mute);}
input[type=file]{display:none;}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;}
.stat-box{ flex:1;min-width:150px; background:#F5F7FC; border-radius:10px; padding:14px 16px; border:1px solid var(--line); }
.stat-box .num{font-size:24px;font-weight:800;color:var(--navy);}
.stat-box .lbl{font-size:12.5px;color:var(--text-mute);font-weight:600;margin-top:2px;}

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{ text-align:left; background:#F5F7FC; color:var(--navy); font-weight:700; padding:10px 12px; border-bottom:2px solid var(--line); white-space:nowrap; }
tbody td{ padding:9px 12px; border-bottom:1px solid var(--line); color:var(--text); }
tbody tr:hover{background:#FAFBFD;}
.table-wrap{max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:10px;}
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; }
.badge.received{background:#E1F5EE;color:var(--green-dark);}
.badge.outsize{background:#FDF0DA;color:var(--orange-dark);}
.badge.none{background:#EEF0F4;color:var(--text-mute);}
.empty-note{text-align:center;color:var(--text-mute);padding:24px;font-size:13px;}
.pager{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-top:12px;font-size:13px;color:var(--text-mute);}

.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
select, .txtinput{ padding:10px 12px; border:1.5px solid var(--line); border-radius:8px; font-size:13.5px; color:var(--text); background:#fff; outline:none; }
select:focus, .txtinput:focus{border-color:var(--navy);}
.metric-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.metric{ background:#F5F7FC; border-radius:10px; padding:14px 16px; border:1px solid var(--line); }
.metric .num{font-size:22px;font-weight:800;color:var(--navy);}
.metric .lbl{font-size:12px;color:var(--text-mute);font-weight:600;margin-top:2px;}
.metric-click{cursor:pointer;transition:background .12s;}
.metric-click:hover{background:#EEF1F8;border-color:var(--navy-light);}
.waiting-link{color:var(--orange-dark);font-weight:800;text-decoration:underline;cursor:pointer;}

.modal-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;display: none; align-items: center; justify-content: center; padding: 16px;}
.modal-overlay.show { display: flex; }
.modal-card { background: #fff; width: 100%; max-width: 440px; border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.modal-card h3 { margin: 0 0 8px 0; color: var(--navy); }
.modal-card .sv-name { font-weight: 800; font-size: 17px; margin-bottom: 16px; color: var(--text); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--text-mute); margin-bottom: 6px; }
.form-group select, .form-group input { width: 100%; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap:wrap; }

/* ---- IMPORT WIZARD ---- */
.wizard-card{ max-width:660px; max-height:90vh; overflow:auto; }
.wiz-steps{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.wiz-step{ font-size:11.5px; font-weight:700; color:var(--text-mute); background:#EEF1F8; padding:6px 12px; border-radius:999px; }
.wiz-step.active{ background:var(--navy); color:#fff; }
.wiz-step.done{ background:#E1F5EE; color:var(--green-dark); }
.wiz-file{ font-size:13px; font-weight:600; color:var(--navy); margin-bottom:8px; word-break:break-all; }
.wiz-hint{ font-size:12px; color:var(--text-mute); margin:2px 0 0 0; }
.wiz-summary{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.wiz-summary .chip{ background:#F5F7FC; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:12px; color:var(--text-mute); }
.wiz-summary .chip b{ font-size:16px; color:var(--navy); display:block; margin-top:2px; }

/* ---- CHỌN NGƯỜI ĐẠI DIỆN (nhận theo lớp) ---- */
.receiver-box{ position:relative; }
.receiver-dropdown{ position:absolute; left:0; right:0; top:100%; z-index:50; background:var(--card); border:1.5px solid var(--line); border-top:none; border-radius:0 0 10px 10px; max-height:240px; overflow:auto; box-shadow:var(--shadow); display:none; }
.receiver-dropdown.show{ display:block; }
.receiver-item{ padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--line); }
.receiver-item:last-child{ border-bottom:none; }
.receiver-item:hover, .receiver-item.active{ background:#EEF1F8; }
.receiver-item .nm{ font-weight:600; font-size:14px; color:var(--text); }
.receiver-item .mv{ font-size:12px; color:var(--text-mute); }
.receiver-item .badge{ float:right; }
.receiver-selected{ margin-top:10px; background:#EAF6EF; border:1.5px solid #BFE3CC; border-radius:10px; padding:10px 14px; color:var(--green-dark); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.receiver-selected b{ color:var(--green-dark); }
.receiver-clear{ background:none; border:1px solid #BFE3CC; color:var(--green-dark); border-radius:8px; padding:4px 10px; font-size:12px; font-weight:700; cursor:pointer; }

.stock-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.stock-item{ border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; background:#FAFBFD; }
.stock-item .size-tag{ display:inline-block; background:var(--navy); color:#fff; font-weight:800; font-size:13px; padding:3px 12px; border-radius:8px; margin-bottom:10px; }
.stock-item label{ display:block; font-size:11.5px; color:var(--text-mute); font-weight:700; margin:8px 0 4px 0; text-transform:uppercase; }
.stock-item input[type=number]{ width:100%; padding:9px 10px; border:1.5px solid var(--line); border-radius:8px; font-size:15px; font-weight:700; color:var(--navy); }
.stock-summary-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-mute); margin-top:4px; }
.stock-summary-row b{color:var(--text);}
.remain-ok{color:var(--green-dark);font-weight:800;}
.remain-low{color:var(--orange-dark);font-weight:800;}
.remain-out{color:var(--red-dark);font-weight:800;}

#loginOverlay{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%); padding:20px; }
.login-box{ background:#fff; border-radius:16px; padding:34px 30px; width:100%; max-width:360px; box-shadow:0 20px 50px rgba(0,0,0,0.25); }
.login-box h1{ font-size:18px; color:var(--navy); margin:0 0 4px 0; text-align:center; }
.login-box .sub{ font-size:12.5px; color:var(--text-mute); text-align:center; margin:0 0 24px 0; }
.login-field{margin-bottom:14px;}
.login-field label{ display:block; font-size:12px; font-weight:700; color:var(--text-mute); margin-bottom:6px; text-transform:uppercase; }
.login-field input{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:9px; font-size:14px; outline:none; }
.login-field input:focus{border-color:var(--navy);}
.login-error{ background:#FBE9E9; color:var(--red-dark); font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:8px; margin-bottom:14px; display:none; }
.login-error.show{display:block;}
.btn-login{ width:100%; background:var(--navy); color:#fff; border:none; padding:13px; border-radius:9px; font-size:14.5px; font-weight:700; cursor:pointer; }
.btn-login:hover{filter:brightness(1.1);}

.danger-card{ background:#FDF4F4; border:1.5px solid #F3CFCF; }
.danger-card h2{color:var(--red-dark);}
.danger-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.btn-danger{ background:var(--red-dark); color:#fff; border:none; padding:12px 20px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }
.btn-danger:disabled{background:#D9C6C6;cursor:not-allowed;}
.btn-danger:not(:disabled):hover{filter:brightness(1.08);}

@media (max-width: 768px) {
  .app-header, .tabbar, .container { padding-left: 14px; padding-right: 14px; }
  .tabbar { justify-content: center; }
  .tabbtn { flex: 1 1 45%; text-align: center; padding: 10px 4px; }
  .action-row { grid-template-columns: 1fr; }
  .danger-row { flex-direction: column; align-items: stretch; }
  .danger-row .txtinput, .danger-row .btn-danger { width: 100%; }
}
@media (max-width: 480px) {
  .app-header h1 { font-size: 17px; }
  .tabbtn { flex: 1 1 45%; font-size: 13px; padding: 9px 4px; }
  .search-row { flex-direction: column; }
  #searchInput { width: 100%; font-size: 16px; }
  .prefix-row { flex-direction: column; align-items: stretch !important; }
}

/* ============ v2: nền tảng check-in tuỳ biến ============ */
:root{ --blue:#2563A8; --blue-dark:#1A4677; --purple:#6D3FB0; --purple-dark:#4B2A7B; --gray:#6B7280; --gray-dark:#4B5563; }
.hidden{display:none !important;}
.muted{color:var(--text-mute);}
.small{font-size:12px;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.grow{flex:1;min-width:180px;}
.section-title{font-size:13px;font-weight:800;color:var(--text);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.4px;}
.campaign-desc{font-size:13px;color:var(--text-mute);margin:-8px 0 14px;white-space:pre-line;}

/* màu theo nút hành động */
.c-green{--c:var(--green);--cd:var(--green-dark);--cl:#E1F5EE;}
.c-blue{--c:var(--blue);--cd:var(--blue-dark);--cl:#E3EEF9;}
.c-orange{--c:var(--orange);--cd:var(--orange-dark);--cl:#FDF0DA;}
.c-red{--c:var(--red);--cd:var(--red-dark);--cl:#FBE9E9;}
.c-purple{--c:var(--purple);--cd:var(--purple-dark);--cl:#EFE7FA;}
.c-navy{--c:var(--navy);--cd:var(--navy-dark);--cl:#F6E6E9;}
.c-gray{--c:var(--gray);--cd:var(--gray-dark);--cl:#EEF0F4;}
.sbadge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--cl,#EEF0F4);color:var(--cd,var(--text-mute));white-space:nowrap;}
.act-btn{background:var(--c);color:#fff;border:none;border-radius:14px;padding:22px 14px;font-size:17px;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:inherit;transition:filter .15s,transform .05s;}
.act-btn:hover{filter:brightness(1.08);}
.act-btn:active{transform:scale(.98);}
.act-btn:disabled{background:#CBD2DE;cursor:not-allowed;filter:none;}
.act-btn .sub{font-size:11.5px;font-weight:600;opacity:.9;}
.act-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:14px;}
.act-chip{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--text);font-family:inherit;}
.act-chip.on{background:var(--c,var(--navy));border-color:var(--c,var(--navy));color:#fff;}
.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--c);vertical-align:middle;}

/* trường thông tin động */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 18px;}
.fitem{min-width:0;}
.fitem.wide{grid-column:1/-1;}
.flabel{display:block;font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px;}
.flabel .req{color:var(--red);margin-left:3px;}
.flabel .tag{font-weight:600;font-size:11px;color:var(--text-mute);margin-left:6px;}
.fhelp{font-size:11.5px;color:var(--text-mute);margin:-2px 0 6px;}
.finput{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:9px;font-size:14.5px;color:var(--text);background:#fff;outline:none;font-family:inherit;}
.finput:focus{border-color:var(--navy);}
textarea.finput{min-height:70px;resize:vertical;}
.fitem.err .finput,.fitem.err .opts{outline:2px solid var(--red);outline-offset:2px;border-radius:9px;}
.opts{display:flex;flex-wrap:wrap;gap:8px;}
.opt{position:relative;}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.opt span{display:flex;align-items:center;justify-content:center;min-width:52px;min-height:44px;padding:8px 14px;border:2px solid var(--line);border-radius:10px;font-weight:700;font-size:14px;background:#fff;color:var(--text);transition:all .12s;}
.opt input:checked + span{border-color:var(--navy);background:var(--navy);color:#fff;}
.opt input:focus-visible + span{outline:2px solid var(--gold);}
.fprefill{font-size:11px;color:var(--green-dark);margin-top:4px;font-weight:600;}
.data-list{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:13.5px;margin:6px 0 0;}
.data-list dt{color:var(--text-mute);font-weight:600;}
.data-list dd{margin:0;font-weight:600;white-space:pre-line;}
.hist{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px;font-size:12.5px;}
.hist-item{display:flex;gap:8px;align-items:baseline;padding:3px 0;flex-wrap:wrap;}
.cand-list{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.cand{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;background:#fff;}
.cand:hover{border-color:var(--navy);background:#FAFBFD;}

/* theo lớp / nhóm */
.seg{display:inline-flex;background:#EEF1F8;border-radius:10px;padding:4px;gap:4px;}
.seg button{border:none;background:transparent;padding:9px 16px;border-radius:8px;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--text-mute);font-family:inherit;}
.seg button.on{background:var(--navy);color:#fff;}
.roster td{vertical-align:top;}
.roster tr.dis td{color:#A09496;}
.roster .ovr{font-size:11.5px;color:var(--blue-dark);font-weight:600;}
.member-chip{display:inline-flex;align-items:center;gap:6px;background:#EEF1F8;border-radius:999px;padding:5px 6px 5px 12px;font-size:12.5px;font-weight:600;margin:0 6px 6px 0;}
.member-chip button{border:none;background:#fff;border-radius:50%;width:20px;height:20px;cursor:pointer;font-weight:800;color:var(--red-dark);line-height:1;}
.result-box{margin-top:14px;border-radius:10px;padding:12px 16px;background:#EAF6EF;border:1.5px solid #BFE3CC;color:var(--green-dark);}
.result-box.warn{background:#FDF4E6;border-color:#F3D9A5;color:var(--orange-dark);}

/* thống kê */
.bar{height:8px;background:#EEF0F4;border-radius:99px;overflow:hidden;min-width:60px;}
.bar i{display:block;height:100%;background:var(--navy);}
.opt-stat{display:grid;grid-template-columns:minmax(80px,max-content) 1fr 50px;gap:6px 10px;align-items:center;font-size:13px;}
.pivot td.cell{cursor:pointer;text-align:right;}
.pivot td.cell:hover{background:#EEF1F8;}
.pivot th.num,.pivot td.num{text-align:right;}
.pivot tr.tot td{font-weight:800;background:#F5F7FC;}
.clickable{cursor:pointer;text-decoration:underline dotted;}

/* cấu hình đợt (form builder) */
.fb-card{border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:#FAFBFD;}
.fb-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.fb-head .finput{flex:1;min-width:200px;font-weight:700;}
.fb-tools{display:flex;gap:4px;}
.icon-btn{border:1.5px solid var(--line);background:#fff;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:14px;}
.icon-btn:hover{border-color:var(--navy);}
.icon-btn.danger:hover{border-color:var(--red);color:var(--red);}
.fb-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;margin-top:12px;}
.fb-body .full{grid-column:1/-1;}
.lb{display:block;font-size:11.5px;font-weight:700;color:var(--text-mute);margin-bottom:4px;text-transform:uppercase;}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer;margin-right:12px;}
.chk input{width:16px;height:16px;}
.chips-sel{display:flex;flex-wrap:wrap;gap:6px;}
.chips-sel .act-chip{padding:5px 12px;font-size:12.5px;}
.sticky-save{position:sticky;bottom:10px;z-index:20;display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);}
.preview-box{border:2px dashed var(--line);border-radius:12px;padding:16px;background:#fff;}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;}
.preset{border:2px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:#fff;text-align:left;font-family:inherit;}
.preset.on{border-color:var(--navy);background:#FBF4F5;}
.preset b{display:block;color:var(--navy);margin-bottom:4px;}
.preset span{font-size:12px;color:var(--text-mute);}
.modal-card.wide{max-width:760px;max-height:90vh;overflow:auto;}
@media (max-width: 768px){ .act-row{grid-template-columns:1fr;} .fgrid{grid-template-columns:1fr;} }