/* Quản Lý Dự Án — giao diện kiểu bảng tính (Excel / Google Sheets) */
:root {
  --green: #1e6e42; --green-2: #188038; --green-bg: #e6f4ea;
  --grid: #e1e3e6; --head: #f8f9fa; --head-2: #eef0f2; --text: #202124; --muted: #5f6368;
  --sel: #1a73e8; --sel-bg: #e8f0fe;
  --gray: #80868b; --blue: #1a73e8; --amber: #e37400; --purple: #8430ce; --red: #c5221f; --red-bg: #fce8e6; --amber-bg: #fef7e0;
  --row-h: 30px;
  font-family: Arial, "Segoe UI", Roboto, Helvetica, sans-serif; font-size: 13px; color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--sel); }
.hidden { display: none !important; }

/* ===== Thanh trên ===== */
.app { display: flex; flex-direction: column; height: 100vh; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--grid); min-height: 52px; }
.logo { width: 34px; height: 34px; border-radius: 6px; background: var(--green); display: grid; place-items: center; flex: none; cursor: pointer; }
.logo svg { width: 22px; height: 22px; }
.doc-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.doc-title b { font-size: 17px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-title small { color: var(--muted); font-size: 12px; }
.menu-row { display: flex; gap: 2px; margin-top: 1px; flex-wrap: wrap; }
.menu-row span { padding: 1px 6px; border-radius: 3px; cursor: pointer; color: #3c4043; font-size: 13px; }
.menu-row span:hover { background: var(--head-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-weight: bold; cursor: pointer; flex: none; overflow: hidden; border: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Ribbon / thanh công cụ ===== */
.ribbon { display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--head); border-bottom: 1px solid var(--grid); flex-wrap: wrap; min-height: 38px; }
.ribbon .sep { width: 1px; height: 22px; background: #dadce0; margin: 0 4px; }
.btn { border: 1px solid transparent; background: transparent; padding: 4px 10px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; line-height: 20px; white-space: nowrap; }
.btn:hover { background: var(--head-2); }
.btn.primary { background: var(--green); color: #fff; }
.btn.primary:hover { background: #185a36; }
.btn.outline { border-color: #dadce0; background: #fff; }
.btn.danger { color: var(--red); border-color: #f2b8b5; background: #fff; }
.btn.danger:hover { background: var(--red-bg); }
.btn.small { padding: 2px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid #dadce0; border-radius: 4px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: transparent; padding: 3px 10px; cursor: pointer; border-right: 1px solid #dadce0; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--green-bg); color: var(--green); font-weight: bold; }

/* ===== Thanh công thức ===== */
.fx { display: flex; align-items: center; border-bottom: 1px solid var(--grid); min-height: 30px; }
.fx .cellref { width: 90px; padding: 0 10px; border-right: 1px solid var(--grid); color: var(--muted); text-align: center; font-size: 12px; }
.fx .fxi { padding: 0 10px; color: var(--muted); font-style: italic; border-right: 1px solid var(--grid); font-family: Georgia, serif; }
.fx .fxv { padding: 4px 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Banner trạng thái ===== */
.banner { padding: 8px 14px; font-weight: bold; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--grid); }
.banner.red { background: var(--red-bg); color: var(--red); }
.banner.amber { background: var(--amber-bg); color: #8a4b00; }
.banner.gray { background: #f1f3f4; color: #3c4043; }
.banner.green { background: var(--green-bg); color: var(--green); }

/* ===== Lưới bảng tính ===== */
.main { flex: 1; display: flex; min-height: 0; position: relative; }
.sheet-wrap { flex: 1; overflow: auto; position: relative; }
.pad { padding: 14px; }
table.sheet { border-collapse: separate; border-spacing: 0; min-width: 100%; table-layout: fixed; }
.sheet th, .sheet td { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); height: var(--row-h); padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: normal; }
.sheet thead th { position: sticky; top: 0; background: var(--head); color: var(--muted); text-align: center; font-size: 11px; height: 22px; z-index: 2; }
.sheet thead tr.labels th { top: 22px; background: #fff; color: var(--text); font-weight: bold; text-align: left; font-size: 13px; height: var(--row-h); border-bottom: 2px solid #c7c9cc; }
.sheet .rn { width: 46px; background: var(--head); color: var(--muted); text-align: center; position: sticky; left: 0; z-index: 1; font-size: 11px; }
.sheet thead .rn { z-index: 3; }
.sheet tbody tr { cursor: default; }
.sheet tbody tr.click { cursor: pointer; }
.sheet tbody tr:hover td { background: #f6f8fc; }
.sheet tbody tr:hover .rn { background: #e8eaed; }
.sheet tbody tr.sel td { background: var(--sel-bg); }
.sheet tbody tr.sel td:nth-child(2) { box-shadow: inset 2px 0 0 var(--sel); }
.sheet tbody tr.lv1 td:not(.rn) { background: var(--amber-bg); }
.sheet tbody tr.lv2 td:not(.rn), .sheet tbody tr.lv3 td:not(.rn) { background: var(--red-bg); }
.sheet tbody tr.lv2 .rn, .sheet tbody tr.lv3 .rn { background: var(--red); color: #fff; }
.sheet tbody tr.done td:not(.rn) { color: #3c4043; }
.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet td.center { text-align: center; }
.sheet td.wrap { white-space: normal; }
.sheet td input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--green); }
.sheet td select, .sheet td input.cell { border: 1px solid transparent; background: transparent; width: 100%; height: 26px; padding: 0 4px; }
.sheet td select:hover, .sheet td input.cell:hover, .sheet td input.cell:focus { border-color: #dadce0; background: #fff; }
.sheet .empty td { color: var(--muted); font-style: italic; }
.sheet tfoot td { background: var(--head); font-weight: bold; position: sticky; bottom: 0; }

/* Thanh tiến độ trong ô */
.bar { position: relative; height: 18px; background: #eceff1; border-radius: 2px; overflow: hidden; min-width: 70px; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--blue); }
.bar span { position: relative; display: block; text-align: center; line-height: 18px; font-size: 11px; font-weight: bold; color: #202124; }
.bar.big { height: 24px; } .bar.big span { line-height: 24px; font-size: 13px; }

/* Chip trạng thái — luôn có chữ, không chỉ dựa vào màu */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 20px; border-radius: 10px; font-size: 11.5px; font-weight: bold; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.c-gray { background: #f1f3f4; color: #5f6368; }
.c-blue { background: #e8f0fe; color: #1967d2; }
.c-purple { background: #f3e8fd; color: var(--purple); }
.c-green { background: var(--green-bg); color: var(--green); }
.c-amber { background: var(--amber-bg); color: #b06000; }
.c-red { background: var(--red-bg); color: var(--red); }
.c-dark { background: #e8eaed; color: #3c4043; }
.stars { color: #f9ab00; letter-spacing: 1px; }
.stars .off { color: #dadce0; }

/* ===== Tab trang tính phía dưới ===== */
.tabs { display: flex; align-items: stretch; background: var(--head); border-top: 1px solid var(--grid); min-height: 36px; overflow-x: auto; }
.tabs .add { padding: 0 12px; display: grid; place-items: center; color: var(--muted); border-right: 1px solid var(--grid); }
.tabs button { border: 0; background: transparent; padding: 0 16px; cursor: pointer; color: #3c4043; white-space: nowrap; border-right: 1px solid var(--grid); }
.tabs button:hover { background: var(--head-2); }
.tabs button.on { background: #fff; color: var(--green); font-weight: bold; box-shadow: inset 0 3px 0 var(--green); }

/* ===== Panel chi tiết bên phải ===== */
.panel { width: min(480px, 100%); border-left: 1px solid var(--grid); background: #fff; display: flex; flex-direction: column; min-height: 0; }
.panel-h { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--grid); background: var(--head); }
.panel-h h2 { margin: 0; font-size: 16px; flex: 1; line-height: 1.35; word-break: break-word; }
.panel-b { flex: 1; overflow: auto; padding: 0 0 20px; }
.sec { padding: 12px 14px; border-bottom: 1px solid var(--grid); }
.sec h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.kv { display: grid; grid-template-columns: 120px 1fr; border-top: 1px solid var(--grid); border-left: 1px solid var(--grid); }
.kv > div { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 5px 8px; min-height: 28px; }
.kv > div:nth-child(odd) { background: var(--head); color: var(--muted); }
.desc { white-space: pre-wrap; line-height: 1.5; word-break: break-word; }
.note { border: 1px solid var(--grid); border-radius: 4px; margin-bottom: 8px; }
.note-h { display: flex; gap: 8px; align-items: center; padding: 5px 8px; background: var(--head); border-bottom: 1px solid var(--grid); font-size: 12px; color: var(--muted); }
.note-h b { color: var(--text); }
.note-b { padding: 8px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.note.final { border-color: #a8dab5; } .note.final .note-h { background: var(--green-bg); }
.note.guide { border-color: #c6dafc; } .note.guide .note-h { background: var(--sel-bg); }
.atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; }
.att { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--grid); border-radius: 4px; padding: 4px 8px; text-decoration: none; color: var(--text); max-width: 100%; background: #fff; font-size: 12px; }
.att:hover { background: var(--head); }
.att .ext { font-weight: bold; font-size: 10px; padding: 1px 4px; border-radius: 2px; color: #fff; background: var(--gray); }
.att span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.att-img { width: 120px; height: 90px; object-fit: cover; border: 1px solid var(--grid); border-radius: 4px; cursor: zoom-in; }
.embed { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 4px; margin: 0 8px 8px; width: calc(100% - 16px); }
audio, video.v { width: calc(100% - 16px); margin: 0 8px 8px; }
.composer textarea { width: 100%; min-height: 80px; border: 1px solid #dadce0; border-radius: 4px; padding: 8px; resize: vertical; }
.composer .row { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.filelist { font-size: 12px; color: var(--muted); margin-top: 4px; }
.range { width: 100%; accent-color: var(--blue); }
.hint { color: var(--muted); font-size: 12px; line-height: 1.45; }
.warn { color: var(--red); font-weight: bold; }
.log { font-size: 12px; color: var(--muted); padding: 3px 0; border-bottom: 1px dashed var(--grid); }

/* ===== KPI ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--grid); border-left: 1px solid var(--grid); margin-bottom: 16px; }
.kpi { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 10px 12px; }
.kpi small { color: var(--muted); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.kpi b { font-size: 22px; font-weight: 400; display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi.red b { color: var(--red); } .kpi.green b { color: var(--green); }
h4.h { margin: 18px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.boxed { border: 1px solid var(--grid); overflow: auto; }

/* ===== Hộp thoại ===== */
.modal-bg { position: fixed; inset: 0; background: rgba(32,33,36,.45); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { background: #fff; border-radius: 6px; width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal.wide { width: min(860px, 100%); }
.modal-h { padding: 14px 18px; border-bottom: 1px solid var(--grid); font-size: 16px; font-weight: bold; display: flex; justify-content: space-between; }
.modal-b { padding: 16px 18px; overflow: auto; }
.modal-f { padding: 10px 18px; border-top: 1px solid var(--grid); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.form { display: grid; gap: 10px; }
.form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.form input, .form select, .form textarea { border: 1px solid #dadce0; border-radius: 4px; padding: 7px 9px; font-size: 14px; color: var(--text); background: #fff; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid #c6dafc; border-color: var(--sel); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { display: grid; gap: 8px; }
.choice label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #dadce0; border-radius: 6px; padding: 10px 12px; cursor: pointer; color: var(--text); font-size: 13px; }
.choice label:has(input:checked) { border-color: var(--green); background: var(--green-bg); }
.choice input { margin-top: 3px; accent-color: var(--green); }
.star-pick { font-size: 30px; cursor: pointer; color: #dadce0; user-select: none; }
.star-pick span.on { color: #f9ab00; }

/* ===== Đăng nhập ===== */
.auth { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(#f8f9fa, #eef3ef); padding: 16px; }
.auth-card { background: #fff; width: min(420px, 100%); border: 1px solid var(--grid); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.auth-card .hd { background: var(--green); color: #fff; padding: 18px 22px; display: flex; gap: 12px; align-items: center; }
.auth-card .hd b { font-size: 18px; display: block; }
.auth-card .bd { padding: 20px 22px; }
.gbtn { width: 100%; border: 1px solid #dadce0; background: #fff; border-radius: 4px; padding: 10px; display: flex; gap: 10px; justify-content: center; align-items: center; cursor: pointer; font-size: 14px; font-weight: bold; color: #3c4043; }
.gbtn:hover { background: var(--head); }
.or { text-align: center; color: var(--muted); margin: 14px 0; font-size: 12px; display: flex; gap: 8px; align-items: center; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--grid); }

/* ===== Toast ===== */
.toast { position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%); background: #323232; color: #fff; padding: 10px 16px; border-radius: 4px; z-index: 200; max-width: 90vw; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.toast.err { background: var(--red); }
.dropdown { position: absolute; right: 10px; top: 50px; background: #fff; border: 1px solid var(--grid); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.15); z-index: 50; min-width: 220px; padding: 6px 0; }
.dropdown div { padding: 8px 14px; cursor: pointer; }
.dropdown div:hover { background: var(--head); }
.dropdown .who { cursor: default; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--grid); }
.dropdown .who:hover { background: none; }
.qr { display: block; margin: 8px auto; max-width: 260px; width: 100%; border: 1px solid var(--grid); }
.loading { padding: 40px; text-align: center; color: var(--muted); }

/* ===== Điện thoại: bảng → thẻ ===== */
.cards { display: none; }
@media (max-width: 760px) {
  .menu-row { display: none; }
  .fx { display: none; }
  .panel { position: fixed; inset: 0; width: 100%; z-index: 60; }
  .sheet-wrap.has-cards table.sheet { display: none; }
  .sheet-wrap.has-cards .cards { display: block; padding: 8px; }
  .card { border: 1px solid var(--grid); border-left: 4px solid var(--blue); border-radius: 6px; padding: 10px; margin-bottom: 8px; background: #fff; }
  .card.lv1 { border-left-color: var(--amber); background: var(--amber-bg); }
  .card.lv2, .card.lv3 { border-left-color: var(--red); background: var(--red-bg); }
  .card.done { border-left-color: var(--green); }
  .card b { display: block; margin-bottom: 6px; }
  .card .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
  .form .two { grid-template-columns: 1fr; }
  .tabs button { padding: 0 12px; }
}

/* ===== Trang chủ công khai ===== */
.land { background: #fff; min-height: 100vh; }
.land-in { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.land-top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--grid); backdrop-filter: blur(6px); }
.land-top .land-in { display: flex; align-items: center; gap: 10px; height: 60px; }
.land-top .brand { font-size: 18px; margin-right: auto; }
.land-top nav { display: flex; gap: 4px; }
.land-top nav a { color: #3c4043; text-decoration: none; padding: 6px 10px; border-radius: 4px; }
.land-top nav a:hover { background: var(--head); }
.land-hero { background: linear-gradient(180deg, #f3faf5, #fff); border-bottom: 1px solid var(--grid); padding: 48px 0; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.land h1 { font-size: 38px; line-height: 1.2; margin: 0 0 16px; font-weight: 700; letter-spacing: -.5px; }
.land h1 span { color: var(--green); }
.land .lead { font-size: 17px; color: #3c4043; line-height: 1.55; margin: 0 0 22px; max-width: 560px; }
.land .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.btn.big { padding: 10px 18px; font-size: 15px; font-weight: bold; justify-content: center; text-decoration: none; }
#authbox .auth-card { width: 100%; }
.picked { background: var(--green-bg); border: 1px solid #a8dab5; border-radius: 4px; padding: 8px 10px; margin-bottom: 12px; font-size: 13px; }
.picked a { margin-left: 6px; }
.land-sec { padding: 56px 0; }
.land-sec.alt { background: var(--head); border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.land h2 { text-align: center; font-size: 28px; margin: 0 0 28px; }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--grid); border-left: 1px solid var(--grid); }
.feat > div { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 20px; }
.feat .fi { font-size: 26px; margin-bottom: 8px; }
.feat b { font-size: 15px; display: block; margin-bottom: 6px; }
.feat p { margin: 0; color: var(--muted); line-height: 1.5; }
.price { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pc { background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 22px 18px; display: flex; flex-direction: column; position: relative; }
.pc.hot { border: 2px solid var(--green); box-shadow: 0 6px 24px rgba(30,110,66,.12); }
.pc .tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 10px; }
.pc h3 { margin: 0 0 8px; font-size: 16px; }
.pc .amt { font-size: 26px; font-weight: bold; color: var(--green); }
.pc ul { list-style: none; padding: 0; margin: 16px 0 20px; flex: 1; }
.pc li { padding: 6px 0; border-bottom: 1px dashed var(--grid); font-size: 13px; }
.pc li::before { content: "✓ "; color: var(--green); font-weight: bold; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.steps > div { border: 1px solid var(--grid); border-radius: 6px; padding: 16px; line-height: 1.45; }
.steps span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-weight: bold; margin-right: 8px; }
.land-foot { border-top: 1px solid var(--grid); padding: 22px 0; color: var(--muted); font-size: 12px; text-align: center; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .price, .steps { grid-template-columns: 1fr 1fr; }
  .feat { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .land h1 { font-size: 28px; }
  .land-top nav { display: none; }
  .price, .steps, .feat { grid-template-columns: 1fr; }
}