:root {
  --green:#0E8C7F; --green-d:#0A5F56; --green-l:#E8F4F2;
  --ink:#1b2a2f; --muted:#5d6e74; --line:#dce5e7; --danger:#c0392b;
}
* { box-sizing: border-box; }
body {
  font-family:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin:0; color:var(--ink); background:#f6f8f8;
}
a { color:var(--green-d); text-decoration:none; }
a:hover { text-decoration:underline; }

.site-header {
  background:var(--green); color:#fff; padding:0 20px;
  display:flex; align-items:center; gap:24px; height:52px;
}
.site-header .brand, .site-header a { color:#fff; }
.site-header nav { display:flex; gap:18px; }

main { padding:24px; max-width:980px; margin:0 auto; }
.welcome h1 { color:var(--green-d); margin:0 0 6px; }
.cards { display:flex; gap:16px; margin-top:20px; flex-wrap:wrap; }
.card { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; flex:1 1 240px; }
.card h3 { margin:0 0 6px; color:var(--green-d); }
.card p { margin:0; color:var(--muted); }

.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.page-head h1 { margin:0; font-size:22px; color:var(--green-d); }

.btn {
  display:inline-block; border:1px solid var(--green); color:var(--green-d);
  background:#fff; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:14px;
}
.btn.primary { background:var(--green); color:#fff; }
.btn:hover { text-decoration:none; opacity:.92; }

table.data { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table.data th { background:var(--green-l); color:var(--green-d); text-align:left; padding:10px 12px; font-size:13px; }
table.data td { padding:10px 12px; border-top:1px solid var(--line); font-size:14px; }
.row-actions { display:flex; gap:10px; align-items:center; }
.row-actions form { margin:0; }
.link-danger { background:none; border:none; color:var(--danger); cursor:pointer; padding:0; font:inherit; }
.empty { color:var(--muted); }

.form { background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 20px 20px; }
.form fieldset { border:none; border-top:1px solid var(--line); padding:14px 0; margin:0; }
.form legend { color:var(--green-d); font-weight:600; padding:0; }
.form label { display:block; margin:10px 0; font-size:13px; color:var(--muted); }
.form input, .form textarea {
  display:block; width:100%; margin-top:4px; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); background:#fff;
}
.form input:focus, .form textarea:focus { outline:none; border-color:var(--green); }
.form .grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.form-actions { margin-top:16px; display:flex; gap:10px; }
.error-box { background:#fdecea; color:var(--danger); border:1px solid #f5c6cb; padding:10px 12px; border-radius:8px; margin-bottom:12px; }

/* ===== App shell (top bar) ===== */
.topbar { background:var(--green); color:#fff; height:54px; display:flex; align-items:center; gap:8px; padding:0 14px; }
.topbar .brand { display:flex; align-items:center; background:#fff; border-radius:8px; padding:5px 11px; }
.topbar .brand:hover { text-decoration:none; opacity:.95; }
.brand-logo { height:24px; width:auto; display:block; }
.lang-toggle { display:flex; gap:2px; background:rgba(255,255,255,.14); border-radius:20px; padding:2px; margin-right:8px; }
.lang-toggle a { color:#eaf4f1; font-size:12px; font-weight:600; padding:4px 9px; border-radius:16px; line-height:1; }
.lang-toggle a:hover { text-decoration:none; background:rgba(255,255,255,.12); }
.lang-toggle a.on { background:#fff; color:var(--green-d); }
.steps { display:flex; gap:4px; margin-left:16px; flex:1; }
.steps .step { color:#eaf4f1; display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:8px; font-size:14px; }
.steps .step:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.steps .step.on { background:#fff; color:var(--green-d); }
.step-n { width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.steps .step.on .step-n { background:var(--green); color:#fff; }
.user { position:relative; }
.user-btn { display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.14); border:none; color:#fff; padding:5px 8px; border-radius:20px; cursor:pointer; }
.avatar { width:26px; height:26px; border-radius:50%; background:#fff; color:var(--green-d); display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; }
.user-pop { position:absolute; right:0; top:46px; background:#fff; border:1px solid var(--line); border-radius:10px; min-width:184px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:6px; z-index:30; }
.user-pop a { display:block; padding:8px 10px; border-radius:7px; color:var(--ink); font-size:14px; }
.user-pop a:hover { background:var(--gl); text-decoration:none; }
.user-pop a.muted { color:var(--muted); cursor:default; }

/* ===== Container for simple pages ===== */
.container { padding:24px; max-width:980px; margin:0 auto; }
.container.narrow { max-width:720px; }

/* ===== Create-deal screen ===== */
.back-link { display:inline-block; margin-bottom:12px; font-size:13px; color:var(--muted); }
.back-link:hover { color:var(--green-d); }
.create-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 30px 30px; box-shadow:0 1px 14px rgba(10,95,86,.06); }
.create-head h1 { margin:0 0 6px; font-size:23px; color:var(--green-d); }
.create-head p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.step-flow { list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:18px 0 6px; padding:14px 16px; background:var(--green-l); border-radius:12px; }
.step-flow li { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--green-d); }
.step-flow .sf-n { width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.step-flow .sf-arrow { color:var(--green); font-weight:600; opacity:.65; }
.notice { margin:16px 0 0; padding:11px 14px; background:#fff6e9; border:1px solid #f0d9ad; border-radius:10px; font-size:13px; color:#7a5b1e; }
.notice a { color:#7a5b1e; text-decoration:underline; }

.create-form { margin-top:18px; }
.party-pick { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:12px; }
.pick-card { border:1px solid var(--line); border-radius:12px; padding:12px 13px; background:#fbfdfd; }
.pick-tag { display:block; font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; margin-bottom:7px; }
.pick-tag.a { color:var(--green-d); }
.pick-tag.b { color:#1f6f97; }
.pick-card select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; color:var(--ink); background:#fff; }
.pick-card select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.pick-preview { margin-top:8px; font-size:12px; color:var(--muted); line-height:1.5; }
.pick-preview .k { color:var(--green-d); font-weight:600; }
.pick-vs { align-self:center; color:var(--muted); font-size:18px; padding-top:18px; }

.name-field { display:block; margin-top:18px; }
.name-field .nf-label { display:block; font-size:13px; color:var(--ink); margin-bottom:5px; }
.name-field input { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; color:var(--ink); background:#fff; }
.name-field input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.create-actions { display:flex; gap:10px; align-items:center; margin-top:22px; }
.btn.big { padding:11px 20px; font-size:15px; font-weight:600; }

@media (max-width:640px) {
  .party-pick { grid-template-columns:1fr; }
  .pick-vs { display:none; }
  .step-flow { font-size:12px; }
}

/* ===== Workspace: 3 columns ===== */
.workspace { display:grid; grid-template-columns:248px minmax(330px,1fr) minmax(380px,1.05fr); height:calc(100vh - 54px); }
.col-list, .col-editor { overflow:auto; }
.col-list { border-right:1px solid var(--line); background:#fff; padding:14px; }
.col-editor { padding:14px 18px 28px; background:#f6f8f8; scrollbar-width:none; }
.col-editor::-webkit-scrollbar { width:0; height:0; }
.col-preview { background:#eef1f2; overflow:auto; padding:16px 14px; display:flex; justify-content:center; align-items:flex-start; scrollbar-width:none; }
.col-preview::-webkit-scrollbar { width:0; height:0; }
.paper-sizer { flex:0 0 auto; }
.paper { border:0; display:block; background:transparent; }

.list-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.list-head h2 { margin:0; font-size:15px; color:var(--green-d); }
.doc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.doc-list li { display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:9px; padding:5px 6px 5px 10px; }
.doc-list li.on { border-color:var(--green); background:var(--gl); }
.doc-list li a { flex:1; display:flex; flex-direction:column; gap:1px; color:var(--ink); }
.doc-list li a:hover { text-decoration:none; }
.doc-title { font-size:13px; font-weight:500; }
.doc-sub { font-size:11px; color:var(--muted); }
.doc-list form { margin:0; }

.editor-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:2px 0 10px; margin-bottom:6px; border-bottom:1px solid var(--line); }
/* Báo giá top cluster (version tabs + title/actions) stays pinned while scrolling */
.editor-topbar { position:sticky; top:0; z-index:10; background:#f6f8f8; margin:-14px -18px 10px; padding:12px 18px 0; border-bottom:1px solid var(--line); box-shadow:0 -16px 0 0 #f6f8f8, 0 5px 7px -5px rgba(0,0,0,.14); }
.editor-topbar .quote-tabs { margin-bottom:8px; }
.editor-topbar .editor-head { border-bottom:none; margin-bottom:0; padding-bottom:10px; }
.editor-head h2 { margin:0; font-size:16px; color:var(--green-d); }
.editor-form label { display:block; font-size:12px; color:var(--muted); margin:8px 0; }
.editor-form input, .editor-form textarea, .editor-form select {
  display:block; width:100%; margin-top:3px; padding:7px 9px; border:1px solid var(--line);
  border-radius:8px; font:inherit; font-size:13px; color:var(--ink); background:#fff;
}
.editor-form input:focus, .editor-form textarea:focus, .editor-form select:focus {
  outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--gl);
}
.editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.field-group { border-top:1px solid var(--line); margin-top:14px; padding-top:6px; }
.field-group h3 { font-size:13px; color:var(--green-d); margin:8px 0; }
.hint { font-size:12px; color:var(--muted); background:var(--gl); border-radius:8px; padding:8px 10px; }
.hint a { color:var(--green-d); }

.items { display:flex; flex-direction:column; gap:8px; }
.item-row { border:1px solid var(--line); border-radius:9px; background:#fff; padding:8px; display:flex; flex-direction:column; gap:6px; }
.item-row input { margin-top:0; }
.item-row .nums { display:flex; gap:6px; align-items:center; }
.item-row .w-unit { flex:0 0 60px; }
.item-row .w-num { flex:0 0 78px; }
.item-row .w-note { flex:1 1 100px; min-width:80px; }
.item-row textarea { margin-top:0; resize:vertical; width:100%; }
.item-row .meta3 { display:flex; gap:6px; }
.item-row .meta3 input { flex:1 1 0; min-width:0; margin-top:0; }
.item-row .nums { flex-wrap:wrap; }
.item-row .nums .row-del { margin-left:auto; flex:0 0 auto; }
.conds { display:flex; flex-direction:column; gap:8px; }
.cond-row { border:1px solid var(--line); border-radius:9px; background:#fff; padding:8px 34px 8px 8px; display:flex; flex-direction:column; gap:6px; position:relative; }
.cond-row .cond-label { font-weight:500; margin-top:0; }
.cond-row textarea { resize:vertical; width:100%; margin-top:0; }
.cond-row .row-del { position:absolute; top:7px; right:7px; }
.add-item { margin-top:8px; }
.vat { max-width:150px; }
.row-del { width:26px; height:26px; border:none; background:#f3e1e0; color:var(--danger); border-radius:7px; cursor:pointer; font-size:16px; line-height:1; }
.row-del:hover { background:#eccfce; }
.btn.ghost { background:transparent; border:1px dashed var(--green); }
.coming { padding:40px 20px; color:var(--muted); }
.coming h2 { color:var(--green-d); }

@media (max-width:980px) {
  .workspace { grid-template-columns:1fr; height:auto; }
  .col-preview { height:78vh; }
  .col-list { border-right:none; border-bottom:1px solid var(--line); }
}

.ai-bar { display:flex; align-items:center; gap:10px; margin:6px 0 2px; }
.btn.ai { background:#eef6f4; border:1px solid var(--green); color:var(--green-d); }
.btn.ai:disabled { opacity:.55; cursor:default; }
.ai-status { font-size:12px; color:var(--muted); }
.head-actions { display:flex; gap:8px; align-items:center; }
.deal-parties { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink); background:#f0f5f4; border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.deal-parties b { color:var(--green-d); }
.deal-parties.edit { flex-direction:column; align-items:stretch; gap:8px; }
.deal-parties .dp { display:flex; align-items:center; gap:10px; margin:0; }
.deal-parties .dp b { flex:0 0 46px; }
.deal-parties select { flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; color:var(--ink); background:#fff; cursor:pointer; }
.deal-parties select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }

/* Multiple quotes per deal — version tabs + add button */
.quote-tabs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.quote-tabs .qtab { display:inline-block; padding:4px 11px; border:1px solid var(--line); border-radius:16px; font-size:12px; color:var(--muted); background:#fff; }
.quote-tabs a.qtab:hover { border-color:var(--green); text-decoration:none; }
.quote-tabs a.qtab.on { background:var(--green); color:#fff; border-color:var(--green); }
.qtab-add-form { margin:0; }
.quote-tabs .qtab.add { border-style:dashed; border-color:var(--green); color:var(--green-d); cursor:pointer; }
.deal-code { color:var(--green-d); }

/* ===== Auth (login / change password) ===== */
.auth-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#f0f5f4,#e3eeeb); padding:24px; }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 30px 26px; width:100%; max-width:380px; box-shadow:0 10px 40px rgba(10,95,86,.10); text-align:center; }
.auth-logo { display:block; margin:0 auto 14px; }
.auth-card h1 { margin:0 0 4px; font-size:22px; color:var(--green-d); }
.auth-sub { margin:0 0 18px; font-size:13px; color:var(--muted); line-height:1.5; }
.auth-form { text-align:left; }
.auth-form label { display:block; font-size:13px; color:var(--ink); margin:12px 0 0; }
.auth-form input { display:block; width:100%; margin-top:5px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; color:var(--ink); background:#fff; }
.auth-form input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.auth-submit { width:100%; margin-top:18px; }
.auth-logout { margin-top:12px; }
.auth-logout .btn { width:100%; }
.user-name { padding:6px 10px 8px; font-weight:600; color:var(--green-d); border-bottom:1px solid var(--line); margin-bottom:4px; }
.menu-logout { margin:0; }
.menu-logout button { display:block; width:100%; text-align:left; padding:8px 10px; border:none; background:none; font:inherit; font-size:14px; color:var(--danger); cursor:pointer; border-radius:7px; }
.menu-logout button:hover { background:#fbecea; }
.preview-empty { margin:auto; padding:2rem; text-align:center; color:var(--muted); font-size:13px; }

/* small Print button + print (PDF) modal */
.icon-btn { padding:8px 10px; }
.print-modal { position:fixed; inset:0; z-index:60; background:rgba(15,22,24,.72); display:flex; align-items:center; justify-content:center; padding:22px; }
.print-modal[hidden] { display:none; }
.print-sheet { background:#fff; border-radius:12px; width:min(920px,96vw); height:92vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 16px 50px rgba(0,0,0,.45); }
.print-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--line); font-weight:600; color:var(--green-d); }
.print-sheet iframe { flex:1; border:0; width:100%; }

/* Editable commercial conditions (quote editor) */
.cond-edit { border:1px solid var(--line); border-radius:9px; background:#fff; margin-top:14px; padding:0 12px; }
.cond-edit summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--green-d); padding:10px 2px; list-style:none; }
.cond-edit summary::-webkit-details-marker { display:none; }
.cond-edit summary::before { content:"▸ "; color:var(--green); }
.cond-edit[open] summary::before { content:"▾ "; }
.cond-edit summary .muted { font-weight:400; }
.cond-edit label { display:block; font-size:12px; color:var(--muted); margin:8px 0; }
.cond-edit textarea, .cond-edit input { display:block; width:100%; margin-top:3px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; color:var(--ink); background:#fff; }
.cond-edit textarea:focus, .cond-edit input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.cond-note { font-size:11px; margin:8px 0 12px; line-height:1.5; }
.cond-note b { color:var(--green-d); }
.contract-btn { border-color:var(--green); color:var(--green-d); font-weight:600; }
.scope-list { margin:6px 0; padding-left:18px; font-size:13px; color:var(--ink); }
.scope-list li { margin:4px 0; }