/* v0.18.0 Mẫu báo giá: layout-driven quote paper + builder */

/* Paper colours, fonts and sizes come from the layout (CSS variables set inline). */
.quote-paper.qt-layout{color:var(--qt-text,#000)}
.quote-paper.qt-layout .qt-company{font-size:1em}
.quote-paper.qt-layout .qt-company strong{color:var(--qt-primary,#0070C0);font-size:1.27em}
.quote-paper.qt-layout .qt-contract{font-size:.97em}
.quote-paper.qt-layout .qt-number{font-size:.8em}
.quote-paper.qt-layout .qt-meta{font-size:1.03em}
.quote-paper.qt-layout .qt-title{color:var(--qt-text,#000)}
.quote-paper.qt-layout table{font-size:.97em}
.quote-paper.qt-layout th{background:var(--qt-head,#B4C6E7);color:var(--qt-head-text,#000);border-color:var(--qt-border,#000);font-size:1em}
.quote-paper.qt-layout td{border-color:var(--qt-border,#000)}
.quote-paper.qt-layout .qt-group td,.quote-paper.qt-layout .qt-total td{background:var(--qt-primary,#0070C0);color:var(--qt-accent,#fff);border-color:var(--qt-border,#000);font-size:1.03em}
.quote-paper.qt-layout .qt-sub td{border-color:var(--qt-border,#000)}
.quote-paper.qt-layout .qt-sign{font-size:1em}
.quote-paper.qt-layout .qt-head{display:grid;gap:16px;align-items:center}
.quote-paper.qt-layout .qt-logo img{max-width:100%}
.quote-paper.qt-layout.portrait{min-width:720px;max-width:860px;margin:0 auto}

/* Quote editor: fields of columns hidden by the layout */
#quote-form.lh-image .line-grid>.image-field,#quote-form.lh-description .line-grid>label:has(textarea){display:none}

/* List */
.lb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.lb-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e4e7ec;border-radius:10px;background:#fff}
.lb-card.inactive{opacity:.7}
.lb-thumb{position:relative;display:block;height:200px;padding:0;overflow:hidden;border:0;border-bottom:1px solid #eaecf0;border-radius:0;background:#eef1f5;cursor:pointer}
.lb-thumb-inner{position:absolute;top:12px;left:50%;width:1123px;transform:translateX(-50%) scale(.25);transform-origin:top center;pointer-events:none}
.lb-thumb.portrait .lb-thumb-inner{width:794px;transform:translateX(-50%) scale(.22)}
.lb-thumb-inner .quote-paper{min-width:0;box-shadow:0 8px 30px #0002}
.lb-thumb:hover,.lb-thumb:focus-visible{background:#e3e8ef}
.lb-card-body{display:grid;gap:6px;padding:12px 14px}
.lb-card-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.lb-swatches{display:flex;gap:4px}
.lb-swatches span{width:18px;height:18px;border:1px solid #0002;border-radius:4px}
.lb-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}

/* Builder */
.lb{display:grid;gap:12px}
.lb-bar{position:sticky;top:64px;z-index:9;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:-20px -20px 0;padding:10px 20px;border-bottom:1px solid #e4e7ec;background:#f3f5f8f2;backdrop-filter:blur(6px)}
.lb-bar [data-lb-back]{display:inline-flex;align-items:center;gap:6px}
.lb-bar [data-lb-back] .solid-icon{width:14px;height:14px;flex-basis:14px;transform:rotate(90deg)}
.lb-name{flex:1 1 240px;max-width:420px;margin:0;font-weight:700}
.lb-active{display:inline-flex;align-items:center;gap:6px;margin:0}
.lb-status{color:#067647;font-size:13px}
.lb-status.dirty{color:#b54708}
.lb-bar .primary{margin-left:auto}
.lb-main{display:grid;grid-template-columns:minmax(0,1fr) 10px var(--lb-panel-w,370px);gap:2px;align-items:start;overflow-anchor:none}
.lb-split{align-self:stretch;min-height:200px;border-radius:6px;cursor:col-resize;position:relative;touch-action:none}
.lb-split::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:2px;border-radius:2px;background:#d0d5dd}
.lb-split:hover::after,.lb-split.active::after{background:var(--brand)}
.lb-stage{height:var(--lb-h,860px);padding:20px;overflow:hidden;border:1px solid #e4e7ec;border-radius:10px;background:#e9edf3}
.lb-scale{transform-origin:0 0}
.lb-page{position:relative;box-sizing:border-box;padding:28px 30px;background:#fff;box-shadow:0 10px 30px #1018281f}
.lb-page .quote-paper{min-width:0;padding:0;box-shadow:none}
.lb-a4-end{position:absolute;left:0;right:0;border-top:2px dashed #f04438;pointer-events:none}
.lb-a4-end span{position:absolute;right:8px;top:-22px;padding:2px 8px;border-radius:4px;background:#f04438;color:#fff;font:600 12px/1.4 Arial,sans-serif}
.lb-block{position:relative;margin:0 -6px;padding:0 6px;outline:1px dashed transparent;outline-offset:2px;cursor:pointer}
.lb-block:hover{outline-color:#98a2b3}
.lb-block.lb-selected{outline:2px solid var(--brand)}
.lb-block.lb-hidden{opacity:.35}
.lb-hidden-tag{position:absolute;right:6px;top:0;z-index:2;padding:1px 6px;border-radius:4px;background:#475467;color:#fff;font:600 11px/1.4 Arial,sans-serif}
.lb-logo-ph{display:grid;place-items:center;width:100%;max-width:160px;border:2px dashed #98a2b3;border-radius:6px;color:#98a2b3;font:700 14px Arial,sans-serif}
.lb-page .qt-logo,.lb-page .qt-company,.lb-page th{position:relative}
.lb-resize{position:absolute;top:0;z-index:4;width:10px;height:100%;cursor:col-resize}
.lb-col-resize{right:-5px}
.lb-head-resize{right:-13px}
.lb-resize::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:2px;background:transparent}
.lb-resize:hover::after,body.lb-resizing .lb-resize::after{background:var(--brand)}
body.lb-resizing{cursor:col-resize;user-select:none}
.lb-panel{position:sticky;top:130px;max-height:calc(100vh - 150px);overflow:auto;overscroll-behavior:contain;overflow-anchor:none;padding:10px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}
.lb-help{margin:2px 4px 10px}
.lb-section{border-bottom:1px solid #eaecf0}
.lb-section>summary{padding:10px 6px;font-weight:700;cursor:pointer}
.lb-section-body{display:grid;gap:8px;padding:0 6px 12px}
.lb-field{display:grid;gap:4px;margin:0}
.lb-range{display:flex;align-items:center;gap:8px}
.lb-range input{flex:1;padding:0}
.lb-range output{min-width:44px;color:#475467;font-size:12px;text-align:right}
.lb-check{display:inline-flex;align-items:center;gap:6px;margin:0}
.lb-seg{justify-self:start}
.lb-color{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;margin:0}
.lb-color input{width:36px;height:30px;padding:0;border:1px solid #d0d5dd;border-radius:6px;background:none}
.lb-color code{color:#667085;font-size:11px}
.lb-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lb-trio label{margin:0;font-size:12px}
.lb-list{display:grid;gap:6px}
.lb-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid #eaecf0;border-radius:6px;background:#fcfcfd}
.lb-row .drag-handle{width:26px;height:26px}
.lb-row-name{flex:1;font-size:13px}
.lb-row input[type=text]{flex:1;min-width:0;margin:0;padding:4px 8px}
.lb-col-row.off{opacity:.6}
.lb-width{display:inline-flex;align-items:center;gap:2px;font-size:12px}
.lb-width input{width:58px;margin:0;padding:4px}
@media(max-width:1100px){.lb-main{grid-template-columns:minmax(0,1fr)}.lb-panel{position:static;max-height:none}}