/* =====================================================
   Bảng tính giá – layout bits on top of style.css / polaris.css.
   Components (cards, tables, buttons, modals, tabs, badges)
   come from the existing AutoFlow theme; only layout lives here.
   Spacing scale: 6 / 10 / 14 / 16 (between cards) / 20.
   ===================================================== */

/* ---------- shell ---------- */
.pr-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; container: prroot / inline-size; }
.pr-root .team-tabs-container,
.pr-root .dashboard-card { margin: 0; }
.pr-root .card-body,
.pr-modal .card-body { min-height: 0; }
.pr-root .badge,
.pr-modal .badge { text-transform: none; letter-spacing: 0; }
.pr-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pr-stack > * { margin: 0 !important; }

/* segmented controls never wrap; they scroll sideways on small screens */
.pr-root .team-tabs,
.pr-modal .team-tabs { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pr-root .team-tabs::-webkit-scrollbar,
.pr-modal .team-tabs::-webkit-scrollbar { display: none; }
.pr-root .team-tab,
.pr-modal .team-tab { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; cursor: pointer; }

/* top bar: main tabs + context controls */
.pr-topbar { --pad-x: 10px; --pad-y: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: var(--pad-y) var(--pad-x) !important; }
.pr-topbar > .team-tabs { min-width: 0; }
.pr-topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.pr-topbar-right:empty { display: none; }
.pr-topbar-right select { width: 300px; max-width: 100%; }
.pr-topbar-label { font-size: 12.5px; font-weight: 550; color: var(--n-500); white-space: nowrap; }
/* once "Bảng giá: ..." no longer fits beside the tabs (sooner with a list picker than with a single name) it gets its own
   line under them: a divider across the card, label on the left, the name / picker on the right */
@container prroot (max-width: 820px) {
    .pr-topbar-right:has(> .pr-topbar-label + select) { justify-content: space-between; width: calc(100% + 2 * var(--pad-x)); max-width: none; margin: 0 calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y)); padding: 10px calc(var(--pad-x) + 6px); border-top: 1px solid var(--n-150); }
    .pr-topbar-right:has(> .pr-topbar-label + select) select { flex: 0 1 auto; width: min(320px, 70%); min-width: 0; }
}
@container prroot (max-width: 560px) {
    .pr-topbar-right:has(> .pr-topbar-label) { justify-content: space-between; width: calc(100% + 2 * var(--pad-x)); max-width: none; margin: 0 calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y)); padding: 10px calc(var(--pad-x) + 6px); border-top: 1px solid var(--n-150); }
}

/* card header with title + controls */
.pr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; min-height: 62px; }
.pr-card-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr-card-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-card-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pr-card-foot .grow { flex: 1; }

/* ---------- generic form grids ---------- */
.pr-form-2, .pr-form-3, .pr-form-4 { display: grid; gap: 0 14px; }
.pr-form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-form-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-form-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr-form-2 > .form-group, .pr-form-3 > .form-group, .pr-form-4 > .form-group { min-width: 0; }
.pr-span-2 { grid-column: span 2; }
.pr-span-all { grid-column: 1 / -1; }
@media (max-width: 1100px) { .pr-form-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pr-form-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .pr-form-2, .pr-form-3, .pr-form-4 { grid-template-columns: minmax(0, 1fr); }
    .pr-span-2 { grid-column: auto; }
}
.pr-root .form-group select, .pr-modal .form-group select,
.pr-root .form-group input:not([type="checkbox"]):not([type="radio"]), .pr-modal .form-group input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
.pr-root .form-group textarea, .pr-modal .form-group textarea { width: 100%; resize: vertical; }
.pr-group-title { margin: 4px 0 12px; font-size: 13px; font-weight: 650; color: var(--n-900); display: flex; align-items: center; gap: 8px; }
.pr-group-title::after { content: ''; flex: 1; height: 1px; background: var(--n-150); }
.pr-group-title + .pr-form-2, .pr-group-title + .pr-form-3 { margin-top: 0; }
* + .pr-group-title { margin-top: 8px; }

/* on/off field: same height and frame as a text field */
.pr-switch-box { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 1px solid var(--n-200); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--n-600); user-select: none; transition: border-color .15s; }
.pr-switch-box:hover { border-color: var(--n-300); }
.pr-switch-box.is-on { color: var(--n-900); }
.pr-switch-box.is-disabled { background: var(--n-50); border-color: var(--n-150); color: var(--n-500); cursor: not-allowed; box-shadow: none; }
.pr-switch-box .toggle-switch { flex-shrink: 0; margin: 0; }
.pr-switch-plain { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--n-800); cursor: pointer; }
.pr-switch-plain .toggle-switch { flex-shrink: 0; margin: 0; }
@media (max-width: 768px) { .pr-switch-box { min-height: 44px; } }

/* input with a unit suffix, e.g. 15 % */
.pr-suffix { position: relative; display: block; }
.pr-suffix > input { width: 100%; padding-right: 32px !important; }
.pr-suffix > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--n-500); pointer-events: none; }

/* theme focus rule resets `background`, which drops the select arrow – put it back */
.pr-root select:focus, .pr-modal select:focus, .pr-portal-body select:focus,
.pr-root select.ui-select-open, .pr-modal select.ui-select-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
.pr-root select.pr-cell:focus, .pr-modal select.pr-cell:focus, .pr-root select.pr-cell.ui-select-open, .pr-modal select.pr-cell.ui-select-open { background-position: right 8px center; background-size: 14px; }

/* ---------- styled option list (reuses AutoFlow .ui-select-menu) ---------- */
.pr-select-menu .ui-select-list { padding-bottom: 2px; }
.pr-select-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--n-400); }
.pr-select-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--n-150); padding-top: 10px; }

/* ---------- calculator ---------- */
.pr-calc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.pr-calc > .dashboard-card { margin: 0; min-width: 0; }
.pr-result { position: sticky; top: 16px; }
/* result next to the form while there is room (tablets in landscape keep the price in view) */
@container prroot (max-width: 1000px) { .pr-calc { grid-template-columns: minmax(0, 1fr) 300px; } }
@container prroot (max-width: 820px) {
    .pr-calc { grid-template-columns: minmax(0, 1fr); }
    .pr-result { position: static; }
}
.pr-form-body { container: prform / inline-size; display: flex; flex-direction: column; gap: 18px; }
.pr-form-body > .pr-alert { margin: 0; }
.pr-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pr-fields .form-group { margin: 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.pr-fields .form-group > label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.pr-fields .pr-wide { grid-column: span 2; }
@container prform (max-width: 620px) { .pr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones keep two columns; only very narrow boxes (under ~250px) fall back to one */
@container prform (max-width: 250px) {
    .pr-fields { grid-template-columns: minmax(0, 1fr); }
    .pr-fields .pr-wide { grid-column: auto; }
}
.pr-lock { font-size: 10px; color: var(--n-400); }

.pr-section { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin: 0 0 10px; }
.pr-section h3 { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--n-900); }
.pr-section h3 small { font-weight: 500; color: var(--n-500); font-size: 12px; }
.pr-links { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 -9px 0 auto; }
.pr-link { border: 0; background: transparent; color: var(--n-600); font-size: 12.5px; font-weight: 550; padding: 6px 9px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.pr-link:hover { background: var(--n-100); color: var(--n-900); }
/* icon glyphs sit on the middle of the line box while small lowercase text looks a little lower: move the icon to the text's visual middle */
.pr-link > i, .pr-back > i { position: relative; top: 1px; }
@media (min-resolution: 2dppx) { .pr-link > i, .pr-back > i { top: .5px; } }

/* tables */
.pr-table-wrap { overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--n-150); -webkit-overflow-scrolling: touch; }
.pr-table-wrap .simple-table { margin: 0; width: 100%; min-width: 100%; border-collapse: collapse; }
.pr-table-wrap .simple-table th, .pr-table-wrap .simple-table td { white-space: nowrap; text-align: left; }
.pr-table-wrap .simple-table thead th:first-child { border-top-left-radius: 12px; }
.pr-table-wrap .simple-table thead th:last-child { border-top-right-radius: 12px; }
.simple-table td.num, .simple-table th.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.simple-table td.center, .simple-table th.center { text-align: center !important; }
.simple-table td.pr-act { width: 1%; text-align: right !important; white-space: nowrap; }
.simple-table tr.pr-click { cursor: pointer; }
.simple-table tr.pr-click td.pr-act i { color: var(--n-400); font-size: 12px; }
.simple-table tr.pr-click:hover td.pr-act i { color: var(--brand-500); }
.simple-table td.pr-wrap { white-space: normal !important; min-width: 280px; max-width: 520px; }
.simple-table tr.pr-subhead td { background: var(--n-50); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--n-500); padding-top: 7px; padding-bottom: 7px; }
.pr-name { display: inline-flex; align-items: center; gap: 0; }
.pr-name-sub { font-size: 12px; color: var(--n-500); margin-top: 2px; }
.pr-card-only { display: none; }

/* layer table (calculator) */
.pr-layers-box { container: prlayers / inline-size; }
.pr-layers th, .pr-layers td { padding: 8px 6px !important; vertical-align: middle; }
.pr-layers th:first-child, .pr-layers td:first-child { padding-left: 14px !important; }
.pr-layers th:last-child, .pr-layers td:last-child { padding-right: 10px !important; }
.pr-layers .pr-group-row th { text-align: center !important; color: var(--n-500); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-top: 7px !important; padding-bottom: 0 !important; border-bottom: 0; }
.pr-layers .pr-group-row th:not(:empty) span { display: block; padding-bottom: 6px; border-bottom: 2px solid var(--n-200); }
.pr-row-label { font-weight: 600; font-size: 13px; color: var(--n-800); white-space: nowrap; }
.pr-row-price { font-weight: 650; text-align: right !important; min-width: 110px; font-variant-numeric: tabular-nums; color: var(--n-900); }
.pr-row-price.is-empty { color: var(--n-400); font-weight: 500; }
.pr-row-price.is-error { color: #c01048; font-weight: 600; cursor: help; }
.pr-row-act { width: 1%; text-align: right; }
.pr-add-row { margin-top: 12px; }
@container prlayers (max-width: 1140px) {
    .pr-layers-box .pr-table-wrap { overflow: visible; box-shadow: none; border-radius: 0; }
    .pr-layers thead { display: none; }
    .pr-layers, .pr-layers tbody { display: block; width: 100%; min-width: 0 !important; }
    .pr-layers tbody tr { position: relative; display: grid; grid-template-columns: repeat(var(--pr-lcols, 4), minmax(0, 1fr)); gap: 12px; padding: 12px 14px 14px; margin-bottom: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--n-200); border: 0; }
    .pr-layers tbody tr:hover { background: #fff; }
    .pr-layers tbody tr:last-child { margin-bottom: 0; }
    .pr-layers td, .pr-layers td:first-child, .pr-layers td:last-child { display: flex; flex-direction: column; gap: 6px; padding: 0 !important; border: 0 !important; min-width: 0; white-space: normal !important; }
    .pr-layers td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 550; color: var(--n-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pr-layers td.pr-row-label { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 28px; font-size: 13.5px; color: var(--n-900); padding-right: 40px !important; }
    .pr-layers td.pr-row-price { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 10px !important; border-top: 1px dashed var(--n-200) !important; font-size: 14px; }
    .pr-layers td.pr-row-act { position: absolute; top: 10px; right: 10px; width: auto; }
    .pr-layers td.pr-row-act:empty { display: none; }
    .pr-layers .pr-cell { min-width: 0; }
    .pr-layers input.pr-cell { text-align: left; }
}
@container prlayers (max-width: 640px) {
    .pr-layers tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* compact cell controls (layer rows, data grids, test values) */
.pr-cell { height: 34px; width: 100%; min-width: 80px; padding: 0 10px; border: 1px solid var(--n-200); border-radius: 8px; background-color: #fff; font: inherit; font-size: 13px; color: var(--n-900); outline: none; transition: border-color .15s, box-shadow .15s; }
.pr-cell:hover { border-color: var(--n-300); }
.pr-cell:focus { border-color: var(--brand-400); box-shadow: var(--focus-ring); }
.pr-cell:disabled { background-color: var(--n-50); border-color: var(--n-150); color: var(--n-500); cursor: not-allowed; }
.pr-cell::placeholder { color: var(--n-400); }
input.pr-cell { text-align: right; font-variant-numeric: tabular-nums; }
.pr-cell.pr-left, input.pr-cell.pr-left { text-align: left; }
input.pr-cell[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input.pr-cell::-webkit-outer-spin-button, input.pr-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
select.pr-cell { -webkit-appearance: none; appearance: none; min-width: 120px; padding-right: 28px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }
select.pr-cell.ui-select-open { border-color: var(--brand-400); box-shadow: var(--focus-ring); }
@media (max-width: 768px) { .pr-cell { height: 42px; font-size: 14px; } }

/* ---------- results ---------- */
.pr-result .card-body { display: flex; flex-direction: column; gap: 12px; }
.pr-result .card-body > * { margin: 0; }
.pr-status { font-size: 12px; color: var(--n-500); display: inline-flex; align-items: center; gap: 6px; }
.pr-spin { width: 12px; height: 12px; border: 2px solid var(--n-200); border-top-color: var(--brand-500); border-radius: 50%; animation: pr-spin .7s linear infinite; display: inline-block; }
@keyframes pr-spin { to { transform: rotate(360deg); } }
.pr-empty { color: var(--n-500); text-align: center; padding: 32px 12px; font-size: 13px; }
.pr-empty i { display: block; font-size: 22px; color: var(--n-300); margin-bottom: 10px; }
.pr-price-main { padding: 14px 16px; border-radius: 12px; background: #ecfdf3; box-shadow: inset 0 0 0 1px #abefc6; }
.pr-price-main .lbl { font-size: 12.5px; color: #067647; font-weight: 600; }
.pr-price-main .val { font-size: 28px; font-weight: 750; letter-spacing: -0.02em; color: #067647; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 4px; word-break: break-word; }
.pr-price-sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pr-price-sub > div { padding: 10px 12px; border-radius: 10px; background: var(--n-50); box-shadow: inset 0 0 0 1px var(--n-150); min-width: 0; }
.pr-price-sub .lbl { font-size: 11.5px; color: var(--n-500); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-price-sub .val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pr-price-sub .agent .val { color: #6d28d9; }
.pr-price-main.is-error { background: var(--n-50); box-shadow: inset 0 0 0 1px var(--n-200); }
.pr-price-main.is-error .lbl { color: var(--n-600); }
.pr-price-main.is-error .val { font-size: 17px; font-weight: 650; color: var(--n-700); letter-spacing: 0; }
.pr-price-main .note { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--n-600); }
.pr-price-sub .is-error .val { font-size: 13px; font-weight: 600; color: var(--n-500); }
.pr-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 0; font-size: 13px; }
.pr-kv dt { color: var(--n-600); min-width: 0; }
.pr-kv dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--n-900); }
.pr-details { border-top: 1px solid var(--n-150); padding-top: 12px; }
.pr-details summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--n-600); list-style: none; display: flex; align-items: center; gap: 8px; }
.pr-details summary::-webkit-details-marker { display: none; }
.pr-details summary i { font-size: 10px; transition: transform .15s; }
.pr-details[open] summary i { transform: rotate(90deg); }
.pr-details .pr-kv { margin-top: 10px; font-size: 12.5px; }
.pr-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.pr-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
.pr-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
.pr-alert.warn { background: #fffaeb; color: #93370d; box-shadow: inset 0 0 0 1px #fedf89; }
.pr-alert.err { background: #fff1f3; color: #a11043; box-shadow: inset 0 0 0 1px #fecdd6; }
.pr-alert.info { background: #eff8ff; color: #175cd3; box-shadow: inset 0 0 0 1px #d1e9ff; }
.pr-alert > i { margin-top: 3px; flex-shrink: 0; }

/* quotes */
.pr-search { position: relative; width: 320px; max-width: 100%; }
.pr-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--n-400); font-size: 13px; pointer-events: none; }
.pr-search input { width: 100%; padding-left: 34px !important; }
.pr-quote-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 16px; }
.pr-quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pr-quote-grid h4 { margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--n-900); }
.pr-quote-box { padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--n-150); background: var(--n-25); min-width: 0; }
.pr-quote-layers { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--n-800); }
.pr-quote-layer { padding-top: 10px; border-top: 1px solid var(--n-150); }
.pr-quote-layer-title { font-weight: 650; color: var(--n-900); margin-bottom: 4px; }
.pr-quote-layer-vals { display: flex; flex-wrap: wrap; gap: 2px 14px; line-height: 1.6; }
@media (max-width: 760px) { .pr-quote-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- admin ---------- */
.pr-head-main { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 20px 16px; }
.pr-head-main > .pr-back { align-self: flex-start; }
.pr-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.pr-head-row h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--n-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-head-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.pr-meta-time { white-space: nowrap; margin-left: 4px; }
@media (max-width: 560px) { .pr-meta-time { flex-basis: 100%; margin-left: 0; white-space: normal; } }
.pr-head-tabs { padding: 10px 12px; border-top: 1px solid var(--n-150); }
.pr-meta { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--n-500); }
.pr-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--n-500); cursor: pointer; border: 0; background: none; padding: 0; }
.pr-back:hover { color: var(--brand-600); }
.pr-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pr-grid-2 > .dashboard-card { margin: 0; }
@media (max-width: 1000px) { .pr-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chips:empty { display: none; }
.pr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--n-100); box-shadow: inset 0 0 0 1px var(--n-200); font-size: 12.5px; font-weight: 500; color: var(--n-800); line-height: 18px; }
.pr-chip.removable { padding-right: 4px; }
.pr-chip button { border: 0; background: transparent; color: var(--n-500); cursor: pointer; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; padding: 0; }
.pr-chip button:hover { background: var(--n-200); color: var(--n-900); }
.pr-picker { display: flex; flex-direction: column; gap: 8px; }
.pr-picker select { width: 100% !important; }
.pr-picker-empty { font-size: 12.5px; color: var(--n-500); }
.pr-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }
.pr-checks label { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; font-weight: 500; color: var(--n-800); margin: 0; }
.pr-checks input { width: 16px; height: 16px; accent-color: var(--brand-500); flex-shrink: 0; margin: 0; }
.pr-optchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-optchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--n-200); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 550; color: var(--n-600); cursor: pointer; line-height: 18px; transition: background .15s, border-color .15s, color .15s; }
.pr-optchip:hover:not(:disabled) { border-color: var(--n-300); color: var(--n-900); }
.pr-optchip i { font-size: 10px; display: none; }
.pr-optchip.is-on { background: var(--brand-50); border-color: var(--brand-300, #ffb48a); color: var(--brand-700); }
.pr-optchip.is-on i { display: inline; }
.pr-optchip:disabled { cursor: default; }
.pr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; flex: none; }
.pr-dot.own { background: var(--brand-500); }
.pr-dot.inherited { background: var(--n-300); }
.pr-dot.new { background: #17b26a; }
.pr-legend { display: flex; gap: 6px 14px; font-size: 12px; color: var(--n-500); flex-wrap: wrap; align-items: center; }
.pr-legend > span { display: inline-flex; align-items: center; }
.pr-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.pr-muted { color: var(--n-500); }
.pr-small { font-size: 12px; }
.pr-expr { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--n-500); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 12.5px !important; line-height: 1.55 !important; min-height: 220px; white-space: pre; tab-size: 2; }
.pr-toolbar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.pr-toolbar .grow { flex: 1; }
.pr-hint-top { margin: 0 0 14px !important; }

/* conditions */
.pr-cond-product { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-cond-product select { width: 300px !important; max-width: 100%; }
.pr-cond td { vertical-align: middle; }
.pr-cond td.pr-cond-name { width: 30%; min-width: 150px; }
.pr-cond td.pr-cond-val { width: 280px; min-width: 190px; }
.pr-cond td.pr-cond-val select, .pr-cond td.pr-cond-val input { width: 100%; }
.pr-cond td.pr-cond-limit { white-space: normal !important; min-width: 180px; }
.pr-adj { display: flex; flex-direction: column; gap: 8px; }
.pr-adj-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 38px; gap: 8px; align-items: center; max-width: 520px; }
.pr-adj-row > * { min-width: 0; }
.pr-adj-row > select { width: 100%; }
.pr-adj-row .btn-icon-only { width: 38px; height: 38px; }
.pr-adj .btn { align-self: flex-start; }
.pr-lock-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 38px; gap: 8px; align-items: center; }
.pr-lock-row .btn-icon-only { width: 38px; height: 38px; }
@media (max-width: 640px) {
    .pr-lock-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; padding-bottom: 10px; border-bottom: 1px dashed var(--n-200); }
    .pr-lock-row > :nth-child(3) { grid-column: 1 / 3; }
    .pr-lock-row .btn-icon-only { width: 44px; height: 44px; grid-row: 1; grid-column: 3; }
}

/* params / data tables */
.pr-tables { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pr-tables { grid-template-columns: minmax(0, 1fr); } }
.pr-table-list { padding: 8px !important; max-height: 72vh; overflow: auto; }
.pr-table-list .grp { font-size: 11px; font-weight: 700; color: var(--n-400); text-transform: uppercase; letter-spacing: .05em; padding: 12px 8px 4px; }
.pr-table-list .grp:first-child { padding-top: 4px; }
.pr-table-list button { display: flex; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 8px; border-radius: 8px; cursor: pointer; }
.pr-table-list button:hover { background: var(--n-50); }
.pr-table-list button.active { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200); }
.pr-table-list .t { font-size: 13px; font-weight: 600; color: var(--n-800); }
.pr-table-list .s { font-size: 11.5px; color: var(--n-500); }
.pr-table-list-foot { padding: 10px 8px 4px; }
.pr-table-pick { display: none; }
.pr-table-pick .card-body { padding: 12px 16px; flex-wrap: nowrap; }
.pr-table-pick .card-body > .btn { flex: 0 0 auto; }
.pr-table-pick .pr-prod-bar { flex: 1 1 260px; flex-wrap: nowrap; min-width: 0; }
.pr-table-pick .pr-prod-bar select { flex: 1 1 auto; width: auto !important; min-width: 0; }
@media (max-width: 1000px) {
    .pr-tables > .dashboard-card:first-child { display: none; }
    .pr-table-pick { display: block; margin: 0; }
}
.pr-grid-scroll { max-height: 540px; overflow: auto; }
.pr-grid-scroll thead th { position: sticky; top: 0; z-index: 1; }
.pr-data-grid th, .pr-data-grid td { padding: 6px 8px !important; }
.pr-data-grid td.pr-formula-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--n-500); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.pr-param-grid td { padding-top: 8px !important; padding-bottom: 8px !important; }
.pr-name-cell { display: flex; align-items: center; min-width: 180px; }
.pr-icon-danger:hover { color: #d92d20 !important; background: #fef3f2 !important; }
.pr-hint-under { margin: -2px 0 8px !important; }
.pr-hint-bottom { margin: 14px 0 0 !important; }

/* products */
.pr-prod-bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.pr-prod-bar select { width: 320px !important; max-width: 100%; }
.pr-prod-bar .grow { flex: 1; }
.pr-prod-tabs { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pr-note { font-size: 12px; color: var(--n-500); line-height: 1.45; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-note-dark { color: var(--n-700); -webkit-line-clamp: 3; }
.pr-clamp { white-space: normal !important; max-width: 320px; min-width: 180px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; color: var(--n-600); }
.pr-subsection { margin-top: 20px; }

/* row structure editor */
.pr-rg-order { display: inline-flex; gap: 2px; }
.pr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; min-height: 38px; border: 1px dashed var(--n-200); border-radius: 10px; background: var(--n-25); }
.pr-tags-label { font-size: 12px; font-weight: 600; color: var(--n-500); margin-right: 4px; }
.pr-tags input { border: 0; outline: none; background: transparent; font: inherit; font-size: 12.5px; min-width: 160px; flex: 1; padding: 4px 2px; }

/* modals */
.pr-modal { z-index: 1090; }
.pr-modal .modal-container { max-width: 620px; }
.pr-modal .modal-container.modal-large { max-width: 940px; }
.pr-modal .modal-container.pr-xl { max-width: 1240px; }
.pr-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.pr-modal .modal-header h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-modal .modal-body { background: #fff; }
.pr-modal .modal-footer { display: flex; }
.pr-modal .modal-actions { display: flex; width: 100%; justify-content: flex-end; align-items: center; }
.pr-modal .modal-actions .pr-push { display: flex; align-items: center; gap: 8px; margin-right: auto; }
@media (min-width: 769px) {
    .pr-modal .modal-body { padding: 22px 24px; }
    .pr-modal .modal-footer { padding: 14px 24px; }
    .pr-modal .modal-header { padding: 16px 24px; }
}
@media (max-width: 768px) {
    .pr-modal .modal-actions { justify-content: stretch; flex-wrap: nowrap; }
    .pr-modal .modal-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
    .pr-modal .modal-actions .pr-push { display: flex; gap: 8px; flex: 0 0 auto; margin-right: 0; }
    .pr-modal .modal-actions .pr-push .btn { flex: 0 0 auto; }
    .pr-modal .modal-header h2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
}
@media (max-width: 560px) {
    .pr-modal .modal-actions .pr-push .btn { width: 44px; padding: 0; }
    .pr-modal .modal-actions .pr-push .pr-btn-text { display: none; }
}

/* ---------- formula editor ---------- */
.pr-fx { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pr-fx.pr-fx-compact { display: block; }
@media (max-width: 980px) { .pr-fx { grid-template-columns: minmax(0, 1fr); } }
.pr-fx-input { position: relative; }
/* formula boxes grow with their text: big ones 9 to 24 lines, short ones (conditions, add-ons) 3 to 12 lines */
.pr-fx .pr-code { field-sizing: content; min-height: calc(9lh + 22px); max-height: calc(24lh + 22px); width: 100%; resize: vertical; white-space: pre-wrap; word-break: break-word; }
.pr-fx .pr-code.pr-code-sm { min-height: calc(3lh + 22px); max-height: calc(12lh + 22px); }
.pr-fx-section:has(> .pr-fx-explain:empty) { display: none; }
.pr-fx-compact .pr-fx-section { margin-top: 10px; }
.pr-fx .pr-invalid { border-color: #f04438 !important; box-shadow: 0 0 0 3px rgba(240, 68, 56, .12) !important; }
.pr-fx-status { min-height: 20px; margin-top: 6px; font-size: 12.5px; }
.pr-good { color: #067647; font-weight: 600; }
.pr-bad { color: #c01048; font-weight: 600; }
.pr-fx-snippet { margin-top: 6px; padding: 6px 10px; background: #fff1f3; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap; color: var(--n-800); }
.pr-fx-snippet mark { background: #f04438; color: #fff; border-radius: 2px; padding: 0 1px; }
.pr-fx-section { margin-top: 16px; }
.pr-fx-section h5 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--n-500); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.pr-fx-explain { font-size: 13px; line-height: 1.6; color: var(--n-800); background: var(--n-25); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--n-150); padding: 10px 12px; max-height: 360px; overflow: auto; }
.pr-fx-explain:empty { display: none; }
.pr-fx-line { padding: 1px 0; }
.pr-fx-block > .pr-fx-title { font-weight: 600; color: var(--n-900); }
.pr-fx-items { margin: 2px 0 4px 6px; padding-left: 12px; border-left: 2px solid var(--n-150); }
.pr-ref { display: inline; padding: 1px 6px; border-radius: 6px; font-weight: 600; font-size: 12.5px; white-space: normal; }
.pr-ref em { font-style: normal; font-weight: 500; opacity: .75; }
.pr-k-input { background: #eff8ff; color: #175cd3; }
.pr-k-row { background: #f4f3ff; color: #5925dc; }
.pr-k-formula { background: var(--brand-50); color: var(--brand-700); }
.pr-k-param { background: #ecfdf3; color: #067647; }
.pr-k-table { background: #ccfbf1; color: #0f766e; }
.pr-k-fn { background: #fdf2fa; color: #c11574; }
.pr-k-local { background: transparent; color: var(--n-700); font-style: italic; box-shadow: inset 0 0 0 1px var(--n-200); }
.pr-k-unknown { background: #fff1f3; color: #c01048; }
.pr-fx-test { font-size: 13px; }
.pr-fx-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
.pr-fx-var { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--n-600); min-width: 0; }
.pr-fx-var > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-fx-var .pr-cell { text-align: left; }
.pr-fx-outcome { padding: 10px 12px; border-radius: 10px; background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200); display: flex; flex-direction: column; gap: 2px; }
.pr-fx-result { font-size: 15px; }

/* autocomplete dropdown */
.pr-ac { position: absolute; z-index: 30; width: min(520px, 100%); max-height: 300px; overflow: auto; background: #fff; border-radius: 12px; box-shadow: var(--elev-3, 0 0 0 1px rgba(24, 24, 27, .08), 0 12px 32px -8px rgba(24, 24, 27, .28)); padding: 6px; }
.pr-ac-item { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pr-ac-item.active, .pr-ac-item:hover { background: var(--brand-50); }
.pr-ac-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; color: var(--n-900); }
.pr-ac-kind { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.pr-ac-label { font-size: 12.5px; color: var(--n-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-ac-detail { grid-column: 1 / -1; font-size: 11.5px; color: var(--n-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* insert side panel */
.pr-fx-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; background: var(--n-25); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--n-150); padding: 10px; max-height: 620px; }
.pr-fx-side > * { flex-shrink: 0; }
.pr-fx-side-head { font-size: 12.5px; font-weight: 700; color: var(--n-700); display: flex; align-items: center; gap: 6px; }
.pr-fx-search { position: relative; }
.pr-fx-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--n-400); font-size: 13px; pointer-events: none; }
.pr-fx-search .pr-fx-search-input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--n-200); border-radius: 10px; background: #fff; font-size: 13px; color: var(--n-900); outline: none; }
.pr-fx-search .pr-fx-search-input:focus { border-color: var(--brand-400); box-shadow: var(--focus-ring); }
.pr-fx-list { overflow: auto; flex: 1 1 auto; flex-shrink: 1; min-height: 120px; }
.pr-fx-group summary { cursor: pointer; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--n-500); padding: 6px 4px; list-style: none; }
.pr-fx-group summary::-webkit-details-marker { display: none; }
.pr-fx-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 7px; cursor: pointer; }
.pr-fx-item:hover, .pr-fx-item:focus { background: var(--brand-50); outline: none; }
.pr-fx-item .pr-mono { font-size: 12px; font-weight: 600; color: var(--n-900); }
.pr-fx-item-label { font-size: 11.5px; color: var(--n-500); line-height: 1.35; }
.pr-fx-sub { padding-left: 20px; }
.pr-fx-doc { font-size: 12px; line-height: 1.5; color: var(--n-700); background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--n-150); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 980px) { .pr-fx-side { position: static; max-height: 420px; } }

/* ---------- portal shell (external accounts) ---------- */
body.pr-portal-body { display: block !important; min-height: 100vh; background: var(--surface-page, #f4f4f5); }
.pr-portal-header { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: #fff; box-shadow: 0 1px 0 var(--n-150); position: sticky; top: 0; z-index: 50; }
.pr-portal-header .logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex-shrink: 0; background: linear-gradient(180deg, #ff7a3d 0%, #ff5a1f 55%, #f44d10 100%); }
.pr-portal-header .title { font-weight: 700; font-size: 15px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-portal-header .title small { display: block; font-weight: 500; color: var(--n-500); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.pr-portal-header .grow { flex: 1; }
.pr-portal-main { max-width: 1440px; margin: 0 auto; padding: 20px 24px 40px; }
.pr-toast-box { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.pr-toast { background: var(--n-900); color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 13px; max-width: 420px; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35); }
.pr-toast.error { background: #a11043; }
.pr-toast.success { background: #067647; }
@media (max-width: 640px) {
    .pr-portal-header { padding: 10px 12px; gap: 8px; }
    .pr-portal-main { padding: 12px 12px 32px; }
    .pr-portal-header .who { display: none; }
    .pr-portal-header .btn .pr-btn-text { display: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 768px) {
    .pr-root { gap: 12px; }
    .pr-stack { gap: 12px; }
    .pr-topbar { --pad-x: 8px; }
    .pr-card-head { min-height: 0; }
    .pr-card-head > .team-tabs { width: 100%; }
    .pr-head-main { padding: 12px 16px 14px; gap: 5px; }
    .pr-head-actions { gap: 6px; }
    .pr-head-actions .btn { width: clamp(28px, 8.2vw, 34px); height: clamp(28px, 8.2vw, 34px); min-height: 0; padding: 0; justify-content: center; border-radius: 50%; font-size: clamp(11px, 3.1vw, 13px); }
    .pr-head-actions .pr-btn-text { display: none; }
    .pr-search { width: 100%; }
    .pr-card-head > .pr-prod-bar, .pr-cond-product { width: 100%; flex-wrap: nowrap; }
    .pr-prod-bar select, .pr-cond-product select { flex: 1 1 auto; width: auto !important; min-width: 0; }
    .pr-price-main .val { font-size: 26px; }
    .pr-adj-row { grid-template-columns: minmax(0, 1fr) 110px 44px; }
    .pr-adj-row .btn-icon-only { width: 44px; height: 44px; }
}
.pr-prod-switch { min-width: 0; max-width: 100%; }
.pr-prod-switch .pr-prod-select { display: none; }
@media (max-width: 560px) {
    .pr-prod-switch { width: 100%; }
    .pr-prod-switch .team-tabs { display: none; }
    .pr-prod-switch .pr-prod-select { display: block; width: 100%; }
}
@media (max-width: 560px) {
    .pr-topbar > .team-tabs, .pr-topbar-right { width: 100%; }
    .pr-topbar-right > .team-tabs { width: 100%; }
}
@media (max-width: 420px) {
    .pr-price-sub { grid-template-columns: minmax(0, 1fr); }
    .pr-topbar .team-tab { padding: 7px 11px; }
}

@media print {
    body * { visibility: hidden; }
    .pr-result, .pr-result * { visibility: visible; }
    .pr-result { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; }
    .pr-result .pr-actions { display: none; }
}

/* input rules (Ràng buộc): cells named by a failed rule */
.pr-cell.pr-cell-invalid { border-color: #f04438; background-color: #fff5f6; box-shadow: 0 0 0 3px rgba(240, 68, 56, .12); }
.pr-cell.pr-cell-warn { border-color: #f79009; background-color: #fffcf5; }

/* layer type: "Bộ đèn N" / "Mảnh · bộ đèn N" under the layer number */
.pr-row-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--brand-700); white-space: nowrap; }
.pr-row-sub.is-piece { color: var(--n-500); font-weight: 500; }
.pr-layers tr.pr-piece-row td { background: var(--n-25); }
@container prlayers (max-width: 1140px) {
    .pr-layers td.pr-row-label .pr-row-sub { display: inline; margin: 0 0 0 8px; }
    .pr-layers tbody tr.pr-piece-row { background: var(--n-25); }
}

/* stacked layer cards: the layer type takes its own full line above the fields */
@container prlayers (max-width: 1140px) {
    .pr-layers td.pr-type-cell { grid-column: 1 / -1; }
    .pr-layers tbody tr > td, .pr-layers tbody tr:hover > td { background: transparent !important; }
}

/* formula list: search bar, usage, related names */
.pr-formula-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-subhead-count { font-weight: 600; color: var(--n-400); letter-spacing: 0; text-transform: none; }
.pr-used { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; white-space: normal; min-width: 200px; max-width: 320px; }
.pr-warn-text { color: #b54708; }
.pr-rel { display: flex; flex-direction: column; gap: 8px; }
.pr-rel-row { display: flex; gap: 8px; align-items: baseline; }
.pr-rel-kind { flex: 0 0 120px; font-size: 12px; font-weight: 600; color: var(--n-500); }
.pr-chip-link { cursor: pointer; border: 0; font: inherit; font-size: 12.5px; }
.pr-chip-link:hover { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200); color: var(--brand-700); }
.pr-inline-field { display: flex; gap: 8px; }
.pr-inline-field > input { flex: 1; min-width: 0; }
.pr-inline-field > .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) { .pr-rel-row { flex-direction: column; gap: 4px; } .pr-rel-kind { flex: none; } }

/* text field with suggestions (e.g. formula group): same arrow and option list as the select boxes */
.pr-combo { position: relative; }
.pr-combo > input { width: 100%; padding-right: 36px !important; }
.pr-combo-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") no-repeat center / 15px; }
.pr-combo.is-open > input { border-color: var(--brand-400); box-shadow: var(--focus-ring); }

/* formula editor: coloured text behind a transparent textarea (same metrics, copied at runtime) */
.pr-hl-wrap { position: relative; border-radius: 10px; }
.pr-hl-wrap.is-on { background: #fff; }
.pr-hl { position: absolute; inset: 0; margin: 0; box-sizing: border-box; border-style: solid; border-color: transparent; overflow: hidden; pointer-events: none; color: var(--n-800); background: transparent; scrollbar-gutter: stable; }
.pr-hl-wrap.is-on > textarea.pr-code { display: block; position: relative; z-index: 1; background: transparent !important; color: transparent; caret-color: var(--n-900); scrollbar-gutter: stable; }
.pr-hl-wrap.is-on > textarea.pr-code::placeholder { color: var(--n-400); }
.pr-hl-wrap.is-on > textarea.pr-code::selection { background: rgba(255, 122, 61, .28); color: transparent; }
.pr-hl-wrap.is-on > textarea.pr-code:disabled { background: transparent !important; }
.pr-hl-wrap.is-on:has(> textarea:disabled) { background: var(--n-50); }
.pr-hl:not(:has(span)) { display: none; }
.pr-hl span { border-radius: 3px; }
.hl-input { color: #175cd3; background: #eff8ff; }
.hl-row { color: #5925dc; background: #f4f3ff; }
.hl-formula { color: var(--brand-700); background: var(--brand-50); }
.hl-param { color: #067647; background: #ecfdf3; }
.hl-table { color: #0f766e; background: #ccfbf1; }
.hl-col { color: #0f766e; }
.hl-fn { color: #c11574; }
.hl-local { color: var(--n-700); font-style: italic; }
.hl-unknown { color: #c01048; text-decoration: underline wavy #f04438; text-underline-offset: 3px; }
.hl-str { color: #b54708; }
.hl-num { color: #344054; }
.hl-bool { color: #344054; }
.hl-op { color: var(--n-500); }
.pr-fx-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pr-fx-tools > .pr-link { margin-left: auto; }
.pr-fx-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 11.5px; }
.pr-fx-legend > span { padding: 1px 7px; border-radius: 999px; font-weight: 600; font-style: normal; text-decoration: none; }
.pr-fx-legend > .hl-local { box-shadow: inset 0 0 0 1px var(--n-200); font-style: italic; font-weight: 500; }
.pr-fx-legend > .hl-fn { background: #fdf2fa; }

/* quick test variables: name on one line, code below, never overlapping */
.pr-fx .pr-fx-var { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; font-weight: 500; }
.pr-fx-var-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--n-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-fx-var-code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--n-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
/* paste box */
.pr-modal textarea.pr-paste { display: block; width: 100%; min-height: 220px; resize: vertical; }

/* ---------- responsive tidy-up ---------- */
/* segmented tabs that scroll: fade the side with more tabs */
.pr-root .team-tabs.pr-fade-r, .pr-modal .team-tabs.pr-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.pr-root .team-tabs.pr-fade-l, .pr-modal .team-tabs.pr-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.pr-root .team-tabs.pr-fade-l.pr-fade-r, .pr-modal .team-tabs.pr-fade-l.pr-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* text boxes grow with their text (browsers without field-sizing keep the rows attribute) */
.pr-root textarea.form-control:not(.pr-code), .pr-modal textarea.form-control:not(.pr-code) { field-sizing: content; min-height: 64px; max-height: 280px; }

/* button rows under a card: two per line on phones, the main action on its own line */
@media (max-width: 560px) {
    .pr-card-foot { justify-content: stretch; }
    .pr-card-foot > .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
    .pr-card-foot > .btn-primary { flex-basis: 100%; }
    .pr-card-foot > .grow { display: none; }
    .pr-card-head-actions { width: 100%; }
    .pr-card-head-actions > .btn { flex: 1 1 auto; justify-content: center; }
}

/* list tables become stacked cards when their box is narrow: first cell is the title,
   the other cells show their column name above the value, row actions sit in the top right corner */
.pr-rt { container: prrt / inline-size; }
@container prrt (max-width: 640px) {
    .pr-rt > table, .pr-rt > table > tbody { display: block; width: 100%; min-width: 0 !important; }
    .pr-rt > table > thead { display: none; }
    .pr-rt > table > tbody > tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px 14px; padding: 14px 16px; border-bottom: 1px solid var(--n-150); }
    .pr-rt > table > tbody > tr:last-child { border-bottom: 0; }
    .pr-rt > table > tbody > tr > td { display: block; min-width: 0 !important; max-width: none !important; width: auto !important; padding: 0 !important; border: 0 !important; white-space: normal !important; text-align: left !important; background: none !important; }
    .pr-rt > table > tbody > tr > td:empty { display: none; }
    .pr-rt > table > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--n-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pr-rt > table > tbody > tr > td:first-child { grid-column: 1 / -1; font-size: 13.5px; }
    .pr-rt > table > tbody > tr > td:first-child:not(:has(input, select))::before { display: none; }
    .pr-rt > table > tbody > tr > td[colspan], .pr-rt > table > tbody > tr > td.pr-wrap, .pr-rt > table > tbody > tr > td.pr-td-wide,
    .pr-rt > table > tbody > tr > td.pr-cond-val, .pr-rt > table > tbody > tr > td.pr-cond-limit,
    .pr-rt > table > tbody > tr > td:has(> .pr-clamp, > .pr-note, > .pr-chips, > .pr-optchips, > .pr-expr, textarea, .pr-tags) { grid-column: 1 / -1; }
    .pr-rt > table > tbody > tr > td.pr-act { position: absolute; top: 10px; right: 10px; width: auto !important; display: flex; gap: 2px; align-items: center; }
    .pr-rt > table > tbody > tr > td.pr-act::before, .pr-rt > table > tbody > tr > td.pr-td-plain::before { display: none; }
    .pr-rt > table > tbody > tr.pr-click > td.pr-act { top: 16px; }
    .pr-rt > table > tbody > tr:has(> td.pr-act > *) > td:first-child { padding-right: 36px !important; }
    .pr-rt > table > tbody > tr:has(> td.pr-act > :nth-child(2)) > td:first-child { padding-right: 84px !important; }
    .pr-rt > table > tbody > tr:has(> td.pr-act > :nth-child(3)) > td:first-child { padding-right: 124px !important; }
    .pr-rt > table > tbody > tr:has(> td.pr-act > .btn) > td:first-child { padding-right: 120px !important; }
    .pr-rt > table > tbody > tr > td .pr-cell, .pr-rt > table > tbody > tr > td .pr-name-cell { width: 100% !important; min-width: 0 !important; }
    .pr-rt > table > tbody > tr > td input.pr-cell:not(.pr-mono) { text-align: left; }
    .pr-rt > table > tbody > tr > td .pr-clamp, .pr-rt > table > tbody > tr > td .pr-used, .pr-rt > table > tbody > tr > td .pr-expr { max-width: none !important; min-width: 0; }
    .pr-rt > table > tbody > tr > td.num, .pr-rt > table > tbody > tr > td.center { text-align: left !important; }
    .pr-rt > table > tbody > tr > td.pr-card-hide { display: none; }
    .pr-rt .pr-card-only { display: inline; }
    .pr-rt .pr-tree { padding-left: 0 !important; }
    .pr-rt > table > tbody > tr > td .badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
    .pr-rt > table > tbody > tr.pr-subhead { display: block; padding: 8px 16px; background: var(--n-50); }
    .pr-rt > table > tbody > tr.pr-subhead > td { font-size: 11.5px; }
}

/* formula editor: "Chèn" button above the box opens the insert list as a pop-up */
.pr-fx-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.pr-fx-tools > .pr-fx-actions > .pr-link { margin: 0; }
.pr-fx:not(.pr-fx-compact) .pr-fx-insert-btn { display: none; }
@media (max-width: 980px) {
    .pr-fx > .pr-fx-side { display: none; }
    .pr-fx:not(.pr-fx-compact) .pr-fx-insert-btn { display: inline-flex; }
}
.pr-fx-pop-backdrop { position: fixed; inset: 0; z-index: 1190; }
.pr-fx-pop-backdrop.is-sheet { background: rgba(24, 24, 27, .38); }
.pr-fx-pop { position: fixed; z-index: 1200; display: flex; flex-direction: column; min-height: 0; }
.pr-fx-pop > .pr-fx-side { position: static; flex: 1 1 auto; min-height: 0; max-height: none; background: #fff; box-shadow: 0 0 0 1px rgba(24, 24, 27, .08), 0 16px 40px -10px rgba(24, 24, 27, .35); }
.pr-fx-pop .pr-fx-side-head { justify-content: flex-start; }
.pr-fx-pop-close { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--n-100); color: var(--n-600); cursor: pointer; display: inline-grid; place-items: center; }
.pr-fx-pop-close:hover { background: var(--n-200); color: var(--n-900); }
.pr-fx-pop.is-sheet { left: 0; right: 0; bottom: 0; max-height: 75vh; height: 75vh; }
.pr-fx-pop.is-sheet > .pr-fx-side { border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); gap: 10px; }
.pr-fx-pop.is-sheet .pr-fx-doc { display: none; }
.pr-fx-pop.is-sheet .pr-fx-item { padding: 8px 10px; }
.pr-fx-pop.is-sheet .pr-fx-search .pr-fx-search-input { height: 42px; font-size: 14px; }

/* insert pop-up animation: the sheet slides up from the bottom, the small panel fades in under its button */
.pr-fx-pop-backdrop.is-sheet { opacity: 0; transition: opacity .24s cubic-bezier(.2, .8, .2, 1); }
.pr-fx-pop-backdrop.is-sheet.is-open { opacity: 1; }
.pr-fx-pop.is-sheet { transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.pr-fx-pop.is-sheet.is-open { transform: none; }
.pr-fx-pop:not(.is-sheet) { opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .16s ease-out, transform .18s cubic-bezier(.2, .8, .2, 1); }
.pr-fx-pop.is-up:not(.is-sheet) { transform: translateY(6px) scale(.98); transform-origin: bottom right; }
.pr-fx-pop:not(.is-sheet).is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .pr-fx-pop, .pr-fx-pop-backdrop { transition: none !important; }
}

/* length converter: always two columns (value | result) */
.pr-conv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.pr-conv > .form-group { min-width: 0; }
.pr-conv .pr-suffix > input { width: 100%; padding-right: 44px !important; }
.pr-modal .pr-conv .pr-conv-out { background: var(--n-50) !important; color: var(--n-900); font-weight: 600; }

/* phones: the theme uses 16px text in every field (iOS zooms into smaller text); the pricing page keeps 14px like
   its other text and pricing.js stops that iOS zoom instead (pinch zoom still works) */
@media (max-width: 768px) {
    .pr-root .form-group select, .pr-root .form-group input:not([type="checkbox"]):not([type="radio"]), .pr-root .form-group textarea:not(.pr-code), .pr-root .form-control,
    .pr-modal .modal-body select:not(.pr-cell), .pr-modal .modal-body input:not([type="checkbox"]):not([type="radio"]):not(.pr-cell), .pr-modal .modal-body textarea:not(.pr-code), .pr-modal .form-control:not(.pr-code) {
        font-size: 14px; min-height: 42px;
    }
    .pr-modal .modal-body input.pr-cell, .pr-modal .modal-body select.pr-cell { font-size: 14px; }
    .pr-switch-box { min-height: 42px; font-size: 14px; }
}

/* compact sections (Thiết lập tab): a small title line, content right under it, small sections side by side */
.pr-secs { container: prsecs / inline-size; display: flex; flex-direction: column; gap: 18px; }
.pr-secs > .form-group, .pr-sec > .form-group { margin: 0; }
.pr-secs .pr-form-2, .pr-secs .pr-form-4 { row-gap: 14px; }
.pr-secs .pr-form-2 > .form-group, .pr-secs .pr-form-4 > .form-group { margin: 0; }
.pr-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pr-sec > select.form-control, .pr-sec > input.form-control, .pr-sec > textarea.form-control { width: 100%; }
.pr-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; min-height: 30px; }
.pr-sec-title { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; min-width: 0; }
.pr-sec-title h4 { margin: 0; font-size: 13px; font-weight: 650; color: var(--n-900); }
.pr-sec-title span { font-size: 12px; color: var(--n-500); }
.pr-sec-title span::before { content: '· '; }
.pr-sec-head > .pr-link { margin-right: -9px; }
.pr-sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.pr-sec .pr-adj-row { max-width: none; }
@container prsecs (max-width: 720px) { .pr-sec-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pr-sec-head > .pr-prod-switch { width: 100%; } }


/* layer structure editor: one framed block per column */
.pr-rg-list { container: prrg / inline-size; display: flex; flex-direction: column; gap: 8px; }
.pr-rg-head, .pr-rg-row { display: grid; grid-template-columns: 26px minmax(0, .9fr) minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) 108px; gap: 10px; align-items: center; }
.pr-rg-head { padding: 0 13px; font-size: 12px; font-weight: 600; color: var(--n-500); }
.pr-rg-item { border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--n-200); padding: 10px 12px; }
.pr-rg-item:hover { box-shadow: inset 0 0 0 1px var(--n-300); }
.pr-rg-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; font-weight: 500; }
.pr-rg-l { display: none; font-size: 11.5px; font-weight: 600; color: var(--n-500); }
.pr-rg-item .pr-cell { width: 100%; min-width: 0; box-sizing: border-box; height: 36px !important; min-height: 0 !important; padding-top: 0; padding-bottom: 0; }
@media (max-width: 768px) { .pr-rg-item .pr-cell { height: 42px !important; } }
.pr-rg-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--n-100); color: var(--n-600); font-size: 12px; font-weight: 700; }
.pr-rg-no-txt { display: none; }
.pr-rg-act { display: flex; justify-content: flex-end; gap: 2px; }
.pr-rg-act .btn-icon-only:disabled { opacity: .3; cursor: default; }
.pr-rg-opts { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--n-150); }
.pr-rg-opts .pr-tags { padding: 0; min-height: 0; border: 0; background: none; gap: 6px; }
.pr-rg-opts .pr-tags-label { font-size: 12px; font-weight: 600; color: var(--n-500); margin-right: 4px; }
.pr-rg-opts .pr-tags input { flex: 0 1 220px; min-width: 160px; box-sizing: border-box; height: 30px !important; min-height: 0 !important; padding: 0 10px !important; border: 1px dashed var(--n-300) !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; font-size: 12.5px !important; }
.pr-rg-opts .pr-tags input:focus { border-style: solid !important; border-color: var(--brand-400) !important; background: #fff !important; }
.pr-rg-add { margin-top: 10px; }
@container prrg (max-width: 820px) {
    .pr-rg-head { display: none; }
    .pr-rg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
    .pr-rg-no { display: block; grid-row: 1; grid-column: 1; justify-self: start; width: auto; height: auto; background: none; border-radius: 0; font-size: 13px; color: var(--n-900); white-space: nowrap; }
    .pr-rg-no-txt { display: inline; }
    .pr-rg-act { grid-row: 1; grid-column: 2; }
    .pr-rg-l { display: block; }
    .pr-rg-row > .pr-rg-f:last-of-type { grid-column: 1 / -1; }
    .pr-rg-opts .pr-tags input { min-width: 0; flex: 1 1 140px; }
}

/* floating result bar (single-column calculator): main price + a button down to the result card */
.pr-mini { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 880; margin: 0 auto; max-width: 560px; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border: 0; border-radius: 16px; font: inherit; text-align: left; color: var(--n-900); cursor: pointer;
    background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 0 0 1px rgba(24, 24, 27, .08), 0 14px 34px -12px rgba(24, 24, 27, .38);
    opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none;
    transition: opacity .2s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
.pr-mini.is-shown { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .2s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.pr-mini:active { transform: scale(.99); }
.pr-mini-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pr-mini-lbl { display: block; font-size: 11.5px; font-weight: 600; color: var(--n-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-mini-lbl .pr-spin { width: 10px; height: 10px; vertical-align: -1px; }
.pr-mini-val { display: block; font-size: 20px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; color: #067647; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-mini-side { flex: 0 1 auto; min-width: 0; max-width: 46%; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-right: 12px; border-right: 1px solid var(--n-150); }
.pr-mini-side .pr-mini-val { font-size: 14px; font-weight: 700; color: var(--n-800); }
.pr-mini-go { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--n-100); color: var(--n-700); font-size: 13px; }
.pr-mini.is-empty .pr-mini-val, .pr-mini.is-info .pr-mini-val { font-size: 14px; font-weight: 600; color: var(--n-700); letter-spacing: 0; }
.pr-mini.is-error .pr-mini-val { font-size: 14px; font-weight: 650; color: #b54708; letter-spacing: 0; }
.pr-mini.is-busy .pr-mini-val { opacity: .45; }
#prResult { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { .pr-mini { transition: none; } }
@media print { .pr-mini { display: none !important; } }

@media (max-width: 560px) {
    .pr-table-pick .card-body > .btn { width: 42px; height: 42px; min-height: 0; padding: 0; justify-content: center; }
    .pr-table-pick .card-body > .btn .pr-btn-text { display: none; }
}

/* product picker header (Công thức & PTVC): picker and actions on one line */
.pr-prod-head { flex-wrap: nowrap; }
.pr-prod-head > .pr-prod-bar { flex: 1 1 auto; min-width: 0; width: auto !important; flex-wrap: nowrap; }
.pr-prod-head > .pr-prod-bar select { flex: 0 1 320px; width: auto !important; min-width: 0; }
.pr-prod-head > .pr-card-head-actions { flex: 0 0 auto; width: auto !important; flex-wrap: nowrap; }
@media (max-width: 768px) {
    .pr-prod-head > .pr-prod-bar select { flex: 1 1 auto; }
    .pr-prod-head > .pr-card-head-actions .btn { flex: 0 0 auto; width: 42px; height: 42px; min-height: 0; padding: 0; justify-content: center; }
    .pr-prod-head > .pr-card-head-actions .pr-btn-text { display: none; }
}

/* short screens (phone held sideways): compact bar; beside the bottom menu it becomes a pill as tall as the menu */
.pr-mini.is-compact { padding: 6px 6px 6px 14px; gap: 10px; border-radius: 14px; }
.pr-mini.is-compact .pr-mini-lbl { font-size: 10.5px; }
.pr-mini.is-compact .pr-mini-val { font-size: 16px; }
.pr-mini.is-compact.is-empty .pr-mini-val, .pr-mini.is-compact.is-info .pr-mini-val, .pr-mini.is-compact.is-error .pr-mini-val { font-size: 12.5px; }
.pr-mini.is-compact .pr-mini-side { padding-right: 10px; }
.pr-mini.is-compact .pr-mini-side .pr-mini-val { font-size: 13px; }
.pr-mini.is-compact .pr-mini-go { width: 30px; height: 30px; font-size: 12px; }
.pr-mini.is-side { height: 52px; margin: 0; border-radius: 999px; padding-left: 18px; }
@media (max-width: 360px) {
    .pr-mini { gap: 8px; padding-left: 12px; }
    .pr-mini-side { padding-right: 8px; }
    .pr-mini-go { width: 30px; height: 30px; }
}

/* pill beside the bottom menu: the two prices on two short lines (label left, price right), arrow on the right */
.pr-mini.is-side.is-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 6px 6px 16px; }
.pr-mini.is-side.is-price .pr-mini-main, .pr-mini.is-side.is-price .pr-mini-side { grid-column: 1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; max-width: none; padding: 0; border: 0; min-width: 0; }
.pr-mini.is-side.is-price .pr-mini-main { grid-row: 1; }
.pr-mini.is-side.is-price .pr-mini-side { grid-row: 2; }
.pr-mini.is-side.is-price .pr-mini-go { grid-column: 2; grid-row: 1 / 3; }
.pr-mini.is-side.is-price .pr-mini-lbl { font-size: 10.5px; min-width: 0; }
.pr-mini.is-side.is-price .pr-mini-val { flex: 0 0 auto; font-size: 14.5px; line-height: 1.25; }
.pr-mini.is-side.is-price .pr-mini-side .pr-mini-val { font-size: 12.5px; color: var(--n-800); }
.pr-mini.is-side.is-price:not(:has(.pr-mini-side)) .pr-mini-main { grid-row: 1 / 3; flex-direction: column; align-items: flex-start; gap: 0; }
/* a few pixels more for the labels inside the pill */
.pr-mini.is-side.is-price { padding: 6px 5px 6px 13px; column-gap: 6px; }
.pr-mini.is-side.is-price .pr-mini-main, .pr-mini.is-side.is-price .pr-mini-side { gap: 6px; }
.pr-mini.is-side .pr-mini-go { width: 28px; height: 28px; font-size: 11px; }
/* pill beside the menu, messages instead of prices: two short lines of text, no "Kết quả" title */
.pr-mini.is-side:not(.is-price) .pr-mini-main > .pr-mini-lbl { display: none; }
.pr-mini.is-side:not(.is-price) .pr-mini-val { white-space: normal; font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* bar showing cost figures (no selling price visible): plain dark numbers, not the green of a selling price */
.pr-mini.is-neutral .pr-mini-main .pr-mini-val { color: var(--n-900); }

/* live update notice: an admin changed the price list / rights and the page reloaded itself */
.pr-live { position: fixed; top: 14px; left: 50%; z-index: 2100; display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: min(480px, calc(100vw - 24px)); padding: 10px 8px 10px 12px; border-radius: 12px; background: var(--n-900, #1a1a1a); color: #fff; font-size: 13px; line-height: 1.45; box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .45); opacity: 0; transform: translate(-50%, -10px); transition: opacity .2s ease, transform .2s ease; }
.pr-live.is-shown { opacity: 1; transform: translate(-50%, 0); }
.pr-live-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #7dd3fc; font-size: 13px; }
.pr-live-text { min-width: 0; padding-top: 4px; }
.pr-live-text b { display: block; font-weight: 600; }
.pr-live-text span { display: block; color: rgba(255, 255, 255, .72); }
.pr-live-close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .6); cursor: pointer; }
.pr-live-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@media (prefers-reduced-motion: reduce) { .pr-live { transition: none; } }

/* audit log: filters, bar with ticking / deleting */
.pr-audit-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pr-audit-f { position: relative; min-width: 0; }
.pr-audit-f > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--n-400); font-size: 13px; pointer-events: none; z-index: 1; }
.pr-audit-f > select { width: 100%; padding-left: 34px !important; text-overflow: ellipsis; }
.pr-audit-dates { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 10px; }
.pr-audit-dates[hidden] { display: none; }
.pr-audit-dates label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; color: var(--n-500); }
.pr-audit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 36px; margin-bottom: 8px; font-size: 13px; color: var(--n-600); }
.pr-audit-all { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 550; color: var(--n-800); cursor: pointer; user-select: none; }
/* tick boxes for picking rows: look from the site-wide rule (polaris.css), no extra margin here */
.pr-audit-all input[type="checkbox"], .pr-audit-pick input[type="checkbox"] { margin: 0; }
.pr-audit-count { font-variant-numeric: tabular-nums; }
.pr-audit-bar .pr-link[hidden] { display: none; }
.pr-audit-picked { display: none; align-items: center; gap: 10px; }
.pr-audit-bar.has-picked .pr-audit-picked { display: inline-flex; }
.pr-audit-delall { margin-left: auto; }
.pr-audit-delall:not(:disabled) { color: #c01048; }
.pr-audit-pick { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.pr-audit-table th.pr-audit-time { padding-left: 42px; }
.pr-audit-table tr.is-picked > td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.pr-audit-table td.pr-act { width: 44px; }
@container prroot (max-width: 760px) {
    .pr-audit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-audit-filters > .pr-audit-period { grid-column: 1 / -1; }
}
@container prroot (max-width: 420px) {
    .pr-audit-filters { grid-template-columns: minmax(0, 1fr); }
    .pr-audit-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-audit-delall { margin-left: 0; }
}
@container prrt (max-width: 640px) {
    /* stacked cards: the time with its tick box opens the card, no "Thời gian" caption needed */
    .pr-audit-table > table > tbody > tr > td.pr-audit-time::before { display: none !important; }
    .pr-audit-table > table > tbody > tr > td.pr-audit-time { font-weight: 550; color: var(--n-800); }
}

/* number fields grouped while typing: digits of equal width so 5,000,000 reads at a glance */
.pr-num { font-variant-numeric: tabular-nums; }

/* ---------- cước do logistics báo ---------- */
.badge-warning { background: #fef3c7; color: #92400e; }
.pr-ship-tag { margin-left: 4px; font-size: 10.5px; vertical-align: 1px; }
.pr-shipbox { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 12px; border: 1px solid var(--n-150); border-radius: 12px; background: var(--n-50); font-size: 13px; line-height: 1.45; }
.pr-shipbox-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--n-600); border: 1px solid var(--n-150); font-size: 13px; }
.pr-shipbox-body { min-width: 0; flex: 1; }
.pr-shipbox-body > b { display: block; font-weight: 600; color: var(--n-900); }
.pr-shipbox-body > p { margin: 2px 0 0; color: var(--n-600); }
.pr-shipbox-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pr-shipbox-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pr-shipbox.is-need { background: #fffbeb; border-color: #fde68a; }
.pr-shipbox.is-need .pr-shipbox-icon, .pr-shipbox.is-wait .pr-shipbox-icon { color: #b45309; border-color: #fde68a; }
.pr-shipbox.is-wait { background: #fffbeb; border-color: #fde68a; }
.pr-shipbox.is-used { background: #f0fdf4; border-color: #bbf7d0; }
.pr-shipbox.is-used .pr-shipbox-icon { color: #15803d; border-color: #bbf7d0; }
.pr-shipbox.is-declined { background: #fef2f2; border-color: #fecaca; }
.pr-shipbox.is-declined .pr-shipbox-icon { color: #b91c1c; border-color: #fecaca; }
.pr-shipbox-quote { margin: 12px 0 0; }
.pr-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.pr-tab-count[hidden] { display: none; }
.pr-ship-filter { min-width: 0; }
.pr-ship-filter .team-tabs { margin: 0; }
tr.pr-ship-fresh > td:first-child strong { color: var(--primary); }

/* Yêu cầu báo cước dialog: the parcel across the width, its figures in two columns */
.pr-ship-detail { display: flex; flex-direction: column; gap: 14px; }
.pr-kv-2 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; column-gap: 14px; }
.pr-kv-2 dt:nth-of-type(even) { padding-left: 18px; border-left: 1px solid var(--n-150); }
@media (max-width: 640px) {
    .pr-kv-2 { grid-template-columns: minmax(0, 1fr) auto; }
    .pr-kv-2 dt:nth-of-type(even) { padding-left: 0; border-left: 0; }
}

/* shipping cost in use: title + request code, logistics' note, who / when */
.pr-shipbox-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pr-shipbox-head > b { font-weight: 600; color: var(--n-900); }
.pr-shipbox-code { padding: 1px 7px; border-radius: 6px; background: rgba(21, 128, 61, .1); color: #15803d; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-shipbox-body > p.pr-shipbox-note { margin: 6px 0 0; color: var(--n-800); }
.pr-shipbox-body > p.pr-shipbox-meta { margin: 4px 0 0; font-size: 12px; color: var(--n-500); }
/* buttons in the shipping card: compact so two sit side by side in the result column */
.pr-shipbox-actions .btn { padding: 0 10px; min-height: 30px; font-size: 12.5px; gap: 5px; }

/* the price card carries the logistics buttons when the PTVC has no cost for the parcel */
.pr-price-main .pr-shipbox-actions { margin-top: 12px; }

/* dialog buttons: one line of text; a short label takes over when the full one does not fit */
.pr-modal .modal-actions .btn { white-space: nowrap; }
.pr-act-short { display: none; }
.modal-actions.is-tight .pr-act-full { display: none; }
.modal-actions.is-tight .pr-act-short { display: inline; }

/* ---------- shipping options logistics quotes ---------- */
.pr-shipopts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pr-shipopt { padding: 12px 14px; border: 1px solid var(--n-150); border-radius: 12px; background: var(--n-50); }
.pr-shipopt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; font-weight: 650; color: var(--n-800); }
.pr-shipopt-head .pr-name-sub { font-weight: 500; margin: 0; }
.pr-shipopt-head .btn-icon-only { margin-left: auto; }
.pr-shipopt-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pr-shipopt-grid.has-name { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.pr-shipopt-grid .form-group { margin: 0; }
.pr-shipopt-add { align-self: flex-start; }
.pr-shipopt-list { display: flex; flex-direction: column; margin-bottom: 8px; }
.pr-shipopt-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--n-150); font-size: 13px; }
.pr-shipopt-item:last-child { border-bottom: 0; }
.pr-shipopt-item .pr-name-sub { display: block; }
.pr-shipopt-cost { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-shipbox-body > p.pr-shipbox-opt { margin: 4px 0 0; color: var(--n-800); font-weight: 550; }
.pr-shipbox-body > p.pr-shipbox-opt span { font-weight: 400; color: var(--n-600); }
@media (max-width: 900px) {
    .pr-shipopt-grid, .pr-shipopt-grid.has-name { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pr-shipopt-grid > .form-group:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .pr-shipopt-grid, .pr-shipopt-grid.has-name { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Yêu cầu báo cước: conversation ---------- */
.pr-thread { margin-top: 16px; }
.pr-thread-list { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; padding: 12px; border: 1px solid var(--n-150); border-radius: 12px; background: var(--n-50); }
.pr-thread-empty { margin: 0; padding: 6px 0; font-size: 13px; color: var(--n-500); text-align: center; }
.pr-msg { align-self: flex-start; max-width: 82%; }
.pr-msg.is-mine { align-self: flex-end; }
.pr-msg-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 11.5px; color: var(--n-500); }
.pr-msg.is-mine .pr-msg-meta { justify-content: flex-end; }
.pr-msg-meta b { font-weight: 600; color: var(--n-800); }
.pr-msg-role { padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 650; line-height: 1.7; }
.pr-msg-role.is-sales { background: #eff6ff; color: #1d4ed8; }
.pr-msg-role.is-logistics { background: #fef3c7; color: #92400e; }
.pr-msg-text { padding: 8px 12px; border: 1px solid var(--n-150); border-radius: 12px 12px 12px 4px; background: #fff; font-size: 13px; line-height: 1.5; color: var(--n-900); white-space: pre-line; overflow-wrap: anywhere; }
.pr-msg.is-mine .pr-msg-text { border-radius: 12px 12px 4px 12px; border-color: color-mix(in srgb, var(--primary) 25%, #fff); background: color-mix(in srgb, var(--primary) 9%, #fff); }
.pr-thread-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--n-400); }
.pr-talk { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; color: var(--n-500); vertical-align: middle; }
.pr-talk.is-new { font-weight: 650; color: var(--primary); }
@media (max-width: 560px) {
    .pr-msg { max-width: 92%; }
    .pr-thread-hint { display: none; }
}

/* Yêu cầu báo cước list: tick box beside the code (admins), trash before the chevron */
.pr-ship-pick { display: flex; align-items: flex-start; gap: 10px; }
.pr-ship-pick .pr-audit-pick { margin-top: 2px; }
.pr-ship-table tr.is-picked > td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.pr-ship-table td.pr-act { white-space: nowrap; }
.pr-ship-table td.pr-act .btn-icon-only { margin-right: 6px; vertical-align: middle; }

/* Yêu cầu báo cước: count on the sidebar item, sound on / off */
.pr-nav-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.pr-nav-count[hidden] { display: none; }
.sidebar.collapsed .pr-nav-count { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; margin: 0; padding: 0 4px; font-size: 10px; }
.pr-ship-head-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pr-sound-btn { flex: none; color: var(--primary); }
.pr-sound-btn.is-off { color: var(--n-400); }

/* Báo cước: offer desktop notifications */
.pr-notes-bar { align-items: center; margin-bottom: 14px; }
.pr-notes-bar > div { flex: 1; min-width: 0; }
.pr-notes-bar > .btn { flex: none; }
@media (max-width: 560px) { .pr-notes-bar { flex-wrap: wrap; } }

/* status tabs of the "Báo cước" page: how many requests (grey), how many need this person (orange) */

/* chat-style message box: send button inside, shown once something is typed */
.pr-compose { position: relative; display: flex; align-items: flex-end; margin-top: 10px; border: 1px solid var(--n-200, #e4e4e7); border-radius: 12px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.pr-compose:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.pr-compose-input { flex: 1; min-width: 0; min-height: 42px; max-height: 132px; padding: 10px 14px; border: 0; outline: 0; background: transparent; resize: none; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--n-900); field-sizing: content; overflow-y: auto; }
.pr-compose-input::placeholder { color: var(--n-400); }
.pr-compose-send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: 4px 5px 4px 0; border: 0; border-radius: 9px; background: none; color: var(--primary); font-size: 16px; cursor: pointer; opacity: 0; visibility: hidden; transform: scale(.7); transition: opacity .15s ease, transform .15s ease, visibility .15s, background-color .15s ease; }
.pr-compose.has-text .pr-compose-send { opacity: 1; visibility: visible; transform: none; }
.pr-compose-send:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.pr-compose-send:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .pr-compose-send { transition: none; } }

/* calculation sent to logistics: locked, with a bar saying so */
.pr-lock-bar { align-items: center; }
.pr-lock-bar > div:first-of-type { flex: 1; min-width: 0; }
.pr-lock-actions { display: flex; flex: none; gap: 6px; }
.pr-lock-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pr-prod-switch.is-locked .team-tabs { opacity: .55; pointer-events: none; }
@media (max-width: 640px) {
    .pr-lock-bar { flex-wrap: wrap; }
    .pr-lock-actions { width: 100%; }
}

/* Yêu cầu báo cước: the requester's own name for it, search */
.pr-ship-title { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--n-900); }
.pr-ship-name { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; color: var(--n-900); }
.pr-ship-name > b { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.pr-ship-name > .form-control { flex: 1; min-width: 0; }
.pr-ship-name .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }

/* Báo cước list: count / ticking, search and clean-up on one toolbar row */
.pr-ship-toolbar { margin-bottom: 12px; }
.pr-ship-toolbar .pr-ship-search { width: 320px; max-width: 100%; margin-left: auto; }
.pr-ship-toolbar .pr-audit-delall { margin-left: 0; }
@container prroot (max-width: 640px) {
    .pr-ship-toolbar .pr-ship-search { order: -1; flex: 1 1 100%; width: 100%; margin-left: 0; }
}
/* Yêu cầu báo cước dialog: the name and the status line on one row when there is room */
.pr-ship-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.pr-ship-headline > .pr-ship-name { margin: 0; }
.pr-ship-headline > .pr-ship-name:has(input) { flex: 1 1 100%; }
.pr-ship-headline > .pr-quote-head { margin: 0; }
/* renaming a request: the input takes the room left by the buttons (it never pushes them out of the dialog) */
.pr-ship-headline > .pr-ship-name { min-width: 0; max-width: 100%; }
.pr-ship-name > .form-control { flex: 1 1 0; width: 0; min-width: 0; }
/* the name (or "Đặt tên") and its pencil are one control: the whole thing renames */
.pr-ship-namebtn { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: calc(100% + 8px); margin: -4px 0 -4px -8px; padding: 4px 8px;
    border: 0; border-radius: 8px; background: none; color: var(--n-900); font: inherit; font-size: 16px; font-weight: 650; line-height: 1.35; text-align: left; cursor: pointer;
    transition: background-color .15s ease; }
.pr-ship-namebtn > span { min-width: 0; overflow-wrap: anywhere; }
.pr-ship-namebtn > .fa-pen { flex: none; font-size: 11px; color: var(--n-400); transition: color .15s ease; }
.pr-ship-namebtn:hover { background: var(--n-100); }
.pr-ship-namebtn:hover > .fa-pen, .pr-ship-namebtn:focus-visible > .fa-pen { color: var(--primary); }
.pr-ship-namebtn.is-empty { font-size: 14px; font-weight: 600; color: var(--primary); }
.pr-ship-namebtn.is-empty > .fa-pen { color: inherit; }
.pr-ship-headline { gap: 8px 12px; }

/* Yêu cầu báo cước: the parcel - its size up front, the figures as tiles, each layer in a small table */
.pr-parcel > h4 { margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--n-900); }
.pr-parcel-hero { padding: 12px 16px 14px; border-radius: 10px; background: var(--primary-bg); box-shadow: inset 0 0 0 1px var(--primary-bg-hover); }
.pr-parcel-hero-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; font-weight: 650; color: var(--primary-dark); }
.pr-parcel-hero-vals { display: flex; flex-wrap: wrap; gap: 10px 40px; }
.pr-parcel-hero-vals > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-parcel-hero-vals b { font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--n-900); font-variant-numeric: tabular-nums; }
.pr-parcel-hero-vals span { font-size: 12px; color: var(--n-600); }
.pr-parcel-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.pr-parcel-stat { min-width: 0; padding: 8px 12px; border-radius: 8px; background: var(--n-0); box-shadow: inset 0 0 0 1px var(--n-150); }
.pr-parcel-stat span { display: block; font-size: 12px; color: var(--n-600); }
.pr-parcel-stat b { display: block; margin-top: 2px; font-size: 14px; font-weight: 650; color: var(--n-900); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pr-parcel-msg { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--n-700); }
.pr-parcel-msg > i { margin-top: 2px; color: var(--warning); }
.pr-parcel-msg b { font-weight: 600; color: var(--n-800); }
.pr-parcel-layers { margin-top: 16px; }
.pr-parcel-sub { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 650; color: var(--n-900); }
.pr-parcel-sub > span { font-size: 12px; font-weight: 500; color: var(--n-500); }
.pr-parcel-table-wrap { overflow-x: auto; border: 1px solid var(--n-150); border-radius: 8px; background: var(--n-0); }
.pr-parcel-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pr-parcel-table th { padding: 8px 12px; background: var(--n-50); border-bottom: 1px solid var(--n-150); text-align: left; font-size: 12px; font-weight: 600; color: var(--n-600); white-space: nowrap; }
.pr-parcel-table td { padding: 8px 12px; border-bottom: 1px solid var(--n-100); color: var(--n-800); white-space: nowrap; }
.pr-parcel-table tr:last-child td { border-bottom: 0; }
.pr-parcel-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-parcel-table td.num { font-weight: 600; color: var(--n-900); }
.pr-parcel-layer { font-weight: 600; color: var(--n-900); }
.pr-parcel-layer > span { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--primary); }
.pr-parcel-table tr.is-piece .pr-parcel-layer > span { color: var(--n-500); font-weight: 500; }
.pr-parcel-table .pr-narrow-only { display: none; }
@media (max-width: 640px) {
    .pr-parcel-hero-vals b { font-size: 18px; }
    .pr-parcel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-parcel-table th, .pr-parcel-table td { padding: 8px 10px; }
    .pr-parcel-table .pr-wide-only { display: none; }
    .pr-parcel-table .pr-narrow-only { display: inline; }
}

/* Báo giá đã lưu: same filters / ticking as Nhật ký; without "Người tạo" there are two filters */
.pr-audit-filters.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container prroot (max-width: 760px) {
    .pr-audit-filters.is-two > .pr-audit-period { grid-column: auto; }
}
/* a quote someone else saved: no tick box, the code stays in line with the others */
.pr-audit-pick.is-off { visibility: hidden; width: 18px; }
.pr-quote-list .pr-ship-pick { align-items: center; }
@container prrt (max-width: 640px) {
    /* stacked cards: the code with its tick box opens the card, no "Mã" caption needed */
    .pr-quote-list > table > tbody > tr > td:first-child::before { display: none !important; }
}
/* Gửi yêu cầu báo cước: the parcel sent in a box of its own, then the name and note fields */
.pr-ask-parcel { margin-bottom: 18px; }
.pr-ask-parcel .pr-parcel-stats { margin-top: 0; }
@media (max-width: 640px) {
    /* two tiles a row on phones: a last tile alone takes the whole row */
    .pr-parcel-stats > .pr-parcel-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* layer table: the size columns sit under a centred group title (Kích thước đóng gói / đèn), so their
   names and figures are centred too - right-aligned they drift away from the title, more so in wide columns */
.pr-layers th.pr-dim { text-align: center !important; }
.pr-layers td.pr-dim > input.pr-cell { text-align: center; }
/* many columns (Đèn chữ): the controls give up some width before the table would need a side scroll */
.pr-layers select.pr-cell { min-width: 120px; }
/* the per-set price column: its title may take two lines, the figure needs less room than the title */
.pr-layers th.pr-row-price-head { white-space: normal !important; min-width: 0; }
.pr-layers td.pr-row-price { min-width: 92px; }
.pr-layers input.pr-cell { min-width: 64px; }
@container prlayers (max-width: 1140px) {
    .pr-layers td.pr-dim > input.pr-cell { text-align: left; }
}

/* PTVC box: what each PTVC charges for the parcel, right of its transit time */
.ui-select-cost { flex-shrink: 0; min-width: 96px; text-align: right; font-size: 12.5px; font-weight: 650; color: var(--n-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-select-cost.is-none { font-weight: 500; color: var(--n-400); }
.ui-select-option.is-selected .ui-select-cost:not(.is-none) { color: var(--brand-700); }

/* ---------- loading placeholder (skeleton) of a tab: blocks shaped like the page, shimmering ---------- */
#prBody.is-loading, .pr-root > .is-loading { position: relative; min-height: 440px; }
/* the tab is built underneath, out of sight, until its data has come */
#prBody.is-loading > :not(.pr-skel) { visibility: hidden; }
#prBody.is-loading > .pr-skel { position: absolute; inset: 0 0 auto 0; }
#prBody.is-in { animation: pr-tab-in .22s ease-out; }
@keyframes pr-tab-in { from { opacity: 0; } to { opacity: 1; } }
/* shows after a short moment: a quick load does not flash it */
.pr-skel { animation: pr-skel-in .2s ease .12s both; }
@keyframes pr-skel-in { from { opacity: 0; } to { opacity: 1; } }
.pr-skel-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-lg, 14px); background: #fff; box-shadow: var(--elev-1); }
.pr-skel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--n-100); }
.pr-skel-bar { display: block; max-width: 100%; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, var(--n-150) 0%, var(--n-150) 38%, var(--n-50) 50%, var(--n-150) 62%, var(--n-150) 100%);
    background-size: 300% 100%; animation: pr-shimmer 1.5s ease-in-out infinite; }
@keyframes pr-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.pr-skel-bar.is-title { height: 18px; }
.pr-skel-bar.is-pill { height: 34px; border-radius: 10px; }
.pr-skel-bar.is-label { height: 10px; }
.pr-skel-bar.is-input { height: 38px; border-radius: 10px; }
.pr-skel-bar.is-row { height: 40px; border-radius: 8px; }
.pr-skel-bar.is-headrow { height: 30px; opacity: .7; }
.pr-skel-bar.is-box { height: 84px; border-radius: 12px; }
.pr-skel-bar.is-button { height: 40px; border-radius: 10px; margin-top: 6px; }
.pr-skel-bar.is-tabs { width: 460px; height: 40px; border-radius: 12px; }
.pr-skel-top { padding: 10px; border-radius: var(--radius-lg, 14px); background: #fff; box-shadow: var(--elev-1); }
.pr-skel-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.pr-skel-field { display: flex; flex-direction: column; gap: 8px; }
.pr-skel-table { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
/* the calculator: form and result side by side, as on the page */
.pr-skel-calc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@container prroot (max-width: 1000px) { .pr-skel-calc { grid-template-columns: minmax(0, 1fr) 300px; } }
@container prroot (max-width: 820px) { .pr-skel-calc { grid-template-columns: minmax(0, 1fr); } }
@container prroot (max-width: 560px) {
    .pr-skel-fields { grid-template-columns: minmax(0, 1fr); }
    .pr-skel-head > .pr-skel-bar.is-pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pr-skel-bar, .pr-skel, #prBody.is-in { animation: none; }
}

/* ----- Bản nháp (draft) & Publish */
.pr-draft-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: #fffaeb; box-shadow: inset 0 0 0 1px #fedf89; }
.pr-draft-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: #fef0c7; color: #b54708; font-size: 15px; }
.pr-draft-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-draft-text strong { color: #7a2e0e; font-size: 13.5px; }
.pr-draft-text span { color: #93370d; font-size: 12.5px; line-height: 1.45; }
.pr-draft-text .pr-draft-sum { color: var(--n-700); overflow-wrap: anywhere; }
.pr-draft-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
    .pr-draft-bar { flex-direction: column; align-items: stretch; }
    .pr-draft-icon { display: none; }
    .pr-draft-actions { justify-content: stretch; }
    .pr-draft-actions .btn { flex: 1; justify-content: center; }
}

/* ----- What changed (draft / version) */
.pr-chg-count { font-size: 13px; font-weight: 650; color: var(--n-900); margin: 14px 0 8px; }
.pr-chg-list { display: flex; flex-direction: column; gap: 14px; }
.pr-chg-group h5 { margin: 0 0 6px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--n-600); }
.pr-chg { padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--n-150); margin-bottom: 6px; }
.pr-chg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--n-900); }
.pr-chg-head strong { font-weight: 650; overflow-wrap: anywhere; }
.pr-chg-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pr-chg-field { font-size: 12.5px; min-width: 0; }
.pr-chg-field.is-inline { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pr-chg-field.is-inline .fas { font-size: 10px; color: var(--n-400); }
.pr-chg-flabel { color: var(--n-500); font-weight: 600; margin-right: 2px; }
.pr-chg-field:not(.is-inline) .pr-chg-flabel { margin-bottom: 4px; }
.pr-chg-before { color: #b42318; background: #fef3f2; border-radius: 4px; padding: 0 5px; text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, .45); overflow-wrap: anywhere; }
.pr-chg-after { color: #067647; background: #ecfdf3; border-radius: 4px; padding: 0 5px; overflow-wrap: anywhere; }
.pr-chg-diff { margin: 0; padding: 6px 0; border-radius: 8px; background: var(--n-50); box-shadow: inset 0 0 0 1px var(--n-150); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; max-height: 340px; }
.pr-dl { display: flex; padding: 0 10px; white-space: pre; color: var(--n-700); }
.pr-dl.add { background: #ecfdf3; color: #067647; }
.pr-dl.del { background: #fef3f2; color: #b42318; }
.pr-dl-sign { flex: 0 0 14px; user-select: none; opacity: .7; }
.pr-chg-cells { margin-top: 8px; }
.pr-chg-cells .simple-table { font-size: 12.5px; }

/* ----- Version history */
.pr-ver-list { display: flex; flex-direction: column; }
.pr-ver { border-top: 1px solid var(--n-150); padding: 12px 2px; }
.pr-ver:first-child { border-top: 0; }
.pr-ver.is-draft { background: #fffaeb; border-radius: 10px; padding: 12px; margin-bottom: 6px; border-top: 0; }
.pr-ver.is-draft + .pr-ver { border-top: 0; }
.pr-ver-head { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.pr-ver-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pr-ver-live { color: #067647; font-weight: 600; }
.pr-ver-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-ver-note { font-weight: 650; color: var(--n-900); font-size: 13.5px; overflow-wrap: anywhere; }
.pr-ver-sum { font-size: 13px; color: var(--n-800); overflow-wrap: anywhere; }
.pr-ver-sum.pr-muted { color: var(--n-500); font-size: 12.5px; }
.pr-ver-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pr-ver-details { margin: 10px 0 2px 104px; }
@media (max-width: 720px) {
    .pr-ver-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .pr-ver-badges { flex-direction: row; align-items: center; }
    .pr-ver-actions { justify-content: flex-start; }
    .pr-ver-details { margin-left: 0; }
}

/* ----- Version history: picking versions to delete */
.pr-ver-bar { margin: 0 0 6px; }
.pr-ver-tag { display: flex; align-items: center; gap: 10px; }
.pr-ver-list.has-pick .pr-ver-head { grid-template-columns: 118px minmax(0, 1fr) auto; }
.pr-ver-list.has-pick .pr-ver-live { margin-left: 28px; }
.pr-ver-list.has-pick .pr-ver-details { margin-left: 130px; }
.pr-ver.is-picked { background: color-mix(in srgb, var(--primary) 6%, transparent); border-radius: 10px; }
.pr-ver.is-picked + .pr-ver { border-top-color: transparent; }
.pr-ver-actions .pr-icon-danger { align-self: center; }
@media (max-width: 720px) {
    .pr-ver-list.has-pick .pr-ver-head { grid-template-columns: minmax(0, 1fr); }
    .pr-ver-list.has-pick .pr-ver-live { margin-left: 0; }
    .pr-ver-list.has-pick .pr-ver-details { margin-left: 0; }
}
.pr-ver-list.has-pick .pr-ver:not(.is-draft) { padding-left: 10px; padding-right: 10px; }