/*** ======================================================================
  QUOTE — Form báo giá tương tác
  --------------------------------------------------------------------------
  Bổ sung cho hệ thống thiết kế sẵn có của site (style.css): dùng lại biến
  màu / font / bo góc gốc (--color1, --color3, --curve10, --Open-Sans...) và
  biến dark theme (--dt-*) để trang là MỘT PHẦN của website.

  Hai nhóm class:
   1) .qb-*   Giao diện chọn dịch vụ + bảng tóm tắt (khách nhìn thấy & thao tác)
   2) .exp-*  Bản mẫu xuất file (nằm ngoài khung nhìn, html2canvas/jsPDF chụp
              lại nhóm này) — dựng theo mẫu Google Sheet: header xanh xám,
              dòng CHI PHÍ xanh lá nhạt ở cuối bảng.

  Màu & chế độ tối: mọi màu của .qb-* đi qua biến --qb-* ở khối ngay dưới,
  dark theme chỉ cần đổi giá trị biến (không viết lại từng selector).
=========================================================================== ***/

/* ===== 0. BIẾN MÀU (sáng / tối) ===== */
.qb-section,
.qb-mobile-bar,
.qb-modal{
  --qb-ink: var(--color1);            /* chữ chính */
  --qb-muted: #5d6877;                /* chữ phụ (đạt tương phản 4.5:1 trên nền trắng) */
  --qb-surface: #fff;                 /* nền thẻ / ô nhập */
  --qb-soft: var(--color24);          /* nền dịu: ô nhập, nút bấm */
  --qb-line: var(--color25);          /* viền mảnh */
  --qb-line-strong: #cdd3dd;          /* viền ô chọn, đường chấm dẫn */
  --qb-page: #fff;                    /* nền trang (khoét lỗ "vé" ở bảng tóm tắt) */
  --qb-shadow: rgba(16, 1, 148, .12);
  --qb-edge: rgba(24, 32, 56, .16);   /* bóng mờ ở mép vùng cuộn */
  --qb-warm: #9a6700;                 /* số tiền phụ phí / ghi chú cần chú ý */
  --qb-kicker: #c93d1b;
  --qb-head-bg: var(--color1);        /* đầu bảng tóm tắt */
  --qb-head-ink: #fff;
  --qb-on-accent: #1b2230;            /* chữ trên nút nền vàng / mint (đạt ~8:1, giữ nguyên ở cả 2 theme) */
}
[data-theme="dark"] .qb-section,
[data-theme="dark"] .qb-mobile-bar,
[data-theme="dark"] .qb-modal{
  --qb-ink: var(--dt-text);
  --qb-muted: var(--dt-text-muted);
  --qb-surface: var(--dt-surface);
  --qb-soft: var(--dt-surface2);
  --qb-line: var(--dt-border-soft);
  --qb-line-strong: var(--dt-border);
  --qb-page: var(--dt-bg);
  --qb-shadow: rgba(0, 0, 0, .5);
  --qb-edge: rgba(0, 0, 0, .55);
  --qb-warm: #ffc857;
  --qb-kicker: #ff8a6f;
  --qb-head-bg: var(--dt-surface2);
  --qb-head-ink: var(--dt-text);
}

/* ===== 1. NỀN TẢNG: gạt bỏ những quy tắc toàn site không hợp với form ===== */
.qb-section [hidden]{display: none !important;}
.qb-section p{opacity: 1; margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--qb-muted);}
/* site đặt "transition: all .3s linear" cho span/label/input/button/i -> chặn các chuyển động ngoài ý muốn,
   rồi chỉ bật lại đúng chỗ cần ở từng thành phần bên dưới */
.qb-section span,
.qb-section label,
.qb-section input,
.qb-section button,
.qb-section i,
.qb-mobile-bar span,
.qb-mobile-bar button,
.qb-modal span,
.qb-modal button,
.qb-modal i{transition: none;}
/* nút .thm-btn giữ hiệu ứng rê chuột của site (màu chữ / viền / bóng) nhưng KHÔNG animate outline -> vòng focus bàn phím hiện ngay */
.qb-section .thm-btn,
.qb-mobile-bar .thm-btn,
.qb-modal .thm-btn{transition: color .3s linear, border-color .3s linear, box-shadow .3s linear, opacity .3s linear;}
/* Nút .thm-btn gốc của site: chữ TRẮNG trên nền vàng / mint chỉ đạt ~2:1 -> trong form dùng chữ tối (~8:1).
   Rê chuột / focus: lớp nền thu nhỏ, nút chuyển thành dạng viền -> chữ đổi theo màu chữ của theme
   (cùng bộ chọn :hover, :focus với site để chữ và nền luôn đổi cùng lúc). */
.qb-section .thm-btn,
.qb-mobile-bar .thm-btn,
.qb-modal .thm-btn{color: var(--qb-on-accent); background-color: transparent;} /* <button> mang nền xám mặc định của trình duyệt (#efefef / #6b6b6b ở theme tối) -> bỏ để trạng thái rê chuột/focus (dạng viền) trong suốt như nút <a> của site */
.qb-section .thm-btn:hover,
.qb-section .thm-btn:focus,
.qb-mobile-bar .thm-btn:hover,
.qb-mobile-bar .thm-btn:focus,
.qb-modal .thm-btn:hover,
.qb-modal .thm-btn:focus{color: var(--qb-ink);}
/* site tắt outline mặc định bằng !important -> vẽ lại vòng focus bàn phím cho form */
.qb-section :focus-visible,
.qb-mobile-bar :focus-visible,
.qb-modal :focus-visible{outline: 3px solid var(--accent, var(--color17)) !important; outline-offset: 2px;}
.qb-sr{position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}

/* ===== 2. TIÊU ĐỀ + BỐ CỤC 2 CỘT ===== */
.qb-section{padding-bottom: 6rem;}
.qb-lede{max-width: 46rem; margin-bottom: 2.25rem;}
.qb-kicker{display: block; font: 700 .9375rem/1.2 var(--Open-Sans); color: var(--qb-kicker);}
.qb-lede h2{margin: .5rem 0 .75rem; font-size: 2.5rem; line-height: 1.2;}
.qb-lede p{font-size: 1.0625rem; line-height: 1.7;}
.qb-lede p strong{color: var(--qb-ink);}

.qb-layout{display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 2.5rem; align-items: start;}
.qb-main{min-width: 0;}
.qb-aside{position: sticky; top: 6.5rem; min-width: 0;}
/* style.css của site đặt overflow-x:hidden trên html/body -> body thành "vùng cuộn" và position:sticky mất tác dụng.
   overflow-x:clip cắt phần tràn y hệt nhưng không tạo vùng cuộn (trình duyệt cũ không hiểu clip thì giữ hidden: bảng chỉ cuộn theo trang). */
@supports (overflow: clip){
  html,
  body{overflow-x: clip;}
}
@media (max-width: 991px){
  .qb-layout{grid-template-columns: minmax(0, 1fr); gap: 2rem;}
  .qb-aside{position: static;}
  .qb-lede h2{font-size: 2rem;}
}

/* ===== 3. CÁC BƯỚC ===== */
.qb-step{margin-bottom: 2.5rem;}
.qb-step:last-child{margin-bottom: 0;}
.qb-step-head{display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: 1rem;}
.qb-step-no{
  flex: 0 0 auto; width: 1.875rem; height: 1.875rem; border-radius: 50%;
  background: var(--qb-ink); color: var(--qb-surface);
  font: 700 .875rem/1.875rem var(--Open-Sans); text-align: center;
}
.qb-step-head h3{margin: 0; font-size: 1.375rem; line-height: 1.3;}
.qb-step-sub{margin-left: auto; font-size: .875rem; color: var(--qb-muted); font-variant-numeric: tabular-nums;}
.qb-section .qb-step-intro{margin: 0 0 1.25rem;} /* ".qb-section p{margin:0}" có độ ưu tiên cao hơn nên phải viết kèm .qb-section */

/* ===== 4. TAB NHÓM DỊCH VỤ ===== */
.qb-tabs{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; margin-bottom: 1rem;}
.qb-tabs [role="tab"]{
  position: relative; display: flex; align-items: center; justify-content: center; gap: .625rem;
  min-width: 0; padding: .875rem 1rem;
  background: var(--qb-surface); color: var(--qb-ink);
  border: 1.5px solid var(--qb-line-strong); border-radius: var(--curve15);
  font: 700 1rem/1.2 var(--Open-Sans);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.qb-tabs [role="tab"] i{font-size: 1.0625rem; color: var(--accent);}
.qb-tabs [role="tab"]:hover{border-color: var(--accent);}
.qb-tabs [role="tab"][aria-selected="true"]{
  border-color: var(--accent);
  background: var(--qb-soft); /* dự phòng cho trình duyệt chưa hiểu color-mix */
  background: color-mix(in srgb, var(--accent) 9%, var(--qb-surface));
}
.qb-tabs [role="tab"][aria-selected="true"]::after{ /* gạch nhấn dưới tab đang chọn */
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: -1.5px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
}
.qb-tab-name{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.qb-tab-count{
  min-width: 1.5rem; padding: 0 .4rem; border-radius: 50rem; background: var(--accent); color: #fff;
  font: 700 .75rem/1.5rem var(--Open-Sans); text-align: center; font-variant-numeric: tabular-nums;
}
.qb-tab-count:empty{display: none;}
@media (max-width: 575px){
  .qb-tabs [role="tab"]{flex-direction: column; gap: .25rem; padding: .625rem .375rem; font-size: .875rem;}
  .qb-tab-count{position: absolute; top: .375rem; right: .375rem; min-width: 1.25rem; line-height: 1.25rem; font-size: .6875rem;}
}

/* ===== 5. DANH SÁCH DỊCH VỤ ===== */
.qb-panel{--accent: var(--color17);}
.qb-section .qb-panel-hint{margin: 0 0 .75rem; font-size: .875rem;}
.qb-svc{
  position: relative; margin-bottom: .625rem; overflow: hidden;
  background: var(--qb-surface); border: 1.5px solid var(--qb-line); border-radius: .75rem;
  transition: border-color .15s ease;
}
.qb-svc::before{ /* thanh nhấn bên trái khi đã chọn */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); opacity: 0;
}
.qb-svc.is-on{border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--qb-line));}
.qb-svc.is-on::before{opacity: 1;}
.qb-svc-head{display: flex; align-items: center; gap: 1rem; padding: .875rem 1rem .875rem 1.25rem;}
.qb-pick{position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: .875rem; min-width: 0; margin: 0; cursor: pointer;}
.qb-pick-in{position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
.qb-pick-box{
  flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--qb-line-strong); border-radius: .4375rem; background: var(--qb-surface); color: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
.qb-pick-box i{font-size: .75rem; transform: scale(.4); opacity: 0; transition: transform .15s ease, opacity .15s ease;}
.qb-pick:hover .qb-pick-box{border-color: var(--accent);}
.qb-pick-in:checked + .qb-pick-box{background: var(--accent); border-color: var(--accent);}
.qb-pick-in:checked + .qb-pick-box i{transform: none; opacity: 1;}
.qb-pick-in:focus-visible + .qb-pick-box{outline: 3px solid var(--accent) !important; outline-offset: 2px;}
.qb-pick-text{min-width: 0;}
.qb-pick-text b{display: block; font: 700 1.0625rem/1.35 var(--Open-Sans); color: var(--qb-ink);}
.qb-pick-text small{display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.4; color: var(--qb-muted); font-variant-numeric: tabular-nums;}
.qb-svc-total{flex: 0 0 auto; font: 700 1.0625rem/1.2 var(--Open-Sans); color: var(--qb-ink); white-space: nowrap; font-variant-numeric: tabular-nums;}

.qb-svc-body{display: grid; gap: 1rem; padding: 1rem 1rem 1.25rem 1.25rem; border-top: 1px dashed var(--qb-line-strong); animation: qb-in .2s ease-out;}
.qb-frow{display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem 1rem; align-items: start;}
.qb-flabel{padding-top: .5rem; font: 700 .875rem/1.3 var(--Open-Sans); color: var(--qb-ink);}
.qb-opts{display: flex; flex-wrap: wrap; gap: .5rem;}
/* 4 gói: lưới cột đều nhau (cùng cỡ ở mọi dịch vụ, ô cùng hàng cao bằng nhau) */
.qb-tiers{display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));}
.qb-tiers .qb-tier{display: flex; min-width: 0;}
.qb-tiers .qb-opt-ui{flex: 1 1 auto; min-width: 0;}
@media (max-width: 575px){
  .qb-frow{grid-template-columns: minmax(0, 1fr);}
  .qb-flabel{padding-top: 0;}
  .qb-svc-head{padding-left: 1rem; gap: .5rem;}
  .qb-svc-total{font-size: .9375rem;}
}

/* Ô chọn gói (radio) và phụ phí (checkbox): input thật ẩn, vẽ lại bằng .qb-opt-ui */
.qb-opt{position: relative; margin: 0; cursor: pointer;}
.qb-opt input{position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
.qb-opt-ui{
  display: flex; flex-direction: column; gap: 1px; min-width: 5.5rem; padding: .5rem .875rem;
  background: var(--qb-surface); border: 1.5px solid var(--qb-line-strong); border-radius: .625rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.qb-opt-ui b{font: 700 .875rem/1.3 var(--Open-Sans); color: var(--qb-ink);}
.qb-opt-ui small{font-size: .75rem; line-height: 1.35; color: var(--qb-muted); font-variant-numeric: tabular-nums;}
.qb-tier-hint{font-style: normal; font-size: .75rem; line-height: 1.35; color: var(--qb-muted);} /* nhãn phụ của gói, trong ngoặc: (Cá nhân) */
.qb-opt:hover .qb-opt-ui{border-color: var(--accent);}
.qb-opt input:checked + .qb-opt-ui{border-color: var(--accent); background: var(--qb-soft); background: color-mix(in srgb, var(--accent) 12%, var(--qb-surface));}
.qb-opt input:focus-visible + .qb-opt-ui{outline: 3px solid var(--accent) !important; outline-offset: 2px;}
.qb-tier input:checked + .qb-opt-ui{box-shadow: 0 0 0 1px var(--accent);}
.qb-addon .qb-opt-ui{flex-direction: row; align-items: baseline; gap: .5rem; min-width: 0; padding: .375rem .875rem; border-radius: 50rem;}
.qb-addon input:checked + .qb-opt-ui::before{ /* dấu ✓ cho trạng thái đã chọn (không chỉ dựa vào màu) */
  content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .625rem; color: var(--accent); align-self: center; margin-right: -.125rem;
}
.qb-addon input:disabled + .qb-opt-ui{opacity: .75; cursor: default;}
.qb-addon:has(input:disabled){cursor: default;}

.qb-qtywrap{display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;}
.qb-unit{font-size: .875rem; color: var(--qb-muted);}
.qb-minnote{font-size: .8125rem; color: var(--qb-muted);}
.qb-minnote.is-warn{color: var(--qb-warm); font-weight: 600;}
/* Chụp sản phẩm: 2 ô số (số sản phẩm, số ảnh / sản phẩm) + dòng giải thích cách tính */
.qb-prod{display: grid; gap: .625rem; min-width: 0;}
.qb-prod .qb-qtywrap{align-items: flex-start; gap: .75rem 1.75rem;}
.qb-qgroup{display: grid; gap: .25rem;}
.qb-qcap{font-size: .8125rem; font-weight: 600; color: var(--qb-muted);}
.qb-qline{display: flex; align-items: center; gap: .5rem;}
.qb-pinfo,
.qb-prod .qb-minnote{display: block; font-size: .8125rem; line-height: 1.5; color: var(--qb-muted);}
.qb-pinfo:empty{display: none;}
.qb-prod .qb-minnote.is-warn{color: var(--qb-warm);}
/* Phụ phí riêng: chip + (khi tick "Làm thêm giờ") hàng số giờ của riêng dịch vụ đó */
.qb-addwrap{display: grid; gap: .625rem; min-width: 0;}
.qb-otrow{display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding: .625rem .75rem; background: var(--qb-soft); border-radius: .625rem;}
.qb-otrow[hidden]{display: none;}
.qb-otrow .qb-pinfo{flex: 1 1 100%;}
@media (max-width: 575px){
  /* di động: mỗi ô số là 1 hàng "tên ô … − n +" cho gọn (tên ô đã ghi rõ đơn vị nên ẩn nhãn đơn vị) */
  .qb-prod .qb-qtywrap{display: grid; gap: .5rem;}
  .qb-qgroup{grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem;}
  .qb-qgroup .qb-unit{display: none;}
}
.qb-section .qb-svc-note{padding: .5rem .75rem; border-left: 3px solid var(--qb-warm); background: var(--qb-soft); border-radius: 0 .5rem .5rem 0; font-size: .8125rem; color: var(--qb-ink);}

/* Ô nhập số có nút − / + (dùng cho số lượng dịch vụ và phụ phí chung) */
.qb-stepper{display: inline-flex; align-items: stretch; background: var(--qb-surface); border: 1.5px solid var(--qb-line-strong); border-radius: 50rem; overflow: hidden;}
.qb-stepper button{
  width: 2.5rem; height: 2.5rem; background: transparent; color: var(--qb-ink); font-size: 1.125rem; line-height: 1;
  transition: background-color .15s ease;
}
.qb-stepper button:hover:not(:disabled){background: var(--qb-soft);}
.qb-stepper button:disabled{opacity: .35; cursor: default;}
.qb-num{
  width: 3.5rem; height: 2.5rem; padding: 0; background: transparent; border: 0; border-radius: 0; text-align: center;
  font: 700 1rem/1 var(--Open-Sans); color: var(--qb-ink); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.qb-num::-webkit-outer-spin-button,
.qb-num::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0;}
.qb-num:disabled{color: var(--qb-muted);}
@media (pointer: coarse){
  .qb-stepper button,
  .qb-num{height: 2.875rem;}
  .qb-stepper button{width: 2.875rem;}
}

@keyframes qb-in{from{opacity: 0; transform: translateY(6px);} to{opacity: 1; transform: none;}}
@keyframes qb-bump{0%{transform: scale(1);} 40%{transform: scale(1.03);} 100%{transform: scale(1);}}

/* ===== 6. PHỤ PHÍ CHUNG ===== */
.qb-subhead{display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .75rem; margin: 0 0 .625rem; font: 700 1rem/1.35 var(--Open-Sans); color: var(--qb-ink);}
.qb-subhead small{font-size: .8125rem; font-weight: 400; color: var(--qb-muted);}
.qb-sharedwrap{margin-bottom: 1.5rem;}
.qb-section .qb-sh-note{margin: 0 0 .625rem; padding: .5rem .75rem; border-left: 3px solid var(--qb-warm); background: var(--qb-soft); border-radius: 0 .5rem .5rem 0; font-size: .8125rem; color: var(--qb-ink);}
/* phụ phí chung dùng chung (1B): ô tick bên trái, ô số lượng riêng bên phải */
.qb-sh{--accent: var(--qb-ink);}
.qb-sh .qb-pick-box{color: var(--qb-surface);}      /* dấu ✓ đảo màu theo theme: nền ink, dấu ✓ màu nền thẻ */
.qb-sh.is-off .qb-pick{cursor: default;}
.qb-sh.is-off .qb-pick-box{opacity: .5;}
.qb-globals{background: var(--qb-surface); border: 1.5px solid var(--qb-line); border-radius: .75rem; overflow: hidden;}
.qb-g{display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--qb-line);}
.qb-g:last-child{border-bottom: 0;}
.qb-g-text{min-width: 0;}
.qb-g-text b{display: block; font: 700 1rem/1.35 var(--Open-Sans); color: var(--qb-ink);}
.qb-g-text small{display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.45; color: var(--qb-muted);}
.qb-g-hint{display: block; margin-top: .25rem; font-style: normal; font-size: .8125rem; line-height: 1.4; font-weight: 600; color: var(--qb-warm); font-variant-numeric: tabular-nums;}
.qb-g-hint:empty{display: none;}
.qb-g-ctl{flex: 0 0 auto; display: flex; align-items: center; gap: .625rem;}
.qb-g.is-off .qb-g-ctl,
.qb-g.is-off .qb-g-text b{opacity: .5;}
@media (max-width: 575px){
  .qb-g{flex-direction: column; align-items: stretch; gap: .625rem;}
  .qb-g-ctl{justify-content: flex-start;}
  .qb-sh .qb-g-ctl{padding-left: 2.375rem;} /* thẳng hàng với chữ, bỏ qua ô tick (1.5rem + khoảng cách .875rem) */
}

/* Công tắc bật / tắt: nền đậm + núm sáng, vị trí núm cũng báo trạng thái */
.qb-switch{position: relative; display: inline-block; margin: 0; cursor: pointer;}
.qb-switch input{position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
.qb-switch-ui{display: block; width: 3rem; height: 1.75rem; border-radius: 50rem; background: var(--qb-line-strong); position: relative; transition: background-color .15s ease;}
.qb-switch-ui::after{
  content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease;
}
.qb-switch input:checked + .qb-switch-ui{background: var(--qb-ink);}
.qb-switch input:checked + .qb-switch-ui::after{transform: translateX(1.25rem); background: var(--qb-surface);}
.qb-switch input:focus-visible + .qb-switch-ui{outline: 3px solid var(--color17) !important; outline-offset: 2px;}
.qb-switch input:disabled + .qb-switch-ui{opacity: .6;}
.qb-switch:has(input:disabled){cursor: default;}

/* ===== 7. THÔNG TIN BÊN A — nằm trong bảng tóm tắt, ngay dưới tiêu đề + ngày ===== */
.qb-cust{padding: 1rem 1.25rem 1.125rem; border-bottom: 1px dashed var(--qb-line-strong);}
.qb-cust .qb-subhead{justify-content: space-between; margin-bottom: .25rem;}
.qb-section .qb-cust-hint{font-size: .8125rem; line-height: 1.5;}
.qb-cust-fields{display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: .75rem;}
/* máy tính bảng: bảng trải rộng cả hàng nên đủ chỗ cho 2 ô cạnh nhau; cột phải hẹp (desktop) và điện thoại: xếp 1 cột */
@media (min-width: 576px) and (max-width: 991px){.qb-cust-fields{grid-template-columns: repeat(2, minmax(0, 1fr));}}
.qb-field label{display: block; margin: 0 0 .375rem; font: 700 .875rem/1.3 var(--Open-Sans); color: var(--qb-ink);}
.qb-field input{
  width: 100%; height: 2.875rem; padding: 0 1rem;
  background: var(--qb-soft); color: var(--qb-ink);
  border: 1.5px solid transparent; border-radius: var(--curve10); font-size: .9375rem;
  transition: border-color .15s ease;
}
.qb-field input::placeholder{color: var(--qb-muted); opacity: .85;}
.qb-field input:focus{border-color: var(--color17);}
/* desktop: bảng dính + có max-height theo khung nhìn nên gọn bớt chiều cao ô nhập */
@media (min-width: 992px){
  .qb-cust .qb-field input{height: 2.5rem;}
}
/* màn hình desktop thấp (vd. laptop 768px): ẩn dòng giải thích + thu khoảng đệm để danh sách dịch vụ, tổng tiền và nút tải vẫn lọt trong bảng */
@media (min-width: 992px) and (max-height: 760px){
  .qb-section .qb-cust-hint{display: none;}
  .qb-cust{padding-top: .75rem; padding-bottom: .875rem;}
}

/* ===== 8. BẢNG TÓM TẮT — kiểu hóa đơn: chữ số thẳng cột, đường chấm dẫn, mép "vé" ===== */
.qb-receipt{
  position: relative; display: flex; flex-direction: column; background: var(--qb-surface);
  border: 1.5px solid var(--qb-line-strong); border-radius: 1.125rem; box-shadow: 0 16px 32px -18px var(--qb-shadow);
}
.qb-receipt > *{flex: 0 0 auto;}
@media (min-width: 992px){
  /* bảng dính theo màn hình nên không bao giờ cao hơn khung nhìn: danh sách tự co lại + cuộn,
     còn tổng tiền và nút tải luôn nằm trong tầm mắt */
  .qb-receipt{max-height: calc(100vh - 7.5rem);}
}
.qb-receipt-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem;
  background: var(--qb-head-bg); color: var(--qb-head-ink); border-radius: calc(1.125rem - 1.5px) calc(1.125rem - 1.5px) 0 0;
}
.qb-receipt-head h3{margin: 0; font-size: 1.125rem; color: inherit;}
.qb-receipt-head span{font-size: .8125rem; opacity: .8; font-variant-numeric: tabular-nums;}
.qb-receipt > .qb-lines{
  flex: 1 1 auto; min-height: 4.5rem; overflow-y: auto; overscroll-behavior: contain; padding: .25rem 1.25rem;
  scrollbar-width: thin; scrollbar-color: var(--qb-line-strong) transparent;
  /* bóng mờ ở mép trên/dưới — chỉ hiện khi còn nội dung để cuộn (background-attachment: local + scroll) */
  background:
    linear-gradient(var(--qb-surface) 30%, transparent) 0 0 / 100% 1.5rem no-repeat local,
    linear-gradient(transparent, var(--qb-surface) 70%) 0 100% / 100% 1.5rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--qb-edge), transparent) 0 0 / 100% .5rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--qb-edge), transparent) 0 100% / 100% .5rem no-repeat scroll;
  background-color: var(--qb-surface);
}
.qb-lines:empty{display: none;}
.qb-empty{padding: 2rem 1.25rem; text-align: center; font-size: .9375rem;}

.qb-rl{position: relative; padding: .75rem 1.75rem .75rem 0; border-bottom: 1px dashed var(--qb-line-strong);}
.qb-rl:last-child{border-bottom: 0;}
.qb-rl.is-new{animation: qb-in .22s ease-out;}
.qb-rl.is-bump .qb-rl-main .qb-amt{display: inline-block; animation: qb-bump .35s ease-out;}
.qb-rl-main,
.qb-rl-sub{display: flex; align-items: baseline; gap: .375rem;}
.qb-rl-main{font: 700 .9375rem/1.4 var(--Open-Sans); color: var(--qb-ink);}
.qb-rl-sub{margin-top: .1875rem; padding-left: .875rem; font-size: .8125rem; line-height: 1.45; color: var(--qb-muted);}
.qb-rl-name{min-width: 0;}
.qb-dots{flex: 1 1 .75rem; min-width: .75rem; height: 0; border-bottom: 2px dotted var(--qb-line-strong); transform: translateY(-.28em);}
.qb-amt{white-space: nowrap; font-family: var(--Open-Sans); font-variant-numeric: tabular-nums;}
.qb-rl-sub .qb-amt{font-weight: 600; color: var(--qb-ink);}
.qb-rl-meta{margin-top: .125rem; font-size: .75rem; line-height: 1.4; color: var(--qb-muted);}
.qb-rl-extra .qb-rl-name{font-weight: 700;}
.qb-rl-x{
  position: absolute; top: .625rem; right: -.25rem; width: 1.625rem; height: 1.625rem; border-radius: 50%;
  background: transparent; color: var(--qb-muted); font-size: .75rem; transition: background-color .15s ease, color .15s ease;
}
.qb-rl-x:hover{background: var(--qb-soft); color: var(--qb-ink);}

.qb-sums{margin: 0; padding: .875rem 1.25rem 0; border-top: 2px dashed var(--qb-line-strong); position: relative;}
.qb-sums::before,
.qb-sums::after{ /* hai nửa vòng khoét ở mép như vé */
  content: ""; position: absolute; top: -.6875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--qb-page);
  border: 1.5px solid var(--qb-line-strong);
}
.qb-sums::before{left: -.75rem; clip-path: inset(0 0 0 50%);}
.qb-sums::after{right: -.75rem; clip-path: inset(0 50% 0 0);}
.qb-sum{display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .375rem; font-size: .9375rem; color: var(--qb-muted);}
.qb-sum dt{font-weight: 400;}
.qb-sum dd{margin: 0; font-weight: 700; color: var(--qb-ink); font-family: var(--Open-Sans); font-variant-numeric: tabular-nums;}
.qb-total{display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem 1rem;}
.qb-total span{font: 700 1rem/1.2 var(--Open-Sans); color: var(--qb-ink);}
.qb-total strong{font: 800 1.75rem/1.1 var(--Open-Sans); color: var(--qb-ink); white-space: nowrap; font-variant-numeric: tabular-nums;}

.qb-cta-wrap{padding: 0 1.25rem 1.25rem;}
.qb-cta{width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; line-height: 1.3;}
.qb-cta i{margin-right: 0;}
.qb-cta-text{display: inline;}
.qb-cta[disabled]{opacity: .65; cursor: wait;}
.qb-hint{text-align: center; font-size: .8125rem;}
.qb-cta-wrap .qb-hint{padding-top: .25rem;}
.qb-cta:not([hidden]) + .qb-hint{margin-top: .75rem;}

/* 2 nút ở bảng báo giá: "Xem báo giá" (viền — lightbox ảnh gọn gửi khách) + "Xuất PDF" (nút vàng — lightbox mẫu PDF đầy đủ) */
.qb-cta-row{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem;}
.qb-cta-row .qb-cta{padding-left: .75rem; padding-right: .75rem; font-size: .9375rem;}
.qb-section .qb-cta-alt,
.qb-mobile-bar .qb-cta-alt{
  padding: 10.5px .75rem; border: 2px solid var(--qb-ink); border-radius: 50rem; background: transparent; color: var(--qb-ink);
  font-size: .9375rem; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background-color .2s linear, color .2s linear;
}
.qb-section .qb-cta-alt:hover,
.qb-section .qb-cta-alt:focus-visible,
.qb-mobile-bar .qb-cta-alt:hover,
.qb-mobile-bar .qb-cta-alt:focus-visible{background: var(--qb-ink); color: var(--qb-surface);}

/* ===== 8b. LỌC "CHỈ GIỮ MỤC ĐÃ CHỌN" — dùng cho ảnh của nút "Xem báo giá" =====
   Trang thật không bao giờ bị ẩn gì. Khi chụp ảnh, JS thêm class .is-view vào #qb-main CỦA BẢN SAO (quote.js mục 9b);
   lúc đó form chọn dịch vụ chỉ còn các mục ĐÃ CHỌN. "Đã chọn hay chưa" do sync() đánh dấu sẵn bằng các class:
     .qb-svc.is-on (dịch vụ) · .qb-opt.is-sel (gói / phụ phí riêng) · .qb-panel.has-on (nhóm có dịch vụ được chọn)
     .qb-sh.is-on (phụ phí chung dùng chung) · .qb-g.is-sel (khác tỉnh / voice / VAT) · .vw-none (khu vực không có gì được chọn) */
/* tab bị ẩn nên mỗi nhóm có tiêu đề riêng (chỉ hiện khi lọc) */
.qb-subhead.qb-vgroup{display: none; align-items: center; gap: .25rem .625rem;}
.qb-vgroup i{color: var(--accent);}
.qb-main.is-view .qb-subhead.qb-vgroup{display: flex;}
.qb-main.is-view #qb-panels{display: grid; gap: .75rem;}
.qb-main.is-view .qb-step{margin-bottom: 1.75rem;}

/* ẩn: phần điều hướng / hướng dẫn chỉ dùng khi chỉnh sửa + mọi thứ KHÔNG được chọn */
.qb-main.is-view .qb-tabs,
.qb-main.is-view .qb-panel-hint,
.qb-main.is-view .qb-step-intro,
.qb-main.is-view .qb-sharedwrap .qb-subhead small,
.qb-main.is-view .qb-panel:not(.has-on),
.qb-main.is-view .qb-svc:not(.is-on),
.qb-main.is-view .qb-opt:not(.is-sel),
.qb-main.is-view .qb-sh:not(.is-on),
.qb-main.is-view .qb-sh.is-off,
.qb-main.is-view .qb-g[data-g]:not(.is-sel),
.qb-main.is-view .vw-none{display: none;}

/* đường kẻ giữa các dòng phụ phí chung / điều kiện: dùng khe 1px nên chỉ xuất hiện giữa các dòng còn hiện */
.qb-main.is-view .qb-globals{display: grid; gap: 1px; background: var(--qb-line);}
.qb-main.is-view .qb-g{background: var(--qb-surface); border-bottom: 0;}

/* ===== 9. THANH TỔNG TIỀN CỐ ĐỊNH TRÊN DI ĐỘNG ===== */
.qb-mobile-bar{
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--qb-surface); box-shadow: 0 -6px 1.5rem var(--qb-shadow);
  transform: translateY(110%); transition: transform .3s ease;
}
.qb-mobile-bar.is-visible{transform: translateY(0);}
.qb-mobile-bar-total{flex: 1 1 auto; min-width: 0;}
.qb-mobile-bar-total span{display: block; font-size: .75rem; line-height: 1.2; color: var(--qb-muted);}
.qb-mobile-bar-total strong{display: block; font: 800 1.1875rem/1.3 var(--Open-Sans); font-size: clamp(1rem, 4.9vw, 1.1875rem); color: var(--qb-ink); font-variant-numeric: tabular-nums; white-space: nowrap;}
.qb-mobile-bar-btns{display: flex; gap: .5rem; flex: 0 0 auto;}
/* 2 nút giữ đúng bề rộng nội dung (không dùng width: 100% của nút trong bảng báo giá) */
.qb-mobile-bar .qb-cta{width: auto; flex: 1 1 0; padding: .625rem 1.25rem; font-size: .9375rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;}
.qb-mobile-bar .qb-cta i{margin-right: 0;}
@media (max-width: 991px){
  .qb-mobile-bar{display: flex;}
  body.has-qb-mobile-bar{padding-bottom: 4.75rem;}
  .qb-receipt .qb-cta-wrap .qb-cta{display: none;}
}
@media (max-width: 575px){
  /* điện thoại: hàng trên = tổng tiền, hàng dưới = 2 nút chia đều (đủ chỗ cho nhãn đầy đủ) */
  .qb-mobile-bar-total{flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;}
  .qb-mobile-bar-btns{flex: 1 1 100%;}
  body.has-qb-mobile-bar{padding-bottom: 7rem;}
}
@media (max-width: 374px){
  .qb-mobile-bar{padding-left: .75rem; padding-right: .75rem;}
  .qb-mobile-bar .qb-cta{padding: .625rem .5rem; gap: .375rem;}
}

/* ===== 10. MODAL XEM TRƯỚC ===== */
.qb-modal{
  position: fixed; inset: 0; z-index: 99999; display: none; align-items: flex-start; justify-content: center;
  padding: 2.5rem 1rem; background: rgba(20, 24, 31, .72); overflow-y: auto;
}
.qb-modal.is-open{display: flex;}
.qb-modal-inner{background: var(--qb-surface); border-radius: var(--curve15); max-width: 74rem; width: 100%; overflow: hidden;}
/* Thanh tiêu đề: [tiêu đề | 3 nút | đóng] trên 1 hàng; điện thoại: tiêu đề + đóng ở hàng trên, 3 nút chia đều hàng dưới */
.qb-modal-bar{display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .625rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--qb-line);}
.qb-modal-bar h4{margin: 0; font-size: 1.125rem;}
.qb-modal-actions{display: flex; flex-wrap: wrap; align-items: center; gap: .625rem;}
.qb-modal .thm-btn.sml-btn{display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.125rem; font-size: .875rem;}
.qb-modal .thm-btn i{margin-right: 0;}
/* site: ".thm-btn + .thm-btn{margin-top:1rem}" đẩy nút thứ 2, 3 lệch xuống -> trả về 0 để 3 nút thẳng hàng */
.qb-modal .thm-btn + .thm-btn{margin-top: 0;}
.qb-modal-close{
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--qb-soft); color: var(--qb-ink); font-size: .9375rem; transition: background-color .15s ease, color .15s ease;
}
.qb-modal-close:hover{background: var(--color9); color: #fff;}
@media (max-width: 575px){
  .qb-modal{padding: 1.25rem .75rem;}
  .qb-modal-bar{grid-template-columns: minmax(0, 1fr) auto; row-gap: .875rem; padding: .875rem 1rem;}
  .qb-modal-bar .qb-modal-close{grid-column: 2; grid-row: 1;}
  .qb-modal-actions{grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;}
  .qb-modal .thm-btn.sml-btn{justify-content: center; gap: .375rem; padding: .5rem .375rem; font-size: .8125rem; white-space: nowrap;}
}
@media (max-width: 399px){
  .qb-modal .thm-btn.sml-btn i{display: none;}
}
/* "Xem báo giá" (ảnh gọn gửi khách): lightbox chỉ có Copy ảnh + Tải ảnh — nút Tải PDF thuộc về mẫu PDF của "Xuất PDF" */
.qb-modal[data-mode="view"] #qb-modal-pdf{display: none;}
@media (max-width: 575px){
  .qb-modal[data-mode="view"] .qb-modal-actions{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
.qb-modal-status{padding: .75rem 1.25rem 0; margin: 0; min-height: 1.5rem; font-size: .875rem; color: var(--qb-muted);}
.qb-modal-status:empty{display: none;}
.qb-modal-scroll{padding: 1.25rem; overflow-x: auto; background: var(--qb-soft); margin-top: .75rem;}
.qb-modal-scroll img{display: block; max-width: 100%; height: auto; margin: 0 auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); background: #fff;}

/* Spinner nhỏ trong nút khi đang tạo file */
.qb-spin{display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-bottom-color: transparent; border-radius: 50%; animation: qb-spin-anim .7s linear infinite;}
@keyframes qb-spin-anim{to{transform: rotate(360deg);}}

/* ===================================================================
   EXPORT TEMPLATE — dựng theo Google Sheet
   Đặt ngoài khung nhìn (KHÔNG dùng display:none để html2canvas vẫn đo & vẽ được layout).
   Luôn nền trắng + chữ tối, không đổi theo dark theme: file xuất ra phải giống nhau trên mọi máy.
=================================================================== */
.exp-offscreen-holder{
  --exp-header-light: #8697b2;   /* header nhạt: NGÀY / CHI TIẾT / ĐƠN GIÁ / SỐ LƯỢNG / THÀNH TIỀN */
  --exp-header-dark: #3e4a59;    /* header đậm: DỊCH VỤ / ID */
  --exp-title-gray: #a7a7a7;     /* chữ tiêu đề lớn, giống style mặc định của Google Sheet */
  --exp-total-bg: #deedd7;       /* nền dòng CHI PHÍ — xanh lá nhạt */
  --exp-total-border: #bcdcae;
  --exp-border: #d9dce1;         /* viền lưới bảng, mảnh */
  --exp-group-border: #b4bdcb;   /* viền trên mỗi khối dịch vụ */
  position: fixed; top: 0; left: -99999px; width: 1100px; z-index: -1; pointer-events: none;
}
.exp-sheet{
  width: 1100px; box-sizing: border-box; padding: 2.5rem 2.8125rem 3.125rem;
  background: #fff; color: #1c1c1c; color-scheme: light;
  font-family: var(--Nunito-Sans), Arial, sans-serif; font-size: 1rem; line-height: 1.4;
}
.exp-title{
  margin: 0 0 1.5625rem; text-align: center; text-transform: uppercase;
  font-family: var(--Open-Sans), Arial, sans-serif; font-weight: 800; font-size: 2rem; letter-spacing: .5px; line-height: 1.25;
  color: var(--exp-title-gray);
}
.exp-brand-name{margin-bottom: .2rem; font-family: var(--Open-Sans), Arial, sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.3; color: #1c1c1c;}
.exp-brand-addr{font-size: .9375rem; color: #333;}
.exp-brand-contact{margin-bottom: .9375rem; font-size: .875rem; color: #555; white-space: pre;}

.exp-meta{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5625rem; padding-bottom: 1.25rem; margin-bottom: 1.125rem; border-bottom: 2px solid #eceff3;}
.exp-meta-h{margin-bottom: .5rem; font-family: var(--Open-Sans), Arial, sans-serif; font-weight: 800; font-size: .75rem; color: #8a93a3; text-transform: uppercase;}
.exp-meta-line{display: flex; align-items: baseline; gap: .5rem; min-height: 1.75rem; margin-bottom: 6px; padding-bottom: 3px; border-bottom: 1px solid #b9bfc9; font-size: .9375rem; color: #1c1c1c;}
.exp-k{flex: 0 0 auto; font-size: .75rem; color: #8a93a3;}
.exp-meta-caption{font-size: .8125rem; color: #666;}

.exp-table{width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .875rem;}
.exp-table th{
  padding: .8125rem .625rem; background-color: var(--exp-header-light); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; text-align: center; text-transform: uppercase; letter-spacing: .02em;
  font-family: var(--Open-Sans), Arial, sans-serif; font-weight: 700; font-size: .8125rem;
}
.exp-table th.exp-dark{background-color: var(--exp-header-dark);}
.exp-table td{padding: .5rem .625rem; border: 1px solid var(--exp-border); vertical-align: middle; color: #1c1c1c; background: #fff;}
.exp-table tr.exp-first td{border-top: 2px solid var(--exp-group-border);}

.exp-col-date{text-align: center; font-weight: 600; white-space: nowrap;}
.exp-col-service{text-align: left; font-weight: 700; background: #f4f6fa !important;}
.exp-col-id{text-align: center; color: #6b7280;}
.exp-col-detail{text-align: left; line-height: 1.4;}
.exp-col-detail strong{display: block; font-weight: 700;}
.exp-col-detail small,
.exp-col-price small,
.exp-col-qty small{display: block; font-size: .6875rem; font-weight: 400; line-height: 1.35; color: #6b7280;}
.exp-col-price{text-align: right; font-size: .8125rem; color: #4b5563; line-height: 1.35; font-variant-numeric: tabular-nums;}
.exp-col-qty{text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums;}
.exp-col-linetotal{text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums;}
.exp-main .exp-col-linetotal{font-weight: 700;}

/* Dòng phụ phí: nền nhạt, chữ nhỏ hơn, thụt vào dưới dòng dịch vụ */
.exp-sub td{background: #fafbfc; border-top-color: #eceff3; font-size: .8125rem;}
.exp-sub .exp-col-detail{padding-left: 1.5rem;}
.exp-add{display: block; color: #2f3b4a;}
.exp-sub .exp-col-linetotal{font-weight: 600; color: #2f3b4a;}

.exp-sum-row td{border: 0; background: #fff; text-align: right; font-size: .875rem; color: #4b5563; padding-top: .625rem;}
.exp-sum-row td.exp-col-linetotal{color: #1c1c1c; border: 1px solid var(--exp-border); border-top: 0; padding-top: .5rem;}
.exp-total-row td{font-weight: 700;}
.exp-total-label,
.exp-total-bank,
.exp-total-amount{background-color: var(--exp-total-bg) !important; border-color: var(--exp-total-border) !important; padding-top: .75rem; padding-bottom: .75rem;}
.exp-total-label{text-align: center; font-family: var(--Open-Sans), Arial, sans-serif; font-weight: 800; color: #1c1c1c;}
.exp-total-bank{text-align: left; font-size: .875rem; font-weight: 600;}
.exp-total-amount{text-align: right; white-space: nowrap; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums;}

.exp-footer{display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem; margin-top: 1.5625rem; padding-top: 1.125rem; border-top: 2px solid #eceff3;}
.exp-footer-note{max-width: 32rem; font-size: .75rem; line-height: 1.6; color: #7c8493;}
.exp-footer-sign{text-align: center; font-size: .8125rem; color: #333;}
.exp-footer-sign strong{display: block; margin-bottom: 2.5rem; font-size: .875rem;}

/* ===== 11. CHUYỂN ĐỘNG TỐI THIỂU ===== */
@media (prefers-reduced-motion: reduce){
  .qb-svc-body,
  .qb-rl.is-new,
  .qb-rl.is-bump .qb-rl-main .qb-amt{animation: none;}
  .qb-mobile-bar{transition: none;}
  .qb-switch-ui::after,
  .qb-pick-box i{transition: none;}
}