:root{
  --primary:#1b5e20; --primary-dark:#143f16; --primary-soft:#e6f2ea;
  --bg:#f8f7fa; --card:#fff; --line:#dbdade; --text:#4b465c; --muted:#8a8795;
  --error:#ea5455; --ok:#28c76f;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.55 "Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}

header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 24px;background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:0 2px 6px rgba(75,70,92,.08);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand .logo{height:38px;width:auto}
.brand .title{font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--primary);border-left:2px solid var(--line);padding-left:14px}
.userbox{display:flex;align-items:center;gap:14px}
.userbox .who{font-size:13px;color:var(--text);font-weight:700;text-align:right;line-height:1.4}
.userbox .who small{display:block;color:var(--muted);font-weight:500}
.userbox form{margin:0}

main{max-width:1180px;margin:20px auto;padding:0 16px 40px}
nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
a.tab{
  display:inline-block;padding:9px 16px;border-radius:6px;font-weight:500;font-size:14px;
  background:#fff;color:var(--text);border:1px solid var(--line);text-decoration:none;
}
a.tab:hover{background:var(--primary-soft)}
a.tab.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}

.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin-bottom:16px;box-shadow:0 2px 8px rgba(75,70,92,.06)}
.card h2{margin-top:0;font-size:16px;color:var(--primary)}
.sub{color:#5b6b60;font-size:13px;font-weight:600}
label{display:block;margin:14px 0 6px;font-size:13px;font-weight:700;color:#33403a}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(27,94,32,.15)}
textarea{resize:vertical}
form:not(.row) > button[type=submit]{margin-top:18px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn-row{gap:12px}
input[type=file]{padding:8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:14px}
.upload-row{gap:36px;margin-bottom:4px}
.upload-row input[type=file]{flex:0 1 320px}
.upload-row button{flex:none;margin-left:4px}
.spaced{margin-top:18px}
.send-row{justify-content:space-between}
.checkbox{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}

button,.btn{
  padding:10px 18px;border-radius:6px;font-weight:600;cursor:pointer;font-size:14px;
  border:1px solid var(--primary);background:var(--primary);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:background .12s ease, filter .12s ease, opacity .12s ease;
  position:relative;
}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.08)}
button:active:not(:disabled),.btn:active{filter:brightness(.95)}
button.ghost,.btn-secondary{
  background:#fff;color:var(--primary);border:1px solid var(--line);box-shadow:none;
}
button.ghost:hover:not(:disabled),.btn-secondary:hover{background:var(--primary-soft)}
.btn-accent{background:var(--primary);color:#fff}
.btn-link{background:none;border:none;color:var(--primary);cursor:pointer;text-decoration:underline;font-size:13px;padding:0;box-shadow:none}
.btn-danger{color:var(--error)}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* nút đang xử lý: mờ đi + icon xoay để người dùng biết hệ thống đang chạy */
button.is-loading,.btn.is-loading{color:transparent !important;pointer-events:none;opacity:.85}
button.is-loading::after,.btn.is-loading::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;
  animation:btn-spin .7s linear infinite;
}
button.ghost.is-loading::after,.btn-secondary.is-loading::after,.btn-link.is-loading::after{
  border-color:rgba(27,94,32,.25);border-top-color:var(--primary);
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

.table-wrap{width:100%}
.table-scroll{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:6px}
/* Độ rộng cột cố định theo <colgroup><col> (giống tool desktop), có thể kéo-giãn bằng tay.
   table-layout:fixed để <col> luôn là nguồn quyết định độ rộng, kéo-giãn chắc chắn ăn ngay lần đầu. */
table.preview{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:13px;table-layout:fixed}
table.preview th,table.preview td{border-bottom:1px solid var(--line);border-right:1px solid #eef0ee;padding:5px 8px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
table.preview th{background:var(--primary-soft);color:var(--primary-dark);position:sticky;top:0;z-index:5;cursor:pointer;user-select:none}
.status-badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:12px;font-weight:600}
.status-badge.ok{background:#e6f4ea;color:#1b5e20}
.status-badge.bad{background:#fdecea;color:#c62828}
/* dòng thiếu dữ liệu (chưa có email hợp lệ) tô đỏ nhạt toàn dòng để cảnh báo trước khi gửi */
tr.row-invalid td{background:#fdf2f1}
tr.row-invalid td:nth-child(1),tr.row-invalid td:nth-child(2),tr.row-invalid td:last-child{background:#fbe8e6}
table.preview .cell-input{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:4px;
  font:inherit;color:inherit;text-align:center}
table.preview .cell-input:hover{border-color:var(--line)}
table.preview .cell-input:focus{outline:0;border-color:var(--primary);background:#fff;box-shadow:0 0 0 2px rgba(27,94,32,.15)}
table.preview .cell-input[readonly]{cursor:default;color:inherit}
table.preview .cell-input[readonly]:hover{border-color:transparent}
tr.row-editing .cell-input{background:#fffdf2;border-color:#e8d98a}
table.preview td.readonly-cell{color:var(--muted);font-style:italic}

/* cột Tác vụ: nút Chọn (riêng) + nút bút mở menu Sửa/Xoá */
/* thanh tìm kiếm phía trên bảng xem trước, kiểu bo tròn giống các hệ thống nội bộ khác */
.search-bar{position:relative;max-width:360px;margin:4px 0 14px}
.search-bar .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.5}
.search-bar input{padding-left:34px;border-radius:20px;background:#fafbfa}
.search-bar input:focus{background:#fff}

/* tiến trình gửi email thật - giống thanh tiến trình trên tool desktop */
.send-progress{margin-top:14px}
.send-progress-bar{width:100%;height:10px;border-radius:6px;background:#e8eeec;overflow:hidden}
.send-progress-fill{height:100%;width:0%;background:var(--primary);transition:width .25s ease}
#sendProgressText{margin-top:6px;font-weight:600}

table.preview td.actions-cell{overflow:visible;text-align:center;padding:4px;white-space:nowrap}
.icon-btn{
  width:30px;height:30px;padding:0;border-radius:6px;font-size:14px;line-height:1;margin:0 2px;
  background:transparent;color:var(--muted);border:none;box-shadow:none;
}
.edit-icon-btn:hover{background:var(--primary-soft);color:var(--primary)}
.delete-icon-btn:hover{background:rgba(234,84,85,.12);color:var(--error)}
/* bấm Xoá là ẩn hẳn dòng khỏi danh sách ngay, không chờ lưu mới biến mất */
tr.row-marked-delete{display:none}
tr.row-search-hidden{display:none}

/* trang quản lý tài khoản: ô "Thao tác" cần overflow visible để mở khung sửa quyền */
table.preview td.actions{overflow:visible;white-space:normal}
.perm-row{gap:18px;row-gap:8px}
.perm-editor{position:relative;display:inline-block}
.perm-editor summary{cursor:pointer;list-style:none}
.perm-editor summary::-webkit-details-marker{display:none}
.perm-editor[open] summary{color:var(--primary-dark)}
.perm-form{
  position:absolute;top:calc(100% + 4px);left:0;z-index:30;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.15);padding:14px;min-width:230px;
  display:flex;flex-direction:column;gap:6px;white-space:normal;text-align:left;
}
.perm-form select{margin-bottom:4px}
button.small,.btn.small{padding:6px 12px;font-size:12px;margin-top:8px}
.col-resizer{position:absolute;right:0;top:0;height:100%;width:6px;cursor:col-resize;z-index:3}
.col-resizer:hover{background:rgba(27,94,32,.25)}
th.col-selected,td.col-selected{background:#cfe9d8 !important}
table.preview tbody tr:hover td{background:#f5faf6}
tr.row-selected td{background:#d9f0e1 !important}
tr:focus-within td{background:#eef7f1}
/* cố định 2 cột đầu (STT, Họ và tên) khi cuộn ngang, giống dòng tiêu đề khi cuộn dọc */
table.preview th:nth-child(1),table.preview td:nth-child(1){position:sticky;left:0;z-index:4;background:#fff}
table.preview th:nth-child(2),table.preview td:nth-child(2){position:sticky;left:var(--col1-width,42px);z-index:4;background:#fff}
table.preview th:nth-child(1),table.preview th:nth-child(2){z-index:6;background:var(--primary-soft)}
tr.row-selected td:nth-child(1),tr.row-selected td:nth-child(2){background:#d9f0e1}
/* cố định cột Tác vụ bên phải khi cuộn ngang */
table.preview th:last-child,table.preview td:last-child{position:sticky;right:0;z-index:4;background:#fff;border-left:1px solid var(--line)}
table.preview th:last-child{z-index:6;background:var(--primary-soft)}
tr.row-selected td:last-child{background:#d9f0e1}
.pager{display:flex;gap:14px;align-items:center;margin-top:10px;font-size:13px}

.flashes{margin-bottom:14px}
.flash{padding:10px 14px;border-radius:6px;margin-bottom:8px;font-size:14px;font-weight:600}
.flash-success{background:#e6f4ea;color:#1b5e20;border:1px solid #bfe3c8}

/* thông báo lưu hiện ngay cạnh nút, không bắt cuộn lên đầu trang để xem */
.save-result-msg{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-weight:600;font-size:13px;
  background:#e6f4ea;color:#1b5e20;border:1px solid #bfe3c8;animation:save-pop .2s ease}
.save-result-msg.is-error{background:#fdecea;color:#c62828;border-color:#f5c2c0}
@keyframes save-pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

/* nhắc bấm nút Sửa trước khi gõ vào ô đang khoá */
.locked-hint{
  position:absolute;z-index:50;background:#2c3e35;color:#fff;font-size:12px;font-weight:600;
  padding:6px 10px;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.2);pointer-events:none;
  animation:save-pop .15s ease;white-space:nowrap;
}
@keyframes pulse-hint{0%,100%{box-shadow:0 0 0 0 rgba(27,94,32,.5)}50%{box-shadow:0 0 0 6px rgba(27,94,32,0)}}
.pulse-hint{animation:pulse-hint .5s ease 2}
.flash-error{background:#fdecea;color:#c62828;border:1px solid #f5c2c0}

/* ---- login page ---- */
body.login-page{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(135deg, #0e3d1e 0%, #1b5e20 45%, #2e7d32 75%, #4caf50 100%);
  min-height:100vh;
}
.login-scene{min-height:calc(100vh - 20px);display:flex;align-items:center;justify-content:center;padding:40px 16px}
.login-card-3d{
  width:100%;max-width:380px;background:#fff;border-radius:16px;padding:34px 30px 30px;text-align:center;
  box-shadow:0 2px 4px rgba(0,0,0,.08), 0 10px 24px rgba(0,30,10,.18);border:1px solid rgba(255,255,255,.5);
}
.login-logo-wrap{background:#fff;border-radius:12px;padding:14px 18px;display:inline-block;margin-bottom:18px}
.login-logo{max-width:220px;width:100%;height:auto;display:block}
.login-card-3d h1{color:var(--primary);font-size:19px;margin:0 0 4px;letter-spacing:.5px}
.login-card-3d .sub{margin-bottom:14px}
.login-card-3d form{text-align:left}
.login-card-3d label{font-weight:700;color:var(--text);font-size:14px;margin:16px 0 6px}
.btn-wide{width:100%;margin-top:16px}

@media (max-width:760px){
  header{padding:8px 14px}
  .brand .title{display:none}
  .userbox .who{display:none}
  nav{position:sticky;top:0;background:var(--bg);z-index:5;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  a.tab{flex:none;white-space:nowrap}
  .card{padding:16px 14px}
  .row{flex-direction:column;align-items:stretch}
  .row > button,.row > .btn{width:100%}
}