/* KQT · So sánh sản phẩm — styling (Phase 4).
 * Dùng design tokens ở :root (kqt-chrome.css): --navy, --gold, --cream, --sans…
 * Gồm: (1) thanh bar dính đáy, (2) modal + bảng so sánh, (3) toast cảnh báo.
 * Nút .pc__compare trên card đã style sẵn ở kqt-category.css.
 */

/* ============================ 1 · THANH BAR ============================ */
.kqt-cbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:var(--navy,#0F1B2D); color:var(--on-navy,#F4F1E9);
  box-shadow:0 -18px 50px -28px rgba(15,27,45,.6);
  border-top:2px solid var(--gold,#D6A94E);
  transform:translateY(0); animation:kqtCbarUp .32s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.kqt-cbar[hidden]{ display:none; }
@keyframes kqtCbarUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }

.kqt-cbar__in{
  max-width:var(--maxw,1320px); margin:0 auto; padding:12px var(--gutter,40px);
  display:flex; align-items:center; gap:18px;
}
.kqt-cbar__label{
  display:flex; align-items:center; gap:9px; flex-shrink:0;
  font-family:var(--sans); font-weight:700; font-size:13.5px; letter-spacing:.01em;
  color:var(--gold-light,#E8C36A);
}
.kqt-cbar__label svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
.kqt-cbar__label b{ font-weight:700; }

.kqt-cbar__items{
  display:flex; align-items:center; gap:10px; flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.kqt-cbar__items::-webkit-scrollbar{ display:none; }

.kqt-cbar__item{
  position:relative; flex-shrink:0; width:56px; height:56px; border-radius:var(--radius,4px);
  background:rgba(244,241,233,.08); overflow:hidden;
  border:1px solid rgba(244,241,233,.16);
}
.kqt-cbar__item img{ width:100%; height:100%; object-fit:cover; display:block; }
.kqt-cbar__ph{ display:block; width:100%; height:100%; background:rgba(244,241,233,.06); }
.kqt-cbar__item--empty{
  background:transparent; border:1px dashed rgba(244,241,233,.22);
}
.kqt-cbar__rm{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; padding:0; margin:0;
  border-radius:50%; border:0; cursor:pointer; line-height:1;
  background:var(--gold,#D6A94E); color:var(--navy,#0F1B2D);
  font-size:15px; font-weight:700; display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3); transition:.15s var(--ease);
}
.kqt-cbar__rm:hover{ background:var(--gold-light,#E8C36A); transform:scale(1.08); }

.kqt-cbar__actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.kqt-cbar__clear{
  background:none; border:0; cursor:pointer; padding:6px 4px; margin:0;
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.01em;
  color:var(--on-navy-2,rgba(244,241,233,.64)); text-decoration:underline; text-underline-offset:3px;
  transition:.15s var(--ease);
}
.kqt-cbar__clear:hover{ color:var(--on-navy,#F4F1E9); }
.kqt-cbar__go{
  display:inline-flex; align-items:center; gap:6px; min-height:46px; padding:0 26px; margin:0;
  border:0; border-radius:var(--radius,4px); cursor:pointer;
  background:var(--gold-grad,linear-gradient(135deg,#C99A3B 0%,#E8C36A 100%)); color:var(--navy,#0F1B2D);
  font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:var(--shadow-gold,0 14px 34px -16px rgba(154,116,42,.5)); transition:.2s var(--ease);
}
.kqt-cbar__go:hover:not(:disabled){ filter:brightness(1.06); transform:translateY(-1px); }
.kqt-cbar__go:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* ============================ 2 · MODAL ============================ */
body.kqt-cmodal-open{ overflow:hidden; }

.kqt-cmodal{ position:fixed; inset:0; z-index:1300; }
.kqt-cmodal[hidden]{ display:none; }
.kqt-cmodal__scrim{
  position:absolute; inset:0; background:rgba(15,27,45,.62);
  backdrop-filter:blur(2px); animation:kqtFade .25s ease;
}
@keyframes kqtFade{ from{ opacity:0; } to{ opacity:1; } }

.kqt-cmodal__panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1080px,calc(100vw - 40px)); max-height:calc(100vh - 60px);
  display:flex; flex-direction:column;
  background:var(--white,#fff); border-radius:var(--radius-lg,8px); overflow:hidden;
  box-shadow:var(--shadow-2,0 18px 50px -28px rgba(15,27,45,.42));
  animation:kqtPop .28s var(--ease,cubic-bezier(.22,.61,.36,1));
}
@keyframes kqtPop{ from{ opacity:0; transform:translate(-50%,-46%) scale(.97); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }

.kqt-cmodal__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 24px; border-bottom:1px solid var(--taupe-12,rgba(30,45,66,.12)); flex-shrink:0;
}
.kqt-cmodal__head h2{
  margin:0; font-family:var(--serif); font-size:20px; font-weight:700; color:var(--navy,#0F1B2D);
}
.kqt-cmodal__x{
  width:38px; height:38px; padding:0; margin:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--paper,#F1EEE6); color:var(--navy,#0F1B2D); display:grid; place-items:center;
  transition:.15s var(--ease);
}
.kqt-cmodal__x svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
.kqt-cmodal__x:hover{ background:var(--navy,#0F1B2D); color:var(--on-navy,#F4F1E9); }

.kqt-cmodal__body{ overflow:auto; padding:0; }

/* ---------------------------- Bảng so sánh ---------------------------- */
/* MỖI SẢN PHẨM MỘT CỘT RỘNG BẰNG NHAU — `table-layout:fixed`.
 *
 * ĐO TRƯỚC KHI SỬA (2026-08-20, /bon-cau-toto/, màn 1920px, lòng modal 1065px):
 * bảng để `table-layout` mặc định (auto) nên bề rộng cột do ĐỘ DÀI CHỮ quyết định.
 *   · 2 SP: cột nhãn 167px, hai cột SP 324px và 543px — lệch 1,68 lần.
 *   · 3 SP: 268 / 240 / 358px — tâm ba tấm ảnh cách nhau 254px rồi 299px, không đều.
 * Hệ quả đúng như ông chủ nhìn ra: hai tấm ẢNH cách nhau 433px (vì ảnh canh giữa ô,
 * ô rộng thì ảnh dạt ra), trong khi hai GIÁ TRỊ chỉ cách nhau 324px (vì giá trị canh
 * trái, dính sát mép ô). Cùng một cột mà ảnh ở một đằng, số ở một nẻo.
 *
 * `fixed` lấy bề rộng từ HÀNG ĐẦU: ô nhãn đã ghim 172px, các ô SP không đặt width nên
 * chỗ còn lại chia đều tuyệt đối, bao nhiêu SP cũng vậy. Chữ dài không còn quyền thổi
 * cột rộng ra nữa — nên phải có `overflow-wrap` ở ô giá trị bên dưới để nó xuống dòng
 * thay vì tràn.
 *
 * Đổi kèm: MỘT ĐƯỜNG GIÓNG TRÁI cho cả cột. Ảnh, tên, giá, mọi giá trị đều bắt đầu ở
 * đúng một toạ độ x. Chọn canh TRÁI chứ không canh giữa vì đã đo 78 ô giá trị của
 * bảng này: ô rộng nhất 508px, 11 ô vượt 250px, 10 ô phải xuống dòng — canh giữa thì
 * 10 ô ấy so le hai mép. Cột nhãn bên trái vốn đã canh trái, nay cả bảng cùng một luật.
 */
.kqt-ctable{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0;
  font-family:var(--sans); background:#fff; }
.kqt-ctable th, .kqt-ctable td{
  padding:13px 18px; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--taupe-10,rgba(30,45,66,.08));
}
/* Cột trái = tên tiêu chí. Nền trắng + kẻ phải mảnh; dính trái khi cuộn ngang.
   Chữ THƯỜNG (không in hoa) để tên thông số tiếng Việt dễ đọc; một kiểu duy nhất
   cho mọi dòng — điểm khác biệt do thanh vàng mép trái nói, không phải do đổi màu. */
.kqt-ctable th[scope="row"]{
  text-align:left; white-space:normal; width:172px; min-width:150px; line-height:1.4;
  background:#fff; color:var(--ink-2,#4A5568);
  font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
  border-right:1px solid var(--taupe-10,rgba(30,45,66,.08));
  position:sticky; left:0; z-index:1;
}
/* Rê chuột vào 1 dòng → sáng cả hàng để mắt bám ngang qua các cột (bảng rộng). */
.kqt-ctable tbody tr.kqt-ctable__row--spec:hover > th[scope="row"],
.kqt-ctable tbody tr.kqt-ctable__row--spec:hover > td{ background:var(--gold-tint,#F6EEDC); }

.kqt-ctable__row--head td{ padding:24px 18px 18px; vertical-align:top; }
.kqt-ctable__row--head th[scope="row"]{ background:#fff; }
/* flex-start: ảnh nằm ĐÚNG trên đầu cột giá trị của chính nó, không dạt ra giữa ô. */
.kqt-ctable__prod{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.kqt-ctable__prod img{
  width:108px; height:108px; object-fit:cover; border-radius:var(--radius,4px);
  background:var(--paper,#F1EEE6); border:1px solid var(--taupe-10,rgba(30,45,66,.10));
}
.kqt-ctable__prod span{
  font-size:13.5px; font-weight:600; color:var(--ink,#1A2230); line-height:1.42;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere;
}
.kqt-ctable__prod:hover span{ color:var(--gold-dark,#9A742A); }
.kqt-ctable__row--price td{ padding-top:16px; padding-bottom:16px; }
.kqt-ctable__price{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--navy,#0F1B2D); }
.kqt-ctable__row--reg s{ color:var(--ink-3,#6B7686); font-size:13px; }
.kqt-ctable__row--rating td{ color:var(--gold-dark,#9A742A); font-weight:700; }
/* Dải tiêu đề nhóm "Thông số kỹ thuật" — băng navy trải suốt, dính trái.
   Ô này cũng mang scope="row" nên phải THẮNG luật cột trái `.kqt-ctable th[scope="row"]`
   (đặc hiệu 0,2,1). Dùng `.kqt-ctable tr.kqt-ctable__section th` (0,2,2) để đè chắc,
   nếu không băng navy bị luật nền-trắng của cột trái ăn mất. */
.kqt-ctable tr.kqt-ctable__section th{ text-align:left; padding:12px 18px;
  background:var(--navy,#0F1B2D);
  background-image:linear-gradient(90deg,var(--navy,#0F1B2D),#16273d); color:var(--gold-light,#E8C878);
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  border-right:0; border-bottom:0; position:sticky; left:0; }
/* Ô giá trị thông số — canh trái, chữ thường dễ đọc.
   `overflow-wrap:anywhere` là BẮT BUỘC từ khi bảng chạy `table-layout:fixed`: cột
   không nở theo chữ nữa, nên một mã model dài không dấu cách (VD "CW823NW/F1BV1")
   mà không cho phép ngắt giữa chữ thì nó tràn đè sang ô bên cạnh. */
.kqt-ctable__row--spec td{ text-align:left; font-size:13px; color:var(--ink,#1A2230);
  white-space:normal; line-height:1.45; overflow-wrap:anywhere; }
/* Dòng báo trạng thái trải hết bảng — canh giữa cho ra dáng lời nhắn, không phải dữ liệu. */
.kqt-ctable__loading td, .kqt-ctable__error td{ text-align:center;
  color:var(--ink-3,#6B7686); font-style:italic; }
.kqt-ctable__error td{ color:#B4432E; }

/* ---- Bố cục quyết-định-trước: khác biệt ở trên, giống nhau thu gọn ---- */
/* Ghi chú khi mọi thông số giống hệt nhau. */
.kqt-ctable__note td{ text-align:center; padding:14px; font-size:12.5px; font-style:italic; color:var(--ink-3,#6B7686); }
/* Banner NEAR_IDENTICAL: hai SP gần như giống hệt về thông số. */
.kqt-ctable__near td{ text-align:center; padding:12px 16px; font-size:12.5px; font-weight:600;
  color:var(--gold-dark,#9A742A); background:var(--gold-tint,#F6EEDC);
  border-top:1px solid var(--gold,#D6A94E); border-bottom:1px solid var(--gold,#D6A94E); }
/* Ô thiếu dữ liệu: "Đang cập nhật" + link tư vấn (thay cho '—', không đoán). */
.kqt-ctable__unknown{ color:var(--ink-3,#8A93A2); font-style:italic; }
.kqt-ctable__consult{ display:block; margin-top:2px; font-size:11.5px; font-weight:600;
  font-style:normal; color:var(--gold-dark,#9A742A); text-decoration:underline; }
.kqt-ctable__consult:hover{ color:var(--navy,#0F1B2D); }
/* Hàng nút "Xem/Ẩn N thông số giống nhau". */
.kqt-ctable__toggle td{ text-align:center; padding:10px; background:var(--paper,#F1EEE6); }
.kqt-ctable__toggle button{ display:inline-flex; align-items:center; gap:6px; padding:9px 18px;
  border:1px solid var(--line,#E6E8EC); border-radius:999px; background:#fff;
  color:var(--ink-2,#4A5568); font-size:12.5px; font-weight:600; cursor:pointer; transition:.2s var(--ease); }
.kqt-ctable__toggle button:hover{ border-color:var(--gold,#D6A94E); color:var(--navy,#0F1B2D);
  box-shadow:0 2px 10px -4px rgba(154,116,42,.4); }
.kqt-ctable__chev{ font-size:10px; line-height:1; }
/* D103 — khối MỞ SẴN thì dòng đầu của nó là dải tiêu đề, nút gấp nép mép phải.
   `float` chứ không `flex`: ô này là <th colspan> của bảng, đặt display:flex lên ô
   bảng là tự tay phá bố cục cột. `font:inherit` để nút cao đúng bằng dòng chữ tiêu
   đề — không lệch, không đội dải navy cao thêm pixel nào. Nút đứng TRƯỚC chữ trong
   HTML vì float phải ra trước nội dung nó nép cạnh; aria-label bù lại phần nghĩa. */
.kqt-ctable__section--gap .kqt-ctable__fold{
  float:right; margin-left:12px; padding:0; border:0; background:transparent; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--gold-light,#E8C878); opacity:.78;
  display:inline-flex; align-items:center; gap:5px; }
.kqt-ctable__section--gap .kqt-ctable__fold:hover{ opacity:1; text-decoration:underline; }
/* Dòng thông số giống nhau: mặc định ẩn, mờ hơn khi mở. */
.kqt-ctable__row--spec.is-samehide{ display:none; }
.kqt-ctable--showsame .kqt-ctable__row--spec.is-samehide{ display:table-row; }
.kqt-ctable--showsame .kqt-ctable__row--spec.is-samehide td{ color:var(--ink-3,#8A93A2); }
/* D104 — `is-thieuhide` xoá theo khối "chưa đủ dữ liệu": bảng v2 nay chạy một mạch,
   không giấu dòng nào sau nút nữa, nên luật ẩn ấy không còn ai mang. `is-samehide`
   ở trên PHẢI ở lại — đường v1 (đường rơi về khi engine hỏng) vẫn dùng. */
/* ---- Riêng của bảng v2 (engine PHP tính sẵn) ---- */
/* "Không áp dụng" — khái niệm không tồn tại với SP này. KHÁC "Đang cập nhật" (chưa biết)
   nên phải nhìn ra khác: mờ đi chứ không in nghiêng như ô thiếu dữ liệu. */
.kqt-ctable__na{ color:var(--ink-3,#8A93A2); }
/* Ô thắng ở tiêu chí có better=higher/lower — tô nền vàng nhạt + mũi tên nhỏ. */
.kqt-ctable__row--spec td.is-win{ font-weight:700; color:var(--gold-dark,#9A742A);
  background:var(--gold-tint,#F6EEDC); box-shadow:inset 0 0 0 1px rgba(214,169,78,.35); }
.kqt-ctable__row--spec td.is-win::after{ content:'▲'; font-size:8px; margin-left:6px; vertical-align:2px; color:var(--gold-dark,#9A742A); }
/* D102-4 — MỐC NHÓM G1–G8, KHÔNG CHIẾM MỘT DÒNG NÀO.
   Bản chốt v1 bảo bày bảng theo 8 nhóm schema. Đo trên 1.500 cặp bồn cầu thật: chèn
   một `<tr>` tiêu đề trước mỗi nhóm làm bảng cao từ 4,13 lên 7,03 dòng mở sẵn (+70%),
   vì khối "Điểm khác biệt" chỉ có 3,92 dòng trải trên 2,77 nhóm và 62,45% số nhóm chỉ
   có ĐÚNG MỘT dòng. Nên tên nhóm in nhỏ nằm TRONG cột trái của dòng đầu mỗi nhóm, kèm
   một gạch phân nhóm — bảng vẫn đọc G1→G8, mà không đẻ thêm dòng nào. */
.kqt-ctable__row--spec.is-daunhom > th,
.kqt-ctable__row--spec.is-daunhom > td{ border-top:1px solid rgba(214,169,78,.4); }
.kqt-ctable__nhom{ display:block; margin-bottom:4px; font-size:9.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3,#8A93A2); }
/* D104 — DÒNG "HAI SP KHÁC NHAU": thanh VÀNG mép trái nói thay, không dùng ◆ nữa.
   Trước đây stack 3 lớp trong cột trái (nhãn nhóm vàng + tên navy đậm + ◆ đuôi) làm
   cột trái rối. Nay một tín hiệu DUY NHẤT: thanh vàng inset mép trái ô tiêu chí. Tên
   giữ đậm + màu navy để nổi, nhưng không còn ký tự ◆ chen ngang. */
.kqt-ctable__row--spec.is-khac > th{ font-weight:700; color:var(--navy,#0F1B2D);
  box-shadow:inset 3px 0 0 var(--gold,#D6A94E); }
.kqt-ctable__row--spec.is-khac > td{ font-weight:600; }
/* ◆ + nhãn "Khác nhau:" nay CHỈ dành cho bộ đọc màn hình — thanh vàng đã lo phần nhìn.
   Ẩn bằng clip (không display:none) để screen-reader vẫn đọc được "Khác nhau:". */
.kqt-ctable__dau{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.kqt-ctable__doc{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* D104 — `.kqt-ctable__caption` xoá theo dòng chú thích dưới dải "Thông số khác
   (chưa chuẩn hoá)": ông chủ khoanh đỏ đúng cả dải lẫn dòng chú thích ấy. Không nơi
   nào khác dựng lớp này (đường v1 không có khối passthrough), nên để lại là rác. */
/* Dòng passthrough: tên thông số giữ nguyên văn của nhà bán, chưa qua registry. */
.kqt-ctable__row--pass th{ font-weight:500; color:var(--ink-2,#4A5568); }

.kqt-ctable__cart{
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 20px;
  border:1.5px solid var(--gold,#D6A94E); border-radius:var(--radius,4px);
  background:var(--gold-tint,#F6EEDC); color:var(--gold-dark,#9A742A);
  font-size:12.5px; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:.2s var(--ease);
}
.kqt-ctable__cart:hover{ background:var(--gold,#D6A94E); color:var(--navy,#0F1B2D); }
.kqt-ctable__cart.added, .kqt-ctable__cart.loading{ opacity:.7; }

/* ============================ 3 · TOAST ============================ */
.kqt-ctoast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,12px); z-index:1400;
  max-width:min(420px,calc(100vw - 32px)); padding:13px 20px; border-radius:var(--radius,4px);
  background:var(--navy,#0F1B2D); color:var(--on-navy,#F4F1E9);
  font-family:var(--sans); font-size:13.5px; font-weight:500; line-height:1.5;
  box-shadow:var(--shadow-2,0 18px 50px -28px rgba(15,27,45,.42));
  border-left:3px solid var(--gold,#D6A94E);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.kqt-ctoast.is-show{ opacity:1; transform:translate(-50%,0); }

/* ============================ RESPONSIVE ============================ */
@media (max-width:860px){
  .kqt-cbar__in{ padding:10px 16px; gap:12px; flex-wrap:wrap; }
  .kqt-cbar__label{ font-size:12.5px; }
  .kqt-cbar__label b{ display:none; }
  .kqt-cbar__item{ width:48px; height:48px; }
  .kqt-cbar__go{ min-height:42px; padding:0 18px; font-size:12px; }

  .kqt-cmodal__panel{ width:100vw; height:100vh; max-height:100vh; border-radius:0;
    left:0; top:0; transform:none; }
  @keyframes kqtPop{ from{ opacity:0; transform:translateY(2%); } to{ opacity:1; transform:translateY(0); } }
  .kqt-cmodal__panel{ animation:kqtPop .28s var(--ease); }
  .kqt-ctable th, .kqt-ctable td{ padding:12px 12px; }
  .kqt-ctable th[scope="row"]{ width:120px; min-width:110px; font-size:11.5px; padding:12px; }
  /* SÀN BỀ RỘNG CỘT TRÊN ĐIỆN THOẠI — đặt trên BẢNG, không đặt trên ô.
     `table-layout:fixed` bỏ qua `min-width` của ô (chỉ `width` ở hàng đầu mới có
     tiếng nói), nên luật cũ `.kqt-ctable td{min-width:150px}` từ nay là chữ chết.
     Công thức: 120px cột nhãn + 150px mỗi cột SP. Bảng rộng hơn màn thì
     `.kqt-cmodal__body{overflow:auto}` cho cuộn ngang — đúng như trước. */
  .kqt-ctable--n2{ min-width:420px; }
  .kqt-ctable--n3{ min-width:570px; }
  .kqt-ctable--n4{ min-width:720px; }
  .kqt-ctable__section th{ padding:11px 12px; }
  .kqt-ctable__prod img{ width:84px; height:84px; }
  .kqt-ctable__price{ font-size:17px; }
  .kqt-ctoast{ bottom:84px; }
}