/* Font dự phòng ĐÃ CANH METRIC theo Be Vietnam Pro (số đo từ bảng head/hhea/hmtx của
   chính 2 file font: Be upem 1000 asc 1000 desc -265 rộng TB 620.1 · Segoe UI upem 2048
   asc 2210 desc -514 rộng TB 1118.7). Nhờ vậy chữ hiện NGAY bằng font hệ thống mà khi
   Be Vietnam Pro tải xong và tráo font thì KHÔNG dịch chuyển một pixel nào. */
@font-face {
  font-family: 'BeVietnamPro Fallback';
  font-weight: 400;
  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
  size-adjust: 113.52%;
  ascent-override: 88.09%;
  descent-override: 23.34%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'BeVietnamPro Fallback';
  font-weight: 600;
  src: local('Segoe UI Semibold'), local('Roboto Medium'), local('Arial');
  size-adjust: 112.93%;
  ascent-override: 88.55%;
  descent-override: 23.47%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'BeVietnamPro Fallback';
  font-weight: 700;
  src: local('Segoe UI Bold'), local('Roboto Bold'), local('Arial Bold'), local('Arial');
  size-adjust: 109.42%;
  ascent-override: 91.39%;
  descent-override: 24.22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'BeVietnamPro Fallback';
  font-weight: 800;
  src: local('Segoe UI Bold'), local('Roboto Black'), local('Arial Bold'), local('Arial');
  size-adjust: 110.72%;
  ascent-override: 90.31%;
  descent-override: 23.93%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'BeVietnamPro';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BeVietnamPro-Regular.woff2') format('woff2'),
    url('fonts/BeVietnamPro-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'BeVietnamPro';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/BeVietnamPro-SemiBold.woff2') format('woff2'),
    url('fonts/BeVietnamPro-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'BeVietnamPro';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/BeVietnamPro-Bold.woff2') format('woff2'),
    url('fonts/BeVietnamPro-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'BeVietnamPro';
  font-weight: 800;
  font-display: swap;
  src: url('fonts/BeVietnamPro-ExtraBold.woff2') format('woff2'),
    url('fonts/BeVietnamPro-ExtraBold.ttf') format('truetype');
}

/* 7 màu thương hiệu (--navy, --navy-head, --red, --blue, --muted, --line, --paper)
   KHÔNG khai báo ở đây: chúng dùng chung với phiếu Excel và JS nên nguồn duy nhất là
   config.php['mau'], phát ra bằng css_bien_mau() ở mỗi trang và trong file PDF. */
:root {
  --ink: #1e2430;
  --line-soft: #e2e6f0;
  --zebra: #f4f6fb;
  --bg: #eceef4;
  --hot: #e8590c;
  --coldbg: #eaf1fb;
  --hotbg: #fdeee4;
  --amber: #b7791f;
  --chipbg: #eef2fb;
  --green: #1f9d55;
  --warn: #fff4e5;
  /* Nền ô nhập/khay nút trong sidebar */
  --field: #f7f9fc;
  /* Nền nhạt hơn giấy — tiêu đề nhóm trong khay gợi ý */
  --paper-soft: #fafbff;
  /* Nền xanh rất nhạt — ô giảm giá đang áp dụng */
  --coldbg-soft: #eef4ff;
  /* Nền hổ phách — thẻ THEO SỐ LƯỢNG / NHẬP TAY */
  --amberbg: #fff2e0;
  /* Chữ phụ nhạt */
  --muted-soft: #8a90a0;
  /* Màu nhận diện 3 định dạng xuất — dùng chung sidebar + trang Giá niêm yết */
  --exp-png: #0f766e;
  --exp-pdf: #b91c1c;
  --exp-xls: #166534;
  /* Chữ dòng "Chưa có dịch vụ" của bảng phiếu — dùng ở cả index.php lẫn app.js */
  --phieu-trong: #9aa;
  /* Viền riêng của sidebar — sáng hơn viền phiếu; .panel.builder chỉ trỏ vào 2 token này */
  --line-builder: #d7dce8;
  --line-soft-builder: #e8ecf5;
  /* Bộ màu chữ riêng của sidebar — đủ 4.5:1 theo WCAG AA. Tách riêng để KHÔNG đụng
     màu của phiếu / Giá niêm yết / Bảng giá; .panel.builder trỏ vào nhóm này. */
  --muted-builder: #4f5563;
  --muted-soft-builder: #626878;
  --muted-faint-builder: #6b7280;
  --green-builder: #15803d;
  --green-dark-builder: #126c33;
  --hot-builder: #c2410c;
  /* Viền + nền của nút phá huỷ (Huỷ / Xoá) — dùng chung sidebar và trang Bảng giá */
  --danger-line: #e6a9a7;
  --danger-bg: #fdeaea;
  /* Viền 2 thẻ tổng kết — cùng tông với nền thẻ */
  --coldbg-line: #c5daf6;
  --hotbg-line: #f7cdb2;
  /* Chữ gợi ý trong ô nhập — đạt 4.5:1 trên cả nền trắng lẫn --field */
  --placeholder: #6b7280;
  /* Thanh menu: chữ liên kết và nền khi rê chuột, đều nằm trên nền --navy */
  --menu-link: #cfe0ff;
  --menu-hover-bg: #31548c;
  --menu-placeholder: #9aa1b0;
  /* Nền khi rê chuột của nút phụ trên nền lạnh */
  --coldbg-hover: #dbe7fa;
  /* Nhãn loại giá trong dropdown gợi ý */
  --tag-kt-bg: #e7effc;
  /* Giá Lạnh/Nóng khi chip kích thước đang được chọn (nền navy) */
  --chip-on-lanh: #a9c9f5;
  --chip-on-nong: #f5b58f;
  /* Khối bậc số lượng — nền và viền tông xanh lá nhạt */
  --tier-bg: #eafaf1;
  --tier-line: #b7e5cb;
  /* Trang Bảng giá: nền hàng tiêu đề và viền nút Lưu */
  --bg-thead: #f3f6fc;
  --green-line: #a9d9bf;
  /* ----- Thang chữ: 6 bậc, thay 11 cỡ rời rạc ----- */
  --fs-micro: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --lh-tight: 1.25;
  --lh-base: 1.45;
  /* CHỈ dùng cho chữ in hoa */
  --ls-caps: .04em;
  --fw-bold: 700;
  /* ----- Thang khoảng cách 4px ----- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  /* ----- Bo góc ----- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;
  /* ----- Chiều cao điều khiển: mọi ô nhập/nút cùng một chiều cao ----- */
  --ctl-h-xs: 34px;
  --ctl-h-sm: 32px;
  --ctl-h: 36px;
  --ctl-h-lg: 40px;
  /* Vùng bấm nhỏ nhất — WCAG 2.2 SC 2.5.8 */
  --tap-min: 24px;
  /* Chiều cao 1 chip kích thước — đo thật 47.75px, chốt 48 cho bám lưới 4px */
  --chip-h: 48px;
  /* Vòng focus dùng chung cho toàn sidebar — màu lấy thẳng từ --navy-head (config.php),
     KHÔNG chép lại giá trị */
  --ring: 0 0 0 3px color-mix(in srgb, var(--navy-head) 32%, transparent);
  --menu-h: 48px;
  /* Bề rộng máng thanh cuộn — giá trị dự phòng, app.js đo lại giá trị thật lúc khởi tạo */
  --sbw: 15px;
  --phieu-pad: 30px;
  --trow: 40px;
  /* Đường kẻ CHUẨN của phiếu — lấy theo viền ô "Khách hàng". NGUỒN DUY NHẤT cho mọi đường kẻ trong #phieu */
  --phieu-line: 1px solid var(--line);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Luôn chừa chỗ thanh cuộn → không nhảy ngang khi chuyển trang */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ---- shell ---- */
.app {
  display: grid;
  /* 844 = phiếu 800 + padding .stage 44, cộng máng thanh cuộn --sbw (.stage đang
     scrollbar-gutter: stable) — cột phải không bao giờ hẹp hơn phiếu, cột trái tự co
     ở màn hẹp thay vì cắt phiếu và bật thanh cuộn ngang */
  grid-template-columns: minmax(0, 452px) minmax(calc(844px + var(--sbw)), 1fr);
  gap: 0;
  height: calc(100vh - var(--menu-h));
  overflow: hidden;
}

.panel {
  background: var(--paper);
  border-right: 1px solid var(--line);
  font-family: 'BeVietnamPro', 'BeVietnamPro Fallback', sans-serif;
}

/* Chỉ panel KHÔNG phải sidebar báo giá mới tự cuộn — sidebar báo giá là lưới 3 tầng,
   phần cuộn nằm ở .steps */
.panel:not(.builder) {
  padding: 16px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - var(--menu-h));
  scrollbar-gutter: stable;
}


/* Sidebar trang Lập báo giá — 3 tầng: đầu · các bước · đáy cố định.
   Chỉ tầng giữa co giãn nên không còn khối nào tràn ra đè khối khác. */
.panel.builder {
  --line: var(--line-builder);
  --line-soft: var(--line-soft-builder);
  --muted: var(--muted-builder);
  --muted-soft: var(--muted-soft-builder);
  --muted-faint: var(--muted-faint-builder);
  --green: var(--green-builder);
  --green-dark: var(--green-dark-builder);
  --hot: var(--hot-builder);
  font-variant-numeric: tabular-nums;
  /* Nhịp đứng chuẩn cho toàn sidebar — trước đây 100% phần tử để line-height: normal */
  line-height: var(--lh-tight);
  display: grid;
  /* Mặc định (bước 1, nội dung ngắn): các tầng xếp LIỀN nhau, chỗ trống dồn hết
     xuống đáy — không đục hố trắng giữa bước 2 và tầng tổng kết. minmax(0, max-content)
     để màn thấp thì tầng bước vẫn co lại và tự cuộn được. */
  grid-template-rows: auto minmax(0, max-content) 1fr;
  height: 100%;
  overflow: hidden;
}

/* Bước 2 mở (giỏ cần giãn hết chiều cao): trả lại lưới 3 tầng ghim đáy */
.panel.builder:has(.step.open.grow) {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Ba tầng của sidebar phải cùng máng lề phải: .steps chừa --sbw chỗ thanh cuộn
   (scrollbar-gutter), nên .head và .foot bù đúng --sbw để mép phải trùng nhau */
.builder .head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* Đệm dọc 1 bậc nhỏ — hàng tiêu đề không được ăn chiều cao của tầng bước nhập liệu */
  padding: var(--sp-2) var(--sp-4);
  padding-right: calc(var(--sp-4) + var(--sbw));
  border-bottom: 1px solid var(--line);
}

.builder .head h1 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--navy);
  white-space: nowrap;
}

/* Tầng bước — luôn cuộn được: màn thấp mà khoá overflow thì nút "Thêm"
   nằm ngoài khung và người dùng không có cách nào cuộn tới. Đủ chỗ thì không có thanh cuộn. */
.steps {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  /* KHÔNG đệm trên — đệm trên từng đẩy cả khối bước 1 tụt xuống khỏi thanh tiêu đề
     (USER chốt 23-07-2026). Chỉ giữ đệm ngang + đáy. */
  padding: 0 var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  /* Khoảng cách giữa 2 bước lấy đúng bậc thang 4px (--sp-2), kéo tiêu đề bước 2 sát khung bước 1.
     Chỉnh bằng chính thuộc tính gap của tầng bước, KHÔNG dùng margin âm hay dịch vị trí. */
  gap: var(--sp-2);
  min-height: 0;
}

.step {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

/* Bước ĐANG MỞ bỏ khung bao: ô tìm, khay gợi ý, thẻ nhập, giỏ đều đã có khung riêng,
   giữ thêm khung ngoài sẽ thành viền lồng viền cách nhau 13px.
   Giữ 1px trong suốt để hộp không đổi kích thước khi mở/thu. */
.step.open {
  border-color: transparent;
}


.step.open.grow {
  flex: 1 0 auto;
}

.st-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Hàng tiêu đề bước dùng bậc chiều cao lớn — nút Sửa/Xong 32px và số thứ tự 22px nằm gọn */
  height: var(--ctl-h-lg);
  padding: 0 var(--sp-3);
  user-select: none;
}

/* Nút mở/thu bước — <button> thật nên trình duyệt tự lo focus + Enter/Space;
   chiếm hết phần dư của hàng tiêu đề, nút Sửa/Xong nằm NGOÀI nó */
.st-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Căn chữ CHÍNH GIỮA TUYỆT ĐỐI theo lề trên/dưới (USER chốt 23-07-2026): text-box cắt
   hộp dòng đúng từ đỉnh chữ in hoa (cap) xuống chân chữ (baseline) — hết khoảng chừa
   nét thòng làm chữ lệch, bỏ hẳn nudge margin thủ công. Trình duyệt chưa hỗ trợ
   text-box thì rơi về căn giữa hộp dòng thường. */
.st-head .st-t,
.st-head .st-sum,
.st-head .cnt {
  text-box: trim-both cap alphabetic;
}

/* Bước 2 ĐÓNG: toggle giữ flex 1 gốc — bấm ĐÂU trên khung cũng mở (như khung 1).
   Bước 2 MỞ: toggle thu về ôm sát chữ để nút Thêm Tùy Chỉnh đứng NGAY SAU "Dịch vụ";
   bỏ margin-left auto của .st-act để nút không bị đẩy về mép phải */
#s2.open .st-toggle {
  flex: 0 0 auto;
}

#s2 .st-act {
  margin-left: 0;
}

/* Chip đếm nằm TRONG nút mở bước (bấm vào nó cũng mở) nhưng dạt về mép phải như cũ */
.st-toggle .cnt {
  margin-left: auto;
}

/* Đủ .panel.builder (0,4,0) để thắng rule focus chung (0,3,1) — giữ outline-offset âm,
   không thì vòng focus vẽ ra ngoài và bị .steps { overflow-x: hidden } cắt ở mép */
.panel.builder .st-toggle:focus-visible {
  outline: 2px solid var(--navy-head);
  outline-offset: -2px;
  border-radius: var(--r-lg);
}

.st-no {
  flex: 0 0 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  display: grid;
  place-items: center;
}

.step.open .st-no {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.step.done .st-no {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper);
}

.st-t {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--navy);
}

.step:not(.open) .st-t {
  color: var(--muted);
}

.st-sum {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-sum b {
  color: var(--ink);
  font-weight: var(--fw-bold);
}

/* margin-left:auto để nút luôn nằm sát mép phải, kể cả khi dòng tóm tắt đang trống
   (lúc bước đang mở) — nếu không nút bị dồn sát chữ tiêu đề */
.st-act {
  flex: 0 0 auto;
  margin-left: auto;
  /* Vùng bấm: trước đây chỉ cao 23px — dưới cả ngưỡng 24px của WCAG 2.2 */
  min-height: var(--ctl-h-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--navy);
  background: var(--coldbg);
  border: none;
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
}

.st-act:hover {
  background: var(--coldbg-hover);
}

.st-act.done-btn {
  background: var(--navy);
  color: var(--paper);
}

.st-act.done-btn:hover {
  background: #17594A;
}

.st-body {
  /* Padding ngang luôn bị zero hoá (bước mở ghi đè 0, bước đóng display:none)
     nên ghi thẳng 0 ở nguồn, khỏi cần cặp khai báo đối kháng cho .st-body */
  padding: 0 0 var(--sp-3);
  display: none;
  flex-direction: column;
  min-height: 0;
  gap: var(--sp-2);
}

.step.open>.st-head {
  padding-left: 0;
  padding-right: 0;
  /* Đệm dọc 4px hai đầu hàng tiêu đề bước mở — USER chốt trực tiếp trên DevTools 23-07-2026 */
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-1);
}

/* Thân bước phải NHẬN chiều cao dư, nếu không phần dư nằm chết bên dưới:
   giỏ 1 dòng mà bỏ trống 183px, còn dãy chip thì bị bóp dù dưới vẫn còn chỗ */
.step.open>.st-body {
  flex: 1 1 auto;
  min-height: 0;
}

.step.open .st-body {
  display: flex;
}

/* Tầng đáy sidebar — Tổng kết + Xuất file, không tham gia cuộn.
   Phải scope vào .builder: class "foot" còn được dùng cho vùng tổng tiền của phiếu. */
.builder>.foot {
  padding: var(--sp-2) var(--sp-4);
  padding-right: calc(var(--sp-4) + var(--sbw));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--paper);
}

.stage {
  padding: 22px;
  overflow: auto;
  max-height: calc(100vh - var(--menu-h));
  scrollbar-gutter: stable;
}

/* Dưới bề rộng thiết kế (452 sidebar + 844 phiếu + máng cuộn 15), lưới 2 cột không đủ chỗ:
   cột phải có sàn cứng nên tràn ra ngoài .app đang overflow:hidden và bị cắt không có
   cách nào cuộn tới, còn sidebar bị bóp về 0. Xếp chồng một cột và trả quyền cuộn cho trang. */
@media (max-width: 1311px) {
  .app {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .panel.builder {
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .steps {
    overflow: visible;
  }

  .stage {
    max-height: none;
    overflow-x: auto;
  }
}

.panel h2 {
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: .02em;
}

.panel>.grp {
  margin-bottom: 16px;
}

.grp .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.builder .cnt {
  flex: 0 0 auto;
  background: var(--coldbg);
  color: var(--navy);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* Khối Khách hàng: 4 hàng, mỗi hàng 1 lưới riêng */
.kh {
  display: grid;
  gap: var(--sp-2);
}

.kh .r {
  display: grid;
  gap: var(--sp-2);
}

.kh .r.a {
  grid-template-columns: 92px 1fr;
}

.kh .r.c {
  grid-template-columns: 1fr 108px 104px;
}

.kh .r.d {
  grid-template-columns: 1fr 1fr;
}

input,
select {
  font: inherit;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
}

/* input/select/button/textarea KHÔNG tự kế thừa font của cha → ép kế thừa để sidebar đồng nhất */
.panel input,
.panel select,
.panel button,
.panel textarea {
  font-family: inherit;
}

input:focus,
select:focus {
  outline: 2px solid var(--navy-head);
  outline-offset: -1px;
  border-color: var(--navy-head);
}

/* Ô nhập chung của sidebar báo giá. Các rule thành phần (.builder .otim/.qtyin/.dseg input)
   thắng rule này bằng ĐỘ ƯU TIÊN (0,2,1 > 0,1,1), không phụ thuộc thứ tự dòng trong file. */
.builder input,
.builder select {
  /* Mọi ô nhập cùng một chiều cao: trước đây hàng Điện thoại/Mã đơn cao 34px còn
     hàng Tên/Ngày cao 36px do chiều cao phụ thuộc nội dung từng loại ô */
  min-height: var(--ctl-h);
  font-size: var(--fs-base);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--field);
}

.builder input::placeholder {
  color: var(--placeholder);
}

label.mini {
  font-size: var(--fs-sm);
  color: var(--muted);
  display: block;
  margin-bottom: var(--sp-1);
  font-weight: var(--fw-bold);
}

/* Toolbar xuất (trang Giá niêm yết) */
.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.toolbar button {
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: var(--paper);
}

.btn-png {
  background: var(--exp-png);
}

.btn-pdf {
  background: var(--exp-pdf);
}

.hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}


/* Panel chọn dịch vụ + chế độ hiển thị cột (giaiemyet.php) — đặt TRƯỚC khối sidebar
   để rule ít ưu tiên hơn đứng trước, cascade không phụ thuộc thứ tự tình cờ */
.pick .it {
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.pick .it:hover {
  background: var(--coldbg-soft);
}

.pick .grp {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  padding: 6px 12px 2px;
  background: var(--paper-soft);
}

.pick .pr {
  color: var(--muted-soft);
  font-size: 11px;
}

.modepick {
  display: flex;
  gap: 6px;
  margin: 6px 0 2px;
}

.modepick button {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 7px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}

.modepick button.on {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}

/* Tiện ích khoảng cách */
.mb12 {
  margin-bottom: 12px;
}

/* ===================== MENU + DUAL-MODE UI ===================== */
.menu {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--navy);
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: var(--menu-h);
}

.menu .brand {
  font-weight: 800;
  font-size: 15px;
  margin-right: 14px;
  letter-spacing: .02em;
}

.menu a {
  color: var(--menu-link);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
}

.menu a.on {
  background: var(--paper);
  color: var(--navy);
}

.menu a:hover:not(.on) {
  background: var(--menu-hover-bg);
}

/* Nút chuyển gói đang xem (Lạnh / Nóng) — khay pill nằm cuối hàng tiêu đề */
.seg {
  margin-left: auto;
  display: flex;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-1);
  gap: var(--sp-1);
}

.seg button {
  border: none;
  background: transparent;
  /* Đệm dọc 1 bậc nhỏ: khay .seg đã có đệm riêng, nút dày thêm là kéo cao cả hàng tiêu đề */
  padding: var(--sp-1) var(--sp-3);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r-sm);
}

.seg button.on.cold {
  /* Navy-head thay blue — USER chốt 23-07-2026, đồng bộ với badge gói Lạnh trên phiếu */
  background: var(--navy-head);
  color: var(--paper);
}

.seg button.on.hot {
  background: var(--red);
  color: var(--paper);
}

/* Vùng làm việc: Tìm → ô nhập → Giỏ. Chỉ Giỏ co giãn + cuộn */
.work {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--sp-2);
  flex: 1 1 auto;
}

/* Thẻ nhập giữ đúng chiều cao nội dung — không giãn, không bị ép.
   Ép nó là ô Số lượng / nút Thêm vẽ tràn ra ngoài viền; thiếu chỗ thì tầng bước cuộn. */
.work #entry {
  flex: 0 0 auto;
}

.work #entry:empty {
  display: none;
}

.cartbox {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Đang chọn dịch vụ (thẻ nhập mở) thì ẩn hẳn Giỏ: nó là phần tử co giãn duy nhất
   trong vùng làm việc nên vừa chen chỗ vừa bị bóp lại, trong khi lúc này không cần xem giỏ */
.work:has(#entry:not(:empty)) .cartbox {
  display: none;
}

/* Ô tìm của sidebar báo giá — mốc neo của khay gợi ý (xem .qdrop).
   Tên riêng .otim, KHÔNG dùng chung với .qsearch của trang Giá niêm yết. */
/* Ô tìm MỘT MÌNH MỘT HÀNG — khay gợi ý neo bề rộng theo ô tìm nên rộng hết sidebar,
   tên dịch vụ không bị bóp (nút Thêm Tùy Chỉnh đã dời lên tiêu đề bước 2) */
.builder .otim input {
  width: 100%;
  /* Chiều cao chốt cứng: đệm dọc 12px đẩy ô lên 43px, không khớp bậc nào của thang */
  height: var(--ctl-h-lg);
  font-size: var(--fs-base);
  padding: 0 var(--sp-3);
  border: 1.5px solid var(--navy);
  border-radius: var(--r-md);
  background: var(--paper);
  anchor-name: --o-tim-dich-vu;
}

/* Khay gợi ý PHỦ LÊN nội dung, không nằm trong luồng: chiều cao khay đổi theo từng
   phím gõ, để nó chiếm chỗ là thẻ nhập và giỏ bị đẩy lên xuống liên tục.
   Neo vào ô tìm bằng anchor + position: fixed — absolute sẽ bị chính khung cuộn
   .steps cắt cụt ở màn thấp (đo: khung 260px thì khay 132px mất 28px cuối). */
.qdrop {
  position: fixed;
  position-anchor: --o-tim-dich-vu;
  top: calc(anchor(bottom) + 6px);
  left: anchor(left);
  right: anchor(right);
  position-try-fallbacks: flip-block;
  z-index: 5;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  /* Khay cao theo màn hình để hiện HẾT dịch vụ liên quan (USER chốt 23-07-2026) —
     quá dài mới cuộn dọc; cuộn ngang chặn hẳn vì mọi cột đã tự co/cắt bằng ellipsis */
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* Luôn chừa chỗ thanh cuộn: ít kết quả thì không có thanh cuộn, nhiều kết quả thì có —
     không chừa sẵn là 3 cột xê dịch 15px giữa hai trạng thái */
  scrollbar-gutter: stable;
  background: var(--paper);
}

/* Dự phòng cho trình duyệt chưa có Anchor Positioning: neo bằng absolute vào ô tìm.
   Khay có thể bị .steps cắt ở màn thấp — vẫn hơn là top/left/right rơi về auto và
   khay position:fixed bung ra vị trí tĩnh, che sai chỗ. */
@supports not (anchor-name: --o-tim-dich-vu) {
  .builder .otim {
    position: relative;
  }

  .qdrop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
  }
}

.qdrop:empty {
  display: none;
}

.qdrop .grp {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--fw-bold);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  background: var(--paper-soft);
}

/* Dòng gợi ý = lưới 3 cột CỐ ĐỊNH nên mọi dòng canh thẳng tuyệt đối:
   [tên co giãn, cắt bằng …] · [loại giá 124px] · [khoảng giá 136px, căn phải].
   Cột loại giá 68px vừa cho nhãn ngắn "Size" / "Theo SL"; cột tiền 136px vừa chuỗi dài
   nhất trong CSDL ("500.000 – 2.400.000đ" ≈ 133.6). Phần dư dồn hết cho cột TÊN để tên dài
   như "Giặt Thảm Trang Trí" hiện đủ chữ. */
.builder .qdrop .it {
  /* Nhóm reset bù UA stylesheet của button (dòng gợi ý giờ là <button> để bàn phím focus
     được) — đặt TRƯỚC vì font shorthand xoá font-size/line-height, các khai báo sau chốt lại */
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  line-height: var(--lh-base);
  display: grid;
  /* Nhãn loại 56px + giá 118px (đủ "500.000 – 2.400.000đ" ở cỡ 12px) — phần dư dồn
     cho cột TÊN; font hạ 1 bậc để tên dịch vụ dài hiện trọn (USER chốt 23-07-2026) */
  grid-template-columns: minmax(0, 1fr) 56px 118px;
  column-gap: var(--sp-1);
  align-items: center;
  /* Mọi dòng cùng một chiều cao, kể cả dòng dịch vụ nhập tay (ô loại giá rỗng) */
  min-height: calc(var(--ctl-h) + var(--sp-1));
  padding: var(--sp-2);
  font-size: var(--fs-sm);
  cursor: pointer;
  border-top: 1px solid var(--line-soft);
}

/* Dòng gợi ý đầu của mỗi nhóm: bỏ border-top để không kẻ đôi dưới tiêu đề nhóm.
   KHÔNG dùng :first-child — .it luôn đứng sau .grp nên không bao giờ là con đầu. */
/* Dòng đầu mỗi nhóm: giữ NGUYÊN 1px viền nhưng cho trong suốt — bỏ hẳn viền thì dòng
   này thấp hơn các dòng khác đúng 1px, phá cảm giác đều nhau */
.qdrop .grp+.it {
  border-top-color: transparent;
}

.qdrop .it:hover {
  background: var(--coldbg);
}

.qdrop .it .nm {
  font-weight: var(--fw-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ô loại giá: nowrap để nhãn không tự xuống dòng (trước đây bị gãy làm 2 dòng);
   justify-self: start để chip bám mép trái cột chứ không kéo dài hết cột */
/* Nhãn loại giá nhỏ hơn cột tiền 1 bậc — nhường bề ngang cho cột tên */
.qdrop .it .kd {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  justify-self: start;
  white-space: nowrap;
  text-align: center;
  /* Ô loại giá luôn cao đúng bằng lúc có chữ (12px × 1.45 + 2×4px đệm), kể cả khi rỗng
     (dịch vụ nhập tay) — nhờ vậy MỌI dòng gợi ý cao bằng nhau */
  min-height: calc(var(--fs-sm) * var(--lh-base) + 2 * var(--sp-1));
}

/* Dịch vụ nhập tay: ô loại giá rỗng — giữ chỗ cột nhưng không vẽ nền */
.qdrop .it .kd:empty {
  padding: 0;
  background: none;
}

.qdrop .it .kd.kt {
  background: var(--tag-kt-bg);
  color: var(--navy);
}

.qdrop .it .kd.sl {
  background: var(--amberbg);
  color: var(--amber);
}

.qdrop .it .pr {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.qcard {
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-3);
  background: var(--paper);
  /* KHÔNG ép chiều cao thẻ: thẻ SL và thẻ Nhập tay không có phần nào co được,
     ép vào là ô Số lượng / nút Thêm vẽ tràn ra ngoài viền. Thẻ cao bao nhiêu để
     nguyên bấy nhiêu, thiếu chỗ thì tầng bước cuộn. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.qcard .h {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-2);
}

/* Tên dịch vụ chiếm hết phần dư và cắt bằng dấu … — hàng tiêu đề phải LUÔN một dòng,
   nếu để nó xuống dòng thì thẻ nhập đổi chiều cao theo độ dài tên (đo được: 32px -> 81.25px) */
.qcard .h b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--navy);
  font-size: var(--fs-base);
}

.qcard .tag {
  flex: 0 0 auto;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
}

.qcard .tag.kt {
  color: var(--navy);
  background: var(--coldbg);
}

/* Bản duyệt chỉ vẽ thẻ THEO KÍCH THƯỚC; thẻ THEO SỐ LƯỢNG / NHẬP TAY dùng cùng
   ngôn ngữ (nền nhạt + chữ cùng tông) nhưng đổi sang tông hổ phách để phân biệt */
.qcard .tag.sl {
  color: var(--amber);
  background: var(--amberbg);
}

/* Nút Hủy cùng tông với nút Sửa của tiêu đề bước — nền lạnh chữ navy (USER chốt 23-07-2026) */
.qhuy {
  flex: 0 0 auto;
  min-height: var(--ctl-h-sm);
  padding: 0 var(--sp-3);
  border: none;
  background: var(--coldbg);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.qhuy:hover {
  background: var(--coldbg-hover);
}

.addbtn {
  background: var(--navy);
  color: var(--paper);
  border: none;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  cursor: pointer;
  white-space: nowrap;
}

/* Chưa chọn kích thước thì nút phải nhìn ra là chưa bấm được */
.addbtn:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.addbtn:not(:disabled):hover {
  background: #17594A;
}

/* Cặp nút nằm trên hàng tiêu đề thẻ — gọn theo chiều cao hàng, dạt về mép phải */
.qcard .h .addbtn {
  margin-left: auto;
  flex: 0 0 auto;
  min-height: var(--ctl-h-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
}

/* .sub đã đẩy hết phần dư sang phải — nút không được auto lần nữa, nếu không phần dư
   bị chia đôi và cặp nút tách rời khỏi dòng chữ phụ */
.qcard .h .sub+.addbtn {
  margin-left: 0;
}

/* Nhãn phụ trong ô nhập (Kích thước / Số lượng / Giảm giá) */
.qcard .h .sub {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-left: auto;
  white-space: nowrap;
}

/* Nhãn ô của thẻ nhập — chữ THƯỜNG, không viết hoa (USER chốt 23-07-2026) */
.lb {
  font-size: var(--fs-micro);
  color: var(--muted);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-1);
}

/* Bản duyệt để 4 cột vì chip ở đó chỉ in 1 giá. Chip thật in 2 giá "300.000/350.000"
   rộng ~104px ⇒ 4 cột tràn ngang 79px. Dùng 3 cột + minmax(0,1fr) để không bao giờ tràn. */
/* Xuất file: nhãn 56px + 3 nút viền, tô màu khi rê chuột.
   Cột nút 84px CỨNG vừa nhãn dài nhất "Excel ×2" — không dùng 1fr vì nút bị kéo
   dài hết cột trống trải, phần dư nhường lại cho khoảng thở bên phải */
.qexp {
  display: grid;
  grid-template-columns: 60px repeat(3, 1fr);
  gap: var(--sp-2);
  align-items: center;
}

.qexp .k {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  text-align: center;
}

.qexp .k.cold {
  color: var(--blue);
}

.qexp .k.hot {
  color: var(--hot);
}

.qexp .k.both {
  color: var(--navy);
}

.qexp button {
  min-height: var(--ctl-h-sm);
  border: 1px solid var(--line);
  background: var(--field);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-1);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--muted);
  /* Dùng grid có kích thước lõi cố định để khóa chết tọa độ icon */
  display: grid;
  grid-template-columns: 14px 34px;
  justify-content: center;
  align-items: center;
  text-align: left;
  gap: 4px;
  transition: all 0.2s ease;
}

.qexp button svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

.qexp button:hover {
  color: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.qexp button.e-png:hover svg,
.qexp button.e-pdf:hover svg,
.qexp button.e-xls:hover svg {
  opacity: 1;
}

.e-png:hover {
  background: var(--exp-png);
  border-color: var(--exp-png);
}

.e-pdf:hover {
  background: var(--exp-pdf);
  border-color: var(--exp-pdf);
}

.e-xls:hover {
  background: var(--exp-xls);
  border-color: var(--exp-xls);
}

/* Nút chính — cùng độ ưu tiên với ".qexp button" mới thắng được nền trắng.
   Chỉ trải đúng 3 cột nút (cột 2→hết), KHÔNG ăn sang cột nhãn: rộng bằng đúng khối
   nút bên trên, không thành dải dài hết sidebar */
.qexp button.e-save {
  min-height: var(--ctl-h-lg);
  grid-column: 2 / -1;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
  grid-template-columns: 14px max-content;
}

.qexp button.e-save:hover {
  background: var(--navy-head);
  border-color: var(--navy-head);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.qchips {
  /* Chừa sẵn 2 hàng chip: dịch vụ 1 hàng và dịch vụ 2 hàng không làm khối dưới nhảy */
  min-height: calc(2 * var(--chip-h) + var(--sp-2));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  /* Hiện HẾT chip, không chặn chiều cao và không cuộn riêng: kẹt cứng thì phải cuộn
     trong một khung bé xíu, còn co theo chỗ trống thì màn thấp bóp chip về 0. */
  overflow-x: hidden;
}

.qchip {
  min-height: var(--chip-h);
  /* width/font/color bù phần UA stylesheet của button — chip giờ là <button> để bàn phím
     focus và chọn được, diện mạo giữ nguyên */
  width: 100%;
  border: 1px solid var(--line);
  background: var(--field);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-1);
  font: inherit;
  font-size: var(--fs-sm);
  color: inherit;
  text-align: center;
  line-height: var(--lh-tight);
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}

.qchip:hover {
  border-color: var(--navy-head);
}

.qchip .sz {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

.builder .qchip .pr {
  font-size: var(--fs-micro);
  margin-top: 0;
}

.qchip .pr .l {
  color: var(--blue);
  font-weight: var(--fw-bold);
}

.qchip .pr .n {
  color: var(--hot);
  font-weight: var(--fw-bold);
}

.qchip.on {
  background: var(--navy);
  border-color: var(--navy);
}

.qchip.on .sz {
  color: var(--paper);
}

.qchip.on .pr .l {
  color: var(--chip-on-lanh);
}

.qchip.on .pr .n {
  color: var(--chip-on-nong);
}

/* Hàng gộp: [Số lượng] | [Giảm giá] — tiết kiệm 1 hàng chiều cao */
.qrow {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  align-items: end;
}

/* Nhãn "Giảm giá cho dịch vụ này" căn GIỮA trên cụm 2 ô %/đ (USER chốt 23-07-2026);
   cột giảm giá là con thứ 2 của .qrow — cấu trúc cố định do qrowHtml dựng */
.qrow > div:last-child > .lb {
  text-align: center;
}

/* Nhãn "Giảm giá tổng hóa đơn" ở tầng đáy cũng căn GIỮA trên cụm 2 ô — cùng nhịp
   với khối giảm giá của thẻ nhập */
.giamtong .mini {
  text-align: center;
}

/* Hàng 3 ô giá (thẻ NHẬP TAY): Giá gốc | Lạnh | Nóng */
.row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

/* Hàng [Tên dịch vụ | Đơn vị] của form tùy chỉnh — dùng CÙNG lưới 3 cột với hàng giá
   (.row3): ô Tên span 2 cột = đúng bề rộng Giá gốc + Giá lạnh (kể cả khe giữa),
   ô Đơn vị = cột 3 = đúng bề rộng Giá nóng. Mỗi ô mang nhãn riêng ngay trên nó. */
.rowten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.rowten > :first-child {
  grid-column: span 2;
}

.builder .qtyin input {
  width: 100%;
  /* min-height bằng đúng chiều cao mong muốn — .builder input đặt min-height 36px,
     không ghi đè thì used height = max(34, 36) và ô lệch 2px với .dsplit cùng hàng */
  height: var(--ctl-h-xs);
  min-height: var(--ctl-h-xs);
  text-align: center;
  font-weight: var(--fw-bold);
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--field);
}

/* Ô số có 2 nút tăng/giảm custom BÊN TRONG (thẻ nhập + giỏ) — spinner native là một
   widget liền khối không tách được, 2 mũi tên dính nhau dễ bấm lộn: thay bằng 2 nút
   rời cách nhau khe --sp-1, ẩn spinner gốc */
.spinbox {
  position: relative;
  display: block;
}

.builder .spinbox input {
  padding-right: 24px;
  -moz-appearance: textfield;
}

.builder .spinbox input::-webkit-outer-spin-button,
.builder .spinbox input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.spinbox .spinbtns {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 2px;
  width: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.spinbox .spinbtns button {
  flex: 1 1 0;
  padding: 0;
  border: none;
  border-radius: var(--r-xs);
  background: var(--chipbg);
  color: var(--navy);
  font-size: var(--fs-micro);
  line-height: 1;
  cursor: pointer;
}

.spinbox .spinbtns button:hover {
  background: var(--coldbg);
}


.tier {
  background: var(--tier-bg);
  border: 1px solid var(--tier-line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-base);
  margin-top: var(--sp-3);
}

.tier .big {
  font-weight: var(--fw-bold);
  color: var(--green);
  font-size: var(--fs-md);
}

.tier .form {
  line-height: var(--lh-base);
  color: var(--muted);
  margin-top: var(--sp-1);
  font-variant-numeric: tabular-nums;
}

.tier .bars {
  display: flex;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}

.tier .bars .t {
  font-size: var(--fs-micro);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-2);
  color: var(--muted);
}

.tier .bars .t.on {
  background: var(--amber);
  color: var(--paper);
  border-color: var(--amber);
  font-weight: var(--fw-bold);
}


/* Ô GIẢM tách đôi: trái gõ % — phải gõ số tiền. Gõ ô nào thì ô đó có hiệu lực. */

.panel.builder input:focus,
.panel.builder select:focus {
  outline: none;
  border-color: var(--navy-head);
  background: var(--paper);
  box-shadow: var(--ring);
}

/* input/select/button KHÔNG kế thừa line-height của cha — phải ghi thẳng, nếu không
   16 phần tử vẫn nằm ở line-height: normal và nhịp đứng của sidebar không đồng nhất */
.panel.builder :is(input, select, button, textarea, option) {
  line-height: var(--lh-tight);
}

/* MỘT hệ focus cho toàn sidebar: nút, chip, dòng gợi ý, tiêu đề bước — sau khi .qchip,
   .qdrop .it và tiêu đề bước (.st-toggle) đã là <button> thật, nhóm rút về mỗi button
   nên độ ưu tiên hạ còn 0,3,1 và rule chuyên biệt .panel.builder .st-toggle:focus-visible
   (0,4,0) không bị đè nữa.
   (Ô nhập/select đã có hiệu ứng focus bóng đổ var(--ring) được thiết kế riêng nên loại ra khỏi nhóm outline). */
.panel.builder button:focus-visible {
  outline: 2px solid var(--navy-head);
  outline-offset: 2px;
}

.dsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--field);
}

.dsplit:focus-within {
  border-color: var(--navy-head);
  box-shadow: var(--ring);
}

.dseg {
  display: flex;
  align-items: center;
  height: var(--ctl-h-xs);
  overflow: hidden;
}

.dseg+.dseg {
  border-left: 1px solid var(--line);
}

/* Nhãn đơn vị nằm NGOÀI ô nhập, dựng thành khối nền riêng ở mép phải */
.dseg .u {
  flex: 0 0 auto;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 30px;
  padding: 0 var(--sp-2);
  background: var(--chipbg);
  border-left: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--muted);
}

.panel.builder .dseg input {
  border: none;
  outline: none;
  /* Bỏ bo góc kế thừa từ .builder input: ô này không có viền riêng, để lại thì outline
     focus vẽ theo góc bo và thành viền lồng viền bên trong khung .dsplit */
  border-radius: 0;
  /* Cao hết ô: trước đây chỉ 16.3px trong khung 34px nên bấm vào khoảng trống không focus được */
  align-self: stretch;
  /* .builder input đặt min-height 36px — không reset thì ô cao 36px trong khung .dseg
     34px có overflow:hidden và bị cắt 2px */
  min-height: 0;
  height: 100%;
  width: 100%;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  /* Số gõ vào căn GIỮA ô — cân với nhãn căn giữa phía trên (USER chốt 23-07-2026) */
  text-align: center;
  padding: 0 var(--sp-2);
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
}

.builder .dseg input::-webkit-outer-spin-button,
.builder .dseg input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.dseg.on {
  background: var(--coldbg-soft);
}

.dseg.on .u {
  color: var(--navy);
}

/* Chừa sẵn đúng 1 dòng: nội dung dòng này bật/tắt theo từng phím gõ ở ô Giảm giá,
   để nó co lại là cả cột dịch 17px mỗi lần gõ */
/* Dòng gợi ý giảm giá nằm CUỐI thẻ nhập. Nút Thêm đã chuyển lên hàng tiêu đề nên khi
   dòng này rỗng, chỗ chừa sẵn thành khoảng trắng thừa sát đáy thẻ → rỗng thì bỏ hẳn. */
.hintline {
  line-height: var(--lh-base);
  font-size: var(--fs-micro);
  color: var(--muted);
  margin-top: var(--sp-1);
}

.hintline:empty {
  display: none;
}


.qcart {
  flex: 1;
  /* 60px = 1 ô nhập 36 + 2 lần đệm 12 — giữ nguyên giá trị cũ, chỉ đổi cách biểu diễn */
  min-height: calc(var(--ctl-h) + 2 * var(--sp-3));
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.qcart .ch,
.qcart .ci {
  display: grid;
  /* Dịch vụ | Size | TT Lạnh | TT Nóng | SL | nút xoá.
     column-gap tách các cột: không có nó thì ô SL dính sát số tiền còn khoảng trống
     lại dồn hết vào cột tên bên trái.
     Cột SL nới 40→48px cho nút tăng/giảm 24px, bù lại từ cột Size 56→48px:
     tổng cột cố định giữ nguyên nên cột tên dịch vụ không hẹp đi */
  grid-template-columns: minmax(0, 1fr) 48px 72px 72px 48px 24px;
  column-gap: var(--sp-2);
  align-items: center;
}

.qcart .ch {
  background: var(--field);
  color: var(--muted);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  padding: var(--sp-2) var(--sp-3);
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--line-soft);
}

.qcart .ch span {
  text-align: right;
}

.qcart .ch span:first-child {
  text-align: left;
}

/* Cột Size căn trái cho khớp dữ liệu, cột SL căn giữa cho khớp bộ đếm bên dưới */
.qcart .ch span:nth-child(2) {
  text-align: left;
}

.qcart .ch span:nth-child(5) {
  text-align: center;
}

.qcart .ch .cold {
  color: var(--blue);
}

.qcart .ch .hot {
  color: var(--hot);
  transform: translateX(2px);
}

.qcart .ci {
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-base);
}

/* Dòng ngay dưới header: header đã có border-bottom, bỏ border-top để không kẻ đôi.
   KHÔNG dùng :first-of-type — header .ch cũng là div nên không .ci nào khớp được. */
.qcart .ch+.ci {
  border-top: none;
}

/* Ô tên dịch vụ là grid item: min-width mặc định là auto nên ô KHÔNG co dưới bề rộng
   nội dung — không khoá thì tên dài sẽ đẩy tràn sang cột bên cạnh */
.qcart .ci .nm {
  min-width: 0;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Bấm vào tên là mở ô sửa nhãn — con trỏ text báo hiệu vùng bấm được */
  cursor: text;
}

/* Cột Size — chữ phụ, tách khỏi tên dịch vụ */
.qcart .ci .sz {
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cột hành động: nút Sửa tên và nút Xoá xếp DỌC nên cả cụm chỉ rộng 24px, đúng bằng
   cột cũ của nút ✕ — tên/size/tiền đều đã sát mép chữ, không còn pixel nào để nhường. */
.qcart .ci .act {
  display: grid;
  justify-items: center;
  align-content: center;
  row-gap: var(--sp-1);
}

/* Cụm 2 nút Sửa/Xóa + khe cộng lại = ĐÚNG chiều cao ô SL bên cạnh (--ctl-h-sm):
   mỗi nút = (32 − khe 4) / 2 = 14px — hai cột cao bằng nhau, mắt nhìn dễ chịu
   (USER chốt 23-07-2026) */
.qcart .ci .act button {
  width: var(--tap-min);
  height: calc((var(--ctl-h-sm) - var(--sp-1)) / 2);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--chipbg);
  color: var(--muted-faint);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
}

.qcart .ci .ed:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.qcart .ci .x:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Ô sửa tên mượn chỗ cột Size cho đủ bề ngang gõ; cao 24px < 32px của cột hành động
   nên chiều cao dòng KHÔNG đổi lúc mở ô, các dòng dưới không bị đẩy */
.qcart .ci.dangsua .sz {
  display: none;
}

.qcart .ci .ednm {
  grid-column: 1 / 3;
  min-width: 0;
  /* Phải ghi đè min-height 36px của .builder input, nếu không dòng giỏ cao vọt 48→52 */
  height: var(--ctl-h-sm);
  min-height: var(--ctl-h-sm);
  padding: 0 var(--sp-1);
  border: 1px solid var(--navy);
  border-radius: var(--r-sm);
  background: var(--paper);
  font: inherit;
  font-weight: var(--fw-bold);
}

.qcart .ci .sl {
  text-align: center;
}

/* Ô SL của giỏ — input số cùng kiểu ô giá, nút tăng/giảm native BÊN TRONG ô
   (USER chốt 23-07-2026, thay bộ đếm 2 nút xếp dọc cũ). Phải ghi đè min-height 36px
   của .builder input, không thì dòng giỏ bị đội cao. */
.qcart .ci .slin {
  width: 100%;
  height: var(--ctl-h-sm);
  min-height: var(--ctl-h-sm);
  /* Phải chừa 20px phải cho cột nút tăng/giảm bên trong (thắng .builder .spinbox input
     bằng độ ưu tiên nên ghi thẳng ở đây) */
  padding: 0 20px 0 var(--sp-1);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.qcart .ci .tl {
  text-align: right;
  color: var(--blue);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.qcart .ci .tn {
  text-align: right;
  color: var(--hot);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.qcart .empty {
  line-height: var(--lh-base);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-base);
  padding: var(--sp-4);
  text-align: center;
}

.qcart .empty .ic {
  font-size: var(--fs-xl);
  opacity: .5;
}

/* Tổng kết: [VAT] [Gói Lạnh] [Gói Nóng] — nền dịu, chữ màu */
.sum {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: var(--sp-2);
  align-items: stretch;
}

/* Cột VAT chỉ đệm TRÊN (khớp nhãn thẻ), không đệm dưới — ô nhập 32px đã đủ cao,
   đệm cả 2 đầu là kéo cao cả hàng tổng kết vô ích */
.sum .vat {
  display: flex;
  flex-direction: column;
  /* Căn giữa dọc để đồng bộ hài hòa với 2 khối Gói Lạnh/Nóng */
  justify-content: center;
  align-items: center;
}

/* Cột giữ 60px cho vừa nhãn "% VAT" trên một dòng, nhưng ô nhập thì thu lại
   vừa con số và căn giữa — VAT tối đa 3 chữ số, ô rộng hết cột thành cái khung dài
   trống trải (USER chốt 23-07-2026).
   Nợ kỹ thuật: Thêm padding nhỏ để số không bị kẹp */
.panel.builder .sum .vat input {
  height: var(--ctl-h-sm);
  width: 48px;
  padding: 0 var(--sp-1);
  text-align: center;
}

/* Rule TRẠNG THÁI của ô nhập sidebar. Đặt SAU toàn bộ rule tĩnh của ô nhập
   (.builder .otim/.qtyin/.dseg input, .sum .vat input) và dùng .panel.builder (0,3,1)
   để thắng cả bằng độ ưu tiên lẫn thứ tự — không rule tĩnh nào che được trạng thái focus. */


/* Ô % và ô đ nằm TRONG khung .dsplit — viền + ring do .dsplit vẽ.
   Chặn nền trắng và ring riêng của .panel.builder input:focus (0,3,1) nên phải cao hơn nó. */
.panel.builder .dseg input:focus {
  background: transparent;
  box-shadow: none;
}

/* Điều khiển tí hon: .act chỉ rộng 24px nên vòng focus offset dương tràn sang cột
   bên cạnh; nút tăng/giảm .spinbtns nằm TRONG ô nhập nên vòng dương đè lên viền ô.
   Cả hai đều vẽ vòng vào trong. */
.panel.builder :is(.qcard, .qcart) :is(.act, .spinbtns) button:focus-visible {
  outline-offset: -2px;
}

/* Cặp ô Giảm giá đã có vòng focus ở cấp khung .dsplit (:focus-within) — ô con vẽ thêm
   outline sẽ thành viền lồng viền và bị .dseg/.dsplit cắt cụt.
   Phải đủ 5 lớp class để thắng rule focus chung — :is(...) lấy độ ưu tiên CAO NHẤT
   trong nhóm (.qdrop .it) nên rule chung nặng 0,5,0. */
.panel.builder .dsplit .dseg input:focus-visible {
  outline: none;
}


/* Nội dung thẻ căn giữa dọc để văn bản nằm cân đối ngay chính giữa khối */
.sum .b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3);
  /* transparent thay vì để trống: thiếu border-color thì viền rơi về currentColor (màu chữ) */
  border: 1px solid transparent;
}

.builder .sum .cold {
  background: var(--coldbg);
  border-color: var(--coldbg-line);
}

.builder .sum .hot {
  background: var(--hotbg);
  border-color: var(--hotbg-line);
}

/* Nhãn cột VAT đồng bộ với nhãn 2 thẻ — không sửa label.mini vì nhãn Ngày báo giá /
   Ngày thi công ở bước 1 dùng chung rule đó */
.sum .vat .mini {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-bottom: var(--sp-1);
}

.sum .b .t {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  line-height: 1;
}

.sum .cold .t {
  color: var(--blue);
}

.sum .hot .t {
  color: var(--hot);
}

.sum .b .v {
  /* Bậc md 14px vừa đủ lớn, hài hòa với khung mà không quá to dị hợm như 16px */
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  color: var(--ink);
  line-height: 1;
}


/* ===================== GIÁ NIÊM YẾT (giaiemyet.php) ===================== */
/* Khung #niemyet kế thừa hệ CSS phiếu báo giá #phieu — cùng font/width/bar/header/title/table/footer */
#niemyet {
  width: 800px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'BeVietnamPro', 'BeVietnamPro Fallback', sans-serif;
  box-shadow: 0 10px 30px rgba(26, 50, 96, .18);
  font-variant-numeric: tabular-nums;
  margin: 0 auto;
}

#niemyet .topbar {
  height: 8px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-head) 55%, var(--red) 100%);
}

#niemyet .note {
  padding: 8px var(--phieu-pad) 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
  text-align: center;
}

#niemyet .note b {
  color: var(--navy);
}

#niemyet .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px var(--phieu-pad) 16px;
}

#niemyet .head img {
  height: 54px;
  display: block;
}

#niemyet .head .co {
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

#niemyet .head .co .nm {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}

#niemyet .head .co b {
  color: var(--ink);
  font-weight: 600;
}

#niemyet .band {
  text-align: center;
  font-weight: 800;
  color: var(--navy);
  font-size: 25px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 0 9px;
}

#niemyet .svc {
  text-align: center;
  padding: 0 var(--phieu-pad) 8px;
}

#niemyet .svc h2 {
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
}

#niemyet .svc .meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

#niemyet table {
  width: calc(100% - 2 * var(--phieu-pad));
  margin: 12px var(--phieu-pad);
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;
}

#niemyet th,
#niemyet td {
  border: 1px solid var(--line);
  padding: 10px;
}

#niemyet thead th {
  background: var(--navy-head);
  color: var(--paper);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
}

#niemyet tbody td {
  text-align: right;
}

#niemyet th.n,
#niemyet td.n {
  text-align: right;
}

#niemyet td.kt {
  text-align: left;
  font-weight: 600;
}

#niemyet .dvt {
  width: 12.5%;
}

#niemyet td.dvt {
  text-align: center;
}

#niemyet tbody tr:nth-child(even) {
  background: var(--zebra);
}

#niemyet td.lanh {
  color: var(--blue);
  font-weight: 700;
}

#niemyet td.nong {
  color: var(--hot);
  font-weight: 700;
}

#niemyet td.empty {
  color: var(--muted-soft);
}


#niemyet .footbar {
  background: var(--navy);
  color: var(--paper);
  text-align: center;
  font-size: 12px;
  padding: 12px;
}


/* ===================== BẢNG GIÁ (banggia.php) — scope #bg ===================== */

#bg .wrap {
  max-width: 1040px;
  margin: 18px auto;
  padding: 0 16px 60px;
}

/* Hộp hướng dẫn thân thiện */

/* Nhóm (chip navy) + card dịch vụ (đổ bóng) */
#bg .nhom>.h {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: var(--paper);
  font-weight: 800;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 8px;
  margin: 22px 0 10px;
  letter-spacing: .02em;
}

#bg .nhom>.h .cnt {
  background: rgba(255, 255, 255, .18);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 11.5px;
  font-weight: 700;
}

#bg .dv {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(26, 50, 96, .06);
}

#bg .dv>.h {
  background: var(--chipbg);
  padding: 11px 16px;
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#bg .dv>.h .dv-i {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 400;
}

#bg .dv>.h .manual {
  font-size: 11px;
  background: var(--hot);
  color: var(--paper);
  padding: 2px 9px;
  border-radius: 6px;
  font-weight: 700;
  margin-left: auto;
}

/* Bảng: zebra + hover + giãn */
#bg table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

#bg table th,
#bg table td {
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  text-align: left;
}

#bg thead th {
  background: var(--bg-thead);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  font-weight: 700;
  border-top: none;
}

#bg tbody tr:nth-child(even) td {
  background: var(--zebra);
}

#bg tbody tr:hover td {
  background: var(--coldbg-soft);
}

#bg th.num,
#bg td.num {
  text-align: right;
  width: 170px;
}

#bg td.lanh {
  color: var(--blue);
  font-weight: 700;
}

#bg td.nong {
  color: var(--hot);
  font-weight: 700;
}

#bg th.act,
#bg td.act {
  text-align: center;
  width: 190px;
  white-space: nowrap;
}

#bg td.kt {
  font-weight: 600;
}

#bg .empty-td {
  color: var(--muted);
  font-size: 13px;
}

/* Cảnh báo Nóng ≤ Lạnh — phải là "tbody tr.warn td" (1,1,3) mới thắng nổi zebra
   "tbody tr:nth-child(even) td" (1,1,3, đứng trước); viết "tr.warn td" (1,1,2) thì hàng
   cảnh báo ở vị trí CHẴN mất nền vàng. */
#bg tbody tr.warn td {
  background: var(--warn);
}

#bg tr.warn td:first-child {
  box-shadow: inset 3px 0 0 var(--red);
}

#bg tr.warn .flag {
  color: var(--red);
  font-weight: 800;
  font-size: 12px;
  margin-left: 6px;
}

/* Nút hành động (icon + nhãn chữ) */
#bg .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  border: 1px solid var(--navy);
  color: var(--navy);
  background: rgba(34, 67, 126, .08);
  transition: background-color .15s, border-color .15s, color .15s;
  margin: 0 2px;
  vertical-align: middle;
}

#bg .btn svg {
  width: 15px;
  height: 15px;
}

#bg .btn:hover {
  background: var(--navy);
  color: var(--paper);
}

#bg .btn.danger {
  color: var(--red);
  border-color: var(--danger-line);
  background: rgba(204, 32, 39, .08);
}

#bg .btn.danger:hover {
  background: var(--red);
  color: var(--paper);
}

#bg .btn.save {
  color: var(--green);
  border-color: var(--green-line);
  background: rgba(31, 157, 85, .10);
  font-size: 15px;
  font-weight: 800;
}

#bg .btn.save:hover {
  background: var(--green);
  color: var(--paper);
}

#bg .btn.cancel {
  font-size: 14px;
  font-weight: 800;
}

@media (max-width:640px) {
  #bg .btn .lbl {
    display: none;
  }

  #bg .btn {
    padding: 0 10px;
  }

  #bg th.act,
  #bg td.act {
    width: 96px;
  }
}

/* Ô nhập khi sửa */
#bg td input {
  width: 130px;
  padding: 5px 7px;
  border: 1px solid var(--navy-head);
  border-radius: 5px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#bg td input.kt {
  text-align: left;
  width: 150px;
}

/* Toast */
#bg .toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--paper);
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 13px;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  z-index: 20;
}

#bg .toast.on {
  opacity: 1;
}

#bg .menu input {
  margin-left: auto;
  width: 210px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

#bg .menu input::placeholder {
  color: var(--menu-placeholder);
}

/* ============ PHIẾU BÁO GIÁ — 2 khổ cố định 1:1 (WYSIWYG, font Be Vietnam Pro) ============ */
#phieu {
  width: 800px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'BeVietnamPro', 'BeVietnamPro Fallback', sans-serif;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(26, 50, 96, .18);
  font-variant-numeric: tabular-nums;
  margin: 0 auto;
}

#phieu .bar {
  height: 8px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-head) 55%, var(--red) 100%);
}

#phieu .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px var(--phieu-pad) 16px;
}

#phieu .hd img {
  height: 54px;
  display: block;
}

#phieu .hd .co {
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  padding-top: 6px;
}

#phieu .hd .co .nm {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}

#phieu .hd .co b {
  color: var(--ink);
  font-weight: 600;
}

#phieu .info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 var(--phieu-pad);
}

#phieu .box {
  border: var(--phieu-line);
  border-radius: 8px;
  overflow: hidden;
}

#phieu .box .tag {
  background: var(--navy);
  color: var(--paper);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 14px;
}

#phieu .box .bd {
  padding: 12px 14px;
}

#phieu .box .row {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 2.1;
}

#phieu .box .row .k {
  color: var(--muted);
  width: 100px;
  flex: 0 0 100px;
}

#phieu .box .row .v {
  font-weight: 600;
}

#phieu .box .row .badge {
  background: var(--red);
  color: var(--paper);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 4px;
  letter-spacing: .03em;
}

#phieu .box .row .badge.cold {
  background: var(--navy-head);
}

#phieu .box.order {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Đẩy nội dung ô phải sang phải một chút (khoảng giữa đang trống) */
#phieu .box.order .bd {
  padding-left: 34px;
}

#phieu .title {
  text-align: center;
  font-weight: 800;
  color: var(--navy);
  font-size: 25px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 18px 0 14px;
}

#phieu .tbl {
  padding: 0 var(--phieu-pad);
}

#phieu .tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

#phieu .tbl table th,
#phieu .tbl table td {
  border: var(--phieu-line);
  padding: 10px;
}

#phieu .tbl thead th {
  background: var(--navy-head);
  color: var(--paper);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
}

#phieu .tbl table tbody td {
  text-align: right;
}

#phieu .tbl tbody td.l {
  text-align: left;
}

#phieu .tbl tbody td.c {
  text-align: center;
}

/* Bề ngang 8 cột của bảng phiếu — NGUỒN DUY NHẤT, trước đây viết inline trong index.php */
#phieu .tbl thead th:nth-child(1) {
  width: 34px;
}

#phieu .tbl thead th:nth-child(2) {
  text-align: left;
}

#phieu .tbl thead th:nth-child(3) {
  width: 42px;
}

#phieu .tbl thead th:nth-child(4) {
  width: 46px;
}

#phieu .tbl thead th:nth-child(5) {
  width: 90px;
}

#phieu .tbl thead th:nth-child(6),
#phieu .tbl thead th:nth-child(7),
#phieu .tbl thead th:nth-child(8) {
  width: 96px;
}

/* Dòng "Chưa có dịch vụ" — dùng chung cho bản dựng sẵn ở index.php và bản JS dựng lại */
#phieu .tbl tbody td.trong {
  color: var(--phieu-trong);
  height: 40px;
}

#phieu .tbl tbody tr:nth-child(even) {
  background: var(--zebra);
}

#phieu .svc {
  font-weight: 600;
}

/* Chữ "(kích thước)" đứng SAU span .svc, là anh em chứ không phải con — dùng dấu + */
#phieu .svc+small {
  color: var(--muted);
  font-weight: 400;
}

#phieu .orig {
  color: var(--muted);
}

#phieu .deal {
  color: var(--red);
  font-weight: 700;
}

/* Vùng dưới: trái = Gói dịch vụ (trên) + ghi chú/hotline (dưới); phải = tổng tiền */
#phieu .foot {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: var(--trow) var(--trow) var(--trow) auto;
  column-gap: 26px;
  row-gap: 5px;
  padding: 0 var(--phieu-pad) 4px;
  margin-top: 5px;
}

#phieu .foot .foot-left {
  grid-column: 1;
  grid-row: 1 / 5;
  display: flex;
  flex-direction: column;
  /* Khoảng cách giữa danh sách gói và khối ghi chú/hotline */
  gap: 11px;
}

#phieu .foot .note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
}

#phieu .foot .note b {
  color: var(--navy);
}

#phieu .foot .pack .h {
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  /* Tâm chữ = padding-top + line-height/2 = 3 + (--trow − 6)/2 = --trow/2
     → "Gói dịch vụ:" thẳng hàng tuyệt đối với "Tổng cộng" (.tr cao --trow).
     Hộp thấp hơn --trow đúng 3px → danh sách bên dưới sát lên 3px, không dùng margin âm. */
  padding-top: 3px;
  line-height: calc(var(--trow) - 6px);
  margin-bottom: 0;
}

#phieu .foot .pack ul {
  list-style: none;
  font-size: 12.5px;
  line-height: 1.95;
}

#phieu .foot .pack li::before {
  content: "–";
  color: var(--red);
  font-weight: 700;
  margin-right: 7px;
}

#phieu .foot .tr {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  border-bottom: var(--phieu-line);
}

#phieu .foot .tr .k {
  color: var(--muted);
  font-weight: 600;
}

#phieu .foot .tr .v {
  font-weight: 700;
}

#phieu .foot .pay {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--navy);
  color: var(--paper);
  border-radius: 8px;
  padding: 13px 14px;
}

#phieu .foot .pay .k {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#phieu .foot .pay .v {
  font-size: 20px;
  font-weight: 800;
}

#phieu .foot .tr.uu .k,
#phieu .foot .tr.uu .v {
  color: var(--red);
}

#phieu .foot .r1 {
  grid-row: 1;
}

#phieu .foot .r2 {
  grid-row: 2;
}

#phieu .foot .r3 {
  grid-row: 3;
}


/* Ngắt trang khi ghép 2 phiếu Lạnh + Nóng vào một file PDF (app.js gọi khi xuất) */
.pagebreak {
  break-before: page;
}

#phieu .botpad {
  height: 18px;
}

#phieu .footbar {
  background: var(--navy);
  color: var(--paper);
  text-align: center;
  font-size: 12px;
  padding: 12px;
}


@media print {

  /* .panel.builder đặt display:grid với độ ưu tiên 0,2,0 — phải liệt kê đúng nó,
     nếu chỉ ghi .panel (0,1,0) thì sidebar vẫn bị in ra cùng phiếu */
  .menu,
  .panel,
  .panel.builder {
    display: none;
  }

  .app {
    display: block;
    height: auto;
    overflow: visible;
  }

  .stage {
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  body {
    background: var(--paper);
  }

  #phieu {
    box-shadow: none;
  }
}