/*** ======================================================================
  GET A QUOTE — Bảng báo giá tương tác (Quote Builder)
  --------------------------------------------------------------------------
  File này chỉ bổ sung cho hệ thống thiết kế sẵn có của site (style.css) —
  dùng lại toàn bộ biến màu / font / bo góc gốc (--color1, --color3,
  --curve15, --Open-Sans, --Nunito-Sans...) để trang này trông là MỘT PHẦN
  của website chứ không phải module rời rạc.

  Hai nhóm class chính:
   1) .qb-*   Giao diện chọn dịch vụ tương tác (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) — được dựng lại chính xác theo mẫu
              Google Sheet gốc (getaquote.pdf/.jpeg): dải màu xanh xám ở
              header bảng, khối CHI PHÍ nền xanh lá nhạt ở dòng cuối...
=========================================================================== ***/

:root{
  --qb-accent: var(--color3);       /* Vàng cam — CTA chính, đã dùng toàn site */
  --qb-selected: var(--color9);     /* Cam san hô — trạng thái đã chọn */
  --qb-ink: var(--color1);          /* Chữ chính */
  --qb-soft-bg: var(--color4);      /* Nền dịu */
  --qb-line: var(--color25);        /* Viền / gạch chia nhạt */
  --qb-radius: var(--curve15);

  /* Bảng màu riêng cho export-template — lấy mẫu pixel-chính xác từ file
     getaquote.pdf gốc (Google Sheet xuất ra), không có sẵn trong style.css */
  --exp-header-light: #8697b2;   /* header nhạt: NGÀY / CHI TIẾT / THIẾT BỊ / ĐƠN GIÁ / SL / TT */
  --exp-header-dark: #3e4a59;    /* header đậm: DỊCH VỤ / ID — trùng --color1 của site */
  --exp-title-gray: #a7a7a7;     /* màu chữ tiêu đề lớn, giống style mặc định Google Sheet */
  --exp-total-bg: #deedd7;       /* nền dòng CHI PHÍ / tổng tiền — xanh lá nhạt */
  --exp-total-border: #bcdcae;
  --exp-border: #d9dce1;         /* viền lưới bảng, mảnh */
  --exp-link: #1a56db;
}

/* ===== 1. PAGE INTRO / SECTION SPACING ===== */
.qb-section{padding-bottom: 6rem;}
.qb-lede{max-width: 46rem;}
.qb-lede > p{margin-top: .75rem;}

/* ===== 2. LAYOUT: 2 CỘT (danh sách dịch vụ + tóm tắt báo giá) ===== */
.qb-layout{
  display: flex;
  flex-wrap: wrap;
  gap: 1.875rem;
  align-items: flex-start;
  margin-top: 2.1875rem;
}
.qb-catalog{flex: 1 1 37.5rem; min-width: 0;}
.qb-summary-col{flex: 0 0 21.25rem; max-width: 21.25rem;}

@media (max-width: 991px){
  .qb-summary-col{flex: 1 1 100%; max-width: 100%;}
}

/* ===== 3. THẺ HẠNG MỤC CHÍNH (accordion-style category card) ===== */
.qb-category{
  background-color: #fff;
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.qb-category.is-open{
  box-shadow: 0 8px 1.5rem 0 rgba(16, 1, 148, .10);
  border-color: transparent;
}
.qb-category-head{
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.5625rem;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.qb-category-icon{
  flex: 0 0 3.125rem;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color3), var(--color9));
  flex-shrink: 0;
}
.qb-category-title{flex: 1 1 auto; min-width: 0;}
.qb-category-title h3{
  font-size: 1.125rem;
  margin-bottom: .25rem;
}
.qb-category-title span{
  font-size: .875rem;
  color: var(--color6);
  display: block;
}
.qb-category-count{
  flex: 0 0 auto;
  background-color: var(--qb-soft-bg);
  color: var(--qb-ink);
  font-size: .8125rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: 50rem;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}
.qb-category-count.is-active{
  opacity: 1;
  transform: scale(1);
  background-color: var(--qb-selected);
  color: #fff;
}
.qb-category-caret{
  flex: 0 0 auto;
  font-size: .9rem;
  color: var(--color6);
  transition: transform .25s ease;
}
.qb-category.is-open .qb-category-caret{transform: rotate(180deg);}

.qb-category-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  border-top: 1px solid transparent;
}
.qb-category.is-open .qb-category-body{border-top-color: var(--qb-line);}

/* ===== 4. HẠNG MỤC PHỤ (từng dòng dịch vụ có thể chọn) ===== */
.qb-item{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.5625rem;
  border-bottom: 1px solid var(--qb-line);
}
.qb-item:last-child{border-bottom: 0;}

.qb-item-check{
  flex: 0 0 auto;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
}
.qb-item-check input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.qb-item-check .qb-box{
  position: absolute;
  inset: 0;
  border: 2px solid #cfd4dc;
  border-radius: .375rem;
  background-color: #fff;
  transition: all .18s ease;
}
.qb-item-check .qb-box:after{
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .15s ease;
}
.qb-item-check input:checked ~ .qb-box{
  background-color: var(--qb-selected);
  border-color: var(--qb-selected);
}
.qb-item-check input:checked ~ .qb-box:after{opacity: 1;}
.qb-item-check input:focus-visible ~ .qb-box{box-shadow: 0 0 0 3px rgba(255,104,73,.25);}

.qb-item-info{flex: 1 1 13.75rem; min-width: 13.75rem; cursor: pointer;}
.qb-item-info h4{
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .25rem;
  color: var(--qb-ink);
}
.qb-item-info p{
  font-size: .8125rem;
  line-height: 1.375rem;
  opacity: .75;
  margin-bottom: .3rem;
}
.qb-item-price{
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color9);
}
.qb-item-price span{
  font-size: .75rem;
  font-weight: 400;
  color: var(--color6);
  margin-left: 2px;
}

.qb-qty{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--qb-line);
  border-radius: 50rem;
  overflow: hidden;
  opacity: .45;
  transition: opacity .2s ease;
  /* Lưu ý: KHÔNG dùng pointer-events:none ở đây — bộ đếm số lượng vẫn phải
     bấm được kể cả khi chưa tick, vì bấm +/- sẽ tự động tick chọn luôn
     (xem wireEvents() trong custom/getaquote.js). Chỉ làm mờ bằng opacity để báo
     hiệu trực quan "chưa chọn", không được chặn thao tác. */
}
.qb-item.is-checked .qb-qty{opacity: 1;}
.qb-qty button{
  width: 2rem;
  height: 2rem;
  background: var(--qb-soft-bg);
  color: var(--qb-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.qb-qty button:hover{background-color: var(--color9); color: #fff;}
.qb-qty input{
  width: 2.75rem;
  height: 2rem;
  border: 0;
  text-align: center;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--qb-ink);
  -moz-appearance: textfield;
}
.qb-qty input::-webkit-outer-spin-button,
.qb-qty input::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0;}

/* ===== 5. KHÁCH HÀNG (Bên A) — thông tin điền vào báo giá ===== */
.qb-customer{
  background-color: #fff;
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius);
  padding: 1.5625rem;
  margin-bottom: 1.25rem;
}
.qb-customer h3{font-size: 1.0625rem; margin-bottom: .25rem;}
.qb-customer > p{font-size: .8125rem; opacity: .7; margin-bottom: 1.125rem;}
.qb-field{margin-bottom: .9375rem;}
.qb-field:last-child{margin-bottom: 0;}
.qb-field label{
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--qb-ink);
}
.qb-field input{
  width: 100%;
  height: 2.8125rem;
  padding: 0 1rem;
  background-color: var(--color24);
  border-radius: var(--curve10);
  font-size: .9375rem;
  color: #333;
}

/* ===== 6. BẢNG TÓM TẮT BÁO GIÁ (sticky summary) ===== */
.qb-summary{
  position: sticky;
  top: 6.5rem;
  background-color: #fff;
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius);
  box-shadow: 0 10px 1.875rem 0 rgba(16, 1, 148, .08);
  overflow: hidden;
}
.qb-summary-head{
  padding: 1.25rem 1.5625rem;
  background: linear-gradient(120deg, var(--color1), var(--color2));
  color: #fff;
}
.qb-summary-head h3{color: #fff; font-size: 1.0625rem; margin-bottom: .2rem;}
.qb-summary-head span{font-size: .8125rem; opacity: .75;}

.qb-summary-list{
  max-height: 16.25rem;
  overflow-y: auto;
  padding: .5rem 1.5625rem;
}
.qb-summary-empty{
  text-align: center;
  padding: 1.5rem .5rem;
  font-size: .875rem;
  color: var(--color6);
}
.qb-summary-empty i{
  display: block;
  font-size: 1.75rem;
  margin-bottom: .5rem;
  opacity: .4;
}
.qb-summary-row{
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem 0;
  border-bottom: 1px dashed var(--qb-line);
  font-size: .8125rem;
}
.qb-summary-row:last-child{border-bottom: 0;}
.qb-summary-row-name{color: var(--qb-ink); font-weight: 600;}
.qb-summary-row-sub{display: block; font-weight: 400; opacity: .65; font-size: .75rem; margin-top: 1px;}
.qb-summary-row-price{white-space: nowrap; font-weight: 700; color: var(--color9);}

.qb-summary-total{
  padding: 1.125rem 1.5625rem;
  border-top: 1px solid var(--qb-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.qb-summary-total span{font-size: .875rem; font-weight: 700; color: var(--qb-ink);}
.qb-summary-total strong{font-size: 1.375rem; color: var(--color9); font-family: var(--Open-Sans);}

.qb-cta-wrap{padding: 0 1.5625rem 1.5625rem;}
.qb-cta{
  width: 100%;
  text-align: center;
  justify-content: center;
  border: 0 !important;
  display: none;
  align-items: center;
  gap: .5rem;
}
.qb-cta.is-visible{display: inline-flex;}
.qb-cta[disabled]{opacity: .6; cursor: wait;}
.qb-hint{
  font-size: .75rem;
  text-align: center;
  color: var(--color6);
  padding: 0 1.5625rem 1.25rem;
  margin: 0;
}

/* ===== 7. 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;
  background-color: #fff;
  box-shadow: 0 -6px 1.5rem rgba(16,1,148,.15);
  padding: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  transform: translateY(110%);
  transition: transform .3s ease;
}
.qb-mobile-bar.is-visible{transform: translateY(0);}
.qb-mobile-bar-total span{display: block; font-size: .6875rem; color: var(--color6);}
.qb-mobile-bar-total strong{font-size: 1.125rem; color: var(--color9);}
.qb-mobile-bar .thm-btn{padding: .625rem 1.25rem; font-size: .875rem;}

@media (min-width: 992px){.qb-mobile-bar{display: flex;}}
@media (min-width: 992px){.qb-mobile-bar{display: none !important;}}
/* (Giữ 1 rule duy nhất: chỉ hiện dưới 992px) */
@media (max-width: 991px){
  .qb-mobile-bar{display: flex;}
  .qb-summary{position: static;}
  .qb-cta-wrap .qb-cta.is-visible{display: none;}
  body.has-qb-mobile-bar{padding-bottom: 4.6rem;}
}

/* ===== 8. MODAL XEM TRƯỚC BÁO GIÁ ===== */
.qb-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1rem;
  background-color: rgba(20, 24, 31, .7);
  overflow-y: auto;
}
.qb-modal.is-open{display: flex;}
.qb-modal-inner{
  background: #fff;
  border-radius: var(--curve10);
  max-width: 74rem;
  width: 100%;
  overflow: hidden;
}
.qb-modal-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: .625rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--qb-line);
}
.qb-modal-bar h4{margin-bottom: 0; font-size: 1.0625rem;}
.qb-modal-actions{display: flex; flex-wrap: wrap; gap: .625rem; align-items: center;}
.qb-modal-close{
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--qb-soft-bg);
  color: var(--qb-ink);
  font-size: .9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qb-modal-close:hover{background: var(--color9); color: #fff;}
.qb-modal-scroll{
  padding: 1.5625rem;
  overflow-x: auto;
  background: #eef0f4;
}
.qb-modal-status{
  font-size: .8125rem;
  color: var(--color6);
  padding: 0 1.25rem 1rem;
  display: none;
}
.qb-modal-status.is-visible{display: block;}

/* ===================================================================
   EXPORT TEMPLATE — bản sao chính xác theo Google Sheet gốc
   Đặt ngoài khung nhìn (không dùng display:none để html2canvas vẫn đo
   & vẽ được layout đúng).
=================================================================== */
.exp-offscreen-holder{
  position: fixed;
  top: 0;
  left: -99999px;
  width: 1100px;
  z-index: -1;
}
.exp-sheet{
  width: 1100px;
  background: #ffffff;
  padding: 2.5rem 2.8125rem 3.125rem;
  font-family: var(--Nunito-Sans), Arial, sans-serif;
  color: #1c1c1c;
  box-sizing: border-box;
}
.exp-title{
  text-align: center;
  font-family: var(--Open-Sans), Arial, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: .5px;
  color: var(--exp-title-gray);
  margin: 0 0 1.5625rem;
  text-transform: uppercase;
}
.exp-brand-name{
  font-family: var(--Open-Sans), Arial, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #1c1c1c;
  margin-bottom: .2rem;
}
.exp-brand-addr{font-size: .9375rem; color: #333; margin-bottom: .9375rem;}

.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-col label{
  display: block;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #8a93a3;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.exp-meta-line{
  font-size: .9375rem;
  color: #1c1c1c;
  min-height: 1.5rem;
  border-bottom: 1px solid #b9bfc9;
  padding-bottom: 3px;
  margin-bottom: 6px;
}
.exp-meta-line.exp-link{color: var(--exp-link);}
.exp-meta-line:last-child{margin-bottom: 0;}
.exp-meta-caption{font-size: .8125rem; color: #666; font-style: normal;}

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

.exp-table td{
  border: 1px solid var(--exp-border);
  padding: .625rem .625rem;
  vertical-align: middle;
  color: #1c1c1c;
}
.exp-table tbody tr:nth-child(odd):not(.exp-total-row) td{background-color: #fff;}
/* Dải màu xen kẽ rất nhạt cho dòng chẵn — giúp khách dễ dò theo hàng ngang
   khi báo giá có nhiều dịch vụ ở nhiều hạng mục khác nhau. Loại trừ
   .exp-total-row để không đè lên nền riêng (xanh lá nhạt) của dòng CHI PHÍ. */
.exp-table tbody tr:nth-child(even):not(.exp-total-row) td{background-color: #f7f8fa;}
.exp-col-date{text-align: center; font-weight: 600; white-space: nowrap;}
.exp-col-service{font-weight: 700; text-align: left;}
.exp-col-id{text-align: center; color: #6b7280;}
.exp-col-detail{text-align: left; line-height: 1.45;}
.exp-col-equip{text-align: left; font-size: .8125rem; color: #4b5563; line-height: 1.4;}
.exp-col-price, .exp-col-qty, .exp-col-linetotal{text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;}
.exp-col-qty{text-align: center;}

.exp-total-row td{
  background-color: #ffffff;
  font-weight: 700;
}
.exp-total-label{
  background-color: var(--exp-total-bg) !important;
  border-color: var(--exp-total-border) !important;
  font-family: var(--Open-Sans), Arial, sans-serif;
  font-weight: 800;
  text-align: center;
  color: #1c1c1c;
}
.exp-total-amount{
  background-color: var(--exp-total-bg) !important;
  border-color: var(--exp-total-border) !important;
  font-weight: 800;
  font-size: .9375rem;
}

.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{font-size: .75rem; color: #7c8493; line-height: 1.6; max-width: 32rem;}
.exp-footer-note strong{color: #1c1c1c;}
.exp-footer-sign{text-align: center; font-size: .8125rem; color: #333;}
.exp-footer-sign strong{display: block; margin-bottom: 2.5rem; font-size: .875rem;}

/* ===== 9. Trạng thái tải xuống (spinner nhỏ trong nút) ===== */
.qb-spin{
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: qb-spin-anim .7s linear infinite;
}
@keyframes qb-spin-anim{to{transform: rotate(360deg);}}

/* ===== Dark theme (tận dụng biến --dt-* đã có sẵn của site) ===== */
[data-theme="dark"] .qb-category,
[data-theme="dark"] .qb-customer,
[data-theme="dark"] .qb-summary,
[data-theme="dark"] .qb-modal-inner{
  background-color: var(--dt-surface);
  border-color: var(--dt-border-soft);
}
[data-theme="dark"] .qb-category-title span,
[data-theme="dark"] .qb-item-info p,
[data-theme="dark"] .qb-customer > p,
[data-theme="dark"] .qb-hint{color: var(--dt-text-muted);}
[data-theme="dark"] .qb-item-info h4,
[data-theme="dark"] .qb-summary-row-name,
[data-theme="dark"] .qb-summary-total span,
[data-theme="dark"] .qb-field label{color: var(--dt-text);}
[data-theme="dark"] .qb-item{border-color: var(--dt-border-soft);}
[data-theme="dark"] .qb-item-check .qb-box{background-color: var(--dt-surface2); border-color: var(--dt-border);}
[data-theme="dark"] .qb-qty{border-color: var(--dt-border);}
[data-theme="dark"] .qb-qty button{background-color: var(--dt-surface2); color: var(--dt-text);}
[data-theme="dark"] .qb-field input{background-color: var(--dt-surface2); color: var(--dt-text);}
[data-theme="dark"] .qb-summary-empty{color: var(--dt-text-muted);}
[data-theme="dark"] .qb-summary-row{border-color: var(--dt-border-soft);}
[data-theme="dark"] .qb-summary-total{border-color: var(--dt-border-soft);}
[data-theme="dark"] .qb-modal-bar{border-color: var(--dt-border-soft);}
[data-theme="dark"] .qb-modal-scroll{background-color: var(--dt-bg-soft);}
[data-theme="dark"] .qb-modal-close{background-color: var(--dt-surface2); color: var(--dt-text);}
[data-theme="dark"] .qb-mobile-bar{background-color: var(--dt-surface);}

/* ===== 10. Responsive fine-tuning ===== */
@media (max-width: 575px){
  .qb-category-head{padding: 1rem;}
  .qb-item{padding: 1rem;}
  .qb-item-info{flex-basis: 100%;}
  .exp-offscreen-holder{width: 1100px;} /* export vẫn cố định để ảnh/PDF luôn đẹp, không phụ thuộc màn hình khách */
}