/* =========================================================================
   VOLTIC — CSS TRANG "HƯỚNG DẪN SỬ DỤNG"
   (chỉ nạp đúng mẫu trang page-templates/guide.php — xem inc/enqueue.php)

   BỐ CỤC TÀI LIỆU KỸ THUẬT 2 CỘT (anh chốt 06/08/2026):

     [ menu dính theo cuộn 268px ] [ nội dung, tối đa 860px, căn giữa ]

   Bản đầu có thêm cột mục lục bên phải — anh bảo bỏ để nội dung rộng ra. Mục lục
   trong trang đã GỘP vào menu trái (xổ dưới tài liệu đang xem), không mất chức năng.

   Nguyên tắc lấy từ ảnh mẫu trang tài liệu anh gửi:
    · nền TRẮNG, không dải màu đậm — mắt đi thẳng vào chữ;
    · menu DÍNH theo cuộn, mục đang đọc tô đỏ;
    · menu cho biết đang ở tài liệu nào trong bộ, nhảy qua lại được;
    · phân cách bằng KHOẢNG TRẮNG, không kẻ đường ngang giữa các mục;
    · đỏ chỉ dùng cho liên kết và mục đang đọc — không tô số, không nhấn thừa.

   Mọi class prefix `guide-`, bọc trong `.guide-page` để KHÔNG đụng main.css.
   ⚠️ ĐỪNG gộp margin/line-height vào rule `.guide-page h1,h2` — nó mạnh hơn class
   riêng và sẽ đè mất khoảng cách (bẫy #2 của trang So sánh).

   📄 CUỐI FILE là khối @media print — bản in/PDF sinh thẳng từ trang này.
   ====================================================================== */

.guide-page{
  --guide-ink:#0B1F35;  --guide-red:#D21F25; --guide-blue:#1B4E8F;
  --guide-muted:#5A6672; --guide-line:#E7EBF0; --guide-band:#F4F7FB; --guide-bg2:#FAFBFD;
  --guide-font-heading:'Plus Jakarta Sans',system-ui,sans-serif;
  --guide-radius:12px;
  background:#fff;

  /* Khoảng cách từ đỉnh màn hình xuống, dùng CHUNG cho menu dính và cho vị trí
     dừng khi bấm mục lục. Header `.hdr` cao 81px (co còn 60px khi cuộn), cộng lề
     thở ⇒ 104px. Sửa số này là cả hai chỗ đổi theo, không lệch nhau. */
  --guide-sticky:104px;
}
/* ⚠️ Khi ĐĂNG NHẬP, WordPress chèn thanh admin cao 32px và main.css đẩy header
   xuống (`body.admin-bar .hdr{top:32px}`) ⇒ đáy header tụt xuống 113px. Thiếu rule
   này thì menu trái bị header ĐÈ LÊN — đúng lỗi anh báo 06/08/2026. Khách chưa
   đăng nhập không có thanh này nên vẫn dùng 104px. */
body.admin-bar .guide-page{--guide-sticky:136px}
.guide-page img{max-width:100%;height:auto;display:block}   /* height:auto — bẫy #0 CLAUDE.md */

/* ---------- KHUNG 2 CỘT (anh chốt 06/08/2026) ----------
   [ menu dính theo cuộn 268px ] [ nội dung ]
   Bỏ cột phải để nội dung rộng ra; mục lục trong trang đã gộp vào menu trái. */
.guide-layout{
  display:grid;
  grid-template-columns:268px minmax(0,1fr);
  gap:clamp(30px,4.2vw,68px);
  align-items:start;
  padding-block:clamp(24px,3vw,42px) clamp(40px,5vw,72px);
}
/* Nội dung CĂN GIỮA phần còn lại, giới hạn 860px: dài quá ~85 ký tự một dòng là
   mỏi mắt, mà để dính sát menu thì trang lệch hẳn sang phải ở màn rộng. */
.guide-content{min-width:0;max-width:860px;margin-inline:auto;width:100%}

/* ---------- MENU TRÁI ---------- */
/* ⚠️ BẮT BUỘC để menu CHẠY THEO khi cuộn: cột menu phải CAO BẰNG CẢ HÀNG.
   `.guide-layout` đặt `align-items:start` nên grid item chỉ cao bằng nội dung (520px),
   mà khối sticky bên trong cũng 520px ⇒ khoảng chạy = 0 ⇒ menu ĐỨNG IM, cuộn qua
   là mất hút (anh báo 06/08/2026). `align-self:stretch` cho cột này cao bằng cột
   nội dung (7297px) thì sticky mới có đường mà bám. */
.guide-side{align-self:stretch}

/* Dính theo cuộn + TỰ CUỘN khi danh sách dài hơn màn hình — thiếu max-height thì
   mục cuối (hộp hotline) bị khuất vĩnh viễn trên laptop màn thấp.
   🚫 overflow ở ĐÂY không sao (nó là chính phần tử sticky); nhưng đừng bao giờ đặt
   overflow hidden/auto lên `.guide-side` hay `.guide-layout` — cha có overflow là sticky chết. */
/* Khối dính gồm: nút mở (mobile) · nút In · danh sách.
   Dùng flex + `order` để đảo thứ tự giữa desktop và mobile mà không phải lặp HTML. */
.guide-side-sticky{position:sticky;top:var(--guide-sticky);
  max-height:calc(100vh - var(--guide-sticky) - 24px);overflow-y:auto;
  display:flex;flex-direction:column;padding-right:6px;scrollbar-width:thin}
.guide-side-sticky::-webkit-scrollbar{width:5px}
.guide-side-sticky::-webkit-scrollbar-thumb{background:var(--guide-line);border-radius:3px}
.guide-side-body{order:1}          /* desktop: danh sách trước… */
.guide-print-btn   {order:2}          /* …rồi mới tới nút In */

.guide-side-toggle{display:none}          /* chỉ dùng ở điện thoại */
.guide-side-group{margin-bottom:24px}
.guide-side-link{display:block;padding:8px 12px;margin-left:-12px;border-radius:8px;
  font-size:14.5px;line-height:1.45;color:var(--guide-muted);
  transition:color .15s ease,background-color .15s ease}
.guide-side-link:hover{color:var(--guide-ink);background:var(--guide-band)}
.guide-side-link.on{color:var(--guide-ink);font-weight:700;background:var(--guide-band)}

/* Mục trong trang — xổ ngay dưới tài liệu đang xem, thụt vào cho thấy cấp bậc. */
.guide-toc-list{display:flex;flex-direction:column;margin:4px 0 6px 4px;
  border-left:2px solid var(--guide-line)}
.guide-toc-list a{padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;
  font-size:13.5px;line-height:1.45;color:var(--guide-muted);
  transition:color .15s ease,border-color .15s ease}
.guide-toc-list a:hover{color:var(--guide-ink)}
.guide-toc-list a.on{color:var(--guide-red);font-weight:700;border-left-color:var(--guide-red)}

.guide-print-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-bottom:18px;padding:10px 12px;border:1px solid var(--guide-line);border-radius:9px;
  background:#fff;cursor:pointer;font-family:var(--guide-font-heading);font-size:13px;font-weight:700;
  color:var(--guide-ink);transition:border-color .15s ease,color .15s ease}
.guide-print-btn:hover{border-color:var(--guide-red);color:var(--guide-red)}
.guide-print-btn svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor}

.guide-side-support{padding:15px;border:1px solid var(--guide-line);border-radius:var(--guide-radius);
  background:var(--guide-bg2)}
.guide-side-support b{display:block;font-family:var(--guide-font-heading);font-size:12.5px;font-weight:800;color:var(--guide-ink)}
.guide-side-support a{display:flex;align-items:center;gap:8px;margin-top:8px;
  font-family:var(--guide-font-heading);font-size:15.5px;font-weight:800;color:var(--guide-red)}
.guide-side-support svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor}

/* ---------- đầu trang ---------- */
.guide-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--guide-muted)}
.guide-crumb a{color:var(--guide-red)}
.guide-crumb a:hover{text-decoration:underline}
.guide-page .guide-head h1{font-family:var(--guide-font-heading);font-size:clamp(28px,4vw,42px);font-weight:800;
  line-height:1.15;letter-spacing:-.02em;color:var(--guide-ink);margin:14px 0 0}
.guide-subtitle{margin:12px 0 0;font-size:16px;line-height:1.65;color:var(--guide-muted)}
.guide-intro{margin:22px 0 0;padding:16px 18px;border-radius:var(--guide-radius);background:var(--guide-band);
  font-size:14.5px;line-height:1.7;color:var(--guide-ink)}

/* ---------- mục nội dung ----------
   Phân cách bằng KHOẢNG TRẮNG, không kẻ ngang — đây là điểm khác rõ nhất so với
   bản đầu (mỗi mục một đường kẻ làm trang trông như bảng kê). */
/* scroll-margin-top dùng CHUNG biến với menu dính: bấm một mục ở mục lục thì tiêu đề
   dừng ngay dưới header, không bị header che mất. */
/* ⚠️ Trang này KHÔNG có đường kẻ ngăn giữa các mục, nên khoảng trắng chính là thứ
   duy nhất phân tách chúng. Đã hạ 2 lần theo yêu cầu của anh: 58 → 40 → 32px ở màn
   rộng, 38 → 26 → 22px ở màn hẹp.
   🚫 ĐỪNG hạ tiếp nữa: dưới ~20px thì tiêu đề mục sau dính vào đoạn cuối của mục
   trước, người đọc không nhận ra đã sang mục mới. Muốn gọn hơn thì phải thêm lại
   đường kẻ ngăn để bù cho khoảng trắng bị mất. */
.guide-sec{padding-top:clamp(22px,2.6vw,32px);scroll-margin-top:var(--guide-sticky)}
.guide-page .guide-h2{margin:0 0 4px}
.guide-page .guide-h2 span{font-family:var(--guide-font-heading);font-size:clamp(20px,2.4vw,27px);font-weight:800;
  line-height:1.3;letter-spacing:-.01em;color:var(--guide-ink)}
.guide-page h3.guide-h2{margin-top:24px}
.guide-lead{margin:14px 0 0;font-size:15.5px;line-height:1.75;color:var(--guide-muted)}

/* ---------- danh sách BƯỚC (nội dung là quy trình có thứ tự thật) ---------- */
.guide-steps{list-style:none;margin:24px 0 0;padding:0;counter-reset:hdb}
.guide-steps>li{position:relative;padding:0 0 22px 46px;counter-increment:hdb}
.guide-steps>li::before{content:counter(hdb);position:absolute;left:0;top:-1px;width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;background:var(--guide-band);color:var(--guide-blue);
  font-family:var(--guide-font-heading);font-weight:800;font-size:13px}
/* đường nối giữa các bước — cho thấy đây là chuỗi liên tục, không phải danh sách rời */
.guide-steps>li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:32px;bottom:4px;
  width:1px;background:var(--guide-line)}
.guide-steps p{margin:0;font-size:15.5px;line-height:1.75;color:var(--guide-ink)}

/* danh sách gọn (quy trình tóm tắt, tính năng) */
.guide-list{margin:18px 0 0;padding-left:20px}
.guide-list li{font-size:15.5px;line-height:1.75;margin-bottom:10px;color:var(--guide-ink)}

/* ---------- hộp lưu ý ---------- */
.guide-note{margin:26px 0 0;padding:16px 18px;border-radius:var(--guide-radius);
  background:#FFF7F7;border-left:3px solid var(--guide-red)}
.guide-page .guide-note h3{font-family:var(--guide-font-heading);font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--guide-red);margin:0 0 10px}
.guide-note ul{margin:0;padding-left:18px}
.guide-note li{font-size:14.5px;line-height:1.7;margin-bottom:8px;color:var(--guide-ink)}
.guide-note li:last-child{margin-bottom:0}

/* ---------- ảnh minh hoạ ---------- */
.guide-figure{margin:24px 0 0;border:1px solid var(--guide-line);border-radius:var(--guide-radius);overflow:hidden;background:#fff}
.guide-figure img{width:100%}
.guide-figure figcaption{padding:10px 15px;font-size:12.5px;color:var(--guide-muted);
  background:var(--guide-bg2);border-top:1px solid var(--guide-line)}

/* ---------- bảng ---------- */
.guide-table-wrap{margin:22px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--guide-line);border-radius:var(--guide-radius)}
.guide-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.guide-table th,.guide-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--guide-line);
  vertical-align:top;line-height:1.6}
.guide-table thead th{background:var(--guide-bg2);color:var(--guide-ink);font-family:var(--guide-font-heading);font-weight:800;
  font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.guide-table tbody tr:last-child td{border-bottom:0}
.guide-table td:first-child{font-weight:600;color:var(--guide-ink)}
/* mã lỗi in đỏ đậm — đây là thứ người dùng quét mắt tìm khi máy báo lỗi */
.guide-code{font-family:var(--guide-font-heading);font-weight:800;color:var(--guide-red)}

/* ---------- khối bảo hành ---------- */
.guide-warranty p{margin:0 0 14px;font-size:15.5px;line-height:1.75;color:var(--guide-ink)}
.guide-closing{margin-top:24px;padding:18px;border-radius:var(--guide-radius);background:var(--guide-band);
  font-family:var(--guide-font-heading);font-weight:700;font-size:14.5px;line-height:1.65;color:var(--guide-ink)}
.guide-contact{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14.5px;color:var(--guide-muted)}
.guide-contact a{color:var(--guide-red);font-weight:700}
.guide-contact a:hover{text-decoration:underline}

/* chỉ hiện khi IN — trên màn hình thì ẩn */
.guide-print-only{display:none}

/* =========================================================================
   RESPONSIVE — bỏ cột theo thứ tự ưu tiên: mục lục trước, điều hướng sau.
   ====================================================================== */
@media (max-width:1100px){
  /* Máy tính bảng nằm ngang: thu menu lại cho nội dung thở. */
  .guide-layout{grid-template-columns:236px minmax(0,1fr);gap:32px}
  .guide-side-link{font-size:14px}
}
@media (max-width:900px){
  /* Máy tính bảng dọc + điện thoại: MỘT cột, menu thu thành nút bấm mở.
     ⚠️ PHẢI ghi rõ grid-column:1 cho CẢ HAI khối. Chỉ đặt grid-row mà bỏ trống cột
     thì lưới TỰ SINH CỘT NGẦM thứ hai — cột chữ bị ép còn 88px ở màn 375 và tràn
     ngang ở 320px (đã dính đúng lỗi này ngày 06/08). */
  .guide-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .guide-side     {grid-column:1;grid-row:1;margin-bottom:18px}
  .guide-content {grid-column:1;grid-row:2;max-width:none}

  /* Menu thành hộp gập; NÚT IN nằm CẠNH nút mở, luôn nhìn thấy.
     ⚠️ Đừng để nút In bên trong khối gập — menu đóng sẵn nên nút bị che, khách không
     tìm ra (anh báo 06/08/2026). Đây là hàng nút chính của trang tài liệu. */
  .guide-side-sticky{position:static;max-height:none;overflow:visible;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;padding-right:0}
  .guide-side-toggle{grid-column:1;grid-row:1;
    display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;
    border:1px solid var(--guide-line);border-radius:var(--guide-radius);background:var(--guide-bg2);
    cursor:pointer;font-family:var(--guide-font-heading);font-size:14.5px;font-weight:700;color:var(--guide-ink)}
  .guide-side-toggle svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor}
  .guide-side-caret{margin-left:auto;transition:transform .2s ease}
  .guide-side-toggle[aria-expanded="true"] .guide-side-caret{transform:rotate(180deg)}

  .guide-print-btn{grid-column:2;grid-row:1;width:auto;margin:0;padding:13px 16px;
    white-space:nowrap;background:var(--guide-bg2)}
  /* Màn rất hẹp: chữ "In / Lưu PDF" đẩy nút mở co lại quá — chỉ để icon, có title đọc được. */

  .guide-side-body{grid-column:1 / -1;grid-row:2;
    display:none;position:static;max-height:none;overflow:visible;
    margin-top:0;padding:16px;border:1px solid var(--guide-line);border-radius:var(--guide-radius)}
  .guide-side-body--open{display:block}
  .guide-side-group:last-of-type{margin-bottom:18px}
}
@media (max-width:420px){
  /* Hai nút không đủ chỗ nằm ngang: nút In thu về ICON, giữ vùng bấm 44px. */
  .guide-print-btn span{display:none}
  .guide-print-btn{padding:13px}
}
@media (max-width:640px){
  .guide-steps>li{padding-left:40px}
  .guide-steps>li::before{width:26px;height:26px;font-size:12.5px}
  .guide-steps>li:not(:last-child)::after{left:12.5px;top:30px}
  .guide-intro{padding:14px}
}

/* =========================================================================
   BẢN IN — nguồn của file PDF khách tải về
   HTML là bản chính, PDF sinh từ đây bằng lệnh in của trình duyệt ⇒ nội dung
   KHÔNG BAO GIỜ lệch nhau, và ngày in luôn là ngày thật.
   🚫 Đừng thêm thư viện JS sinh PDF: nặng, font tiếng Việt hay mất dấu.
   ====================================================================== */
@media print{
  /* Bỏ mọi thứ không thuộc tài liệu — gồm cả cột điều hướng và khối bán hàng.
     🔴 `.cta-sec` MỚI LÀ THẺ BAO NGOÀI của khối "Sẵn sàng đồng hành cùng Voltic?"
     (template-parts/blocks/cta.php dòng 27). Trước đây danh sách này ghi `.cta` —
     mà `.cta` chỉ trúng cái <div class="cta cta-buttons"> BÊN TRONG (2 cái nút),
     nên cả hộp xanh nhạt + 120px padding của section vẫn in ra: đo thật 285px
     ≈ 76mm ≈ 28% chiều cao in được của A4 ⇒ đẻ thêm một trang gần như trắng
     (anh báo 06/08/2026: "phía cuối trang đang bị dư").
     Sở dĩ nhìn ra "trang TRẮNG" chứ không phải "khối lạ": bên trong nó là
     `.cta-info.scroll-reveal`, mà scroll-reveal để opacity:0 cho tới khi người đọc
     CUỘN TỚI. Bấm nút In ở menu trái (menu dính, luôn thấy) thì chưa cuộn tới đáy
     ⇒ chữ vô hình nhưng vẫn chiếm đủ chỗ.
     🚫 ĐỪNG viết class cha rồi tưởng nó trùm được class con — CSS khớp TÊN CLASS
     CHÍNH XÁC, `.cta` không bao giờ trúng `class="cta-sec"`.
     ℹ️ Đã bỏ `.hd-ml` khỏi danh sách: không phần tử nào mang class đó (chỉ có
     `guide-print-btn` là nút In và `guide-toc-list` là mục lục, cả hai nằm trong `.guide-side` nên
     đã bị ẩn sẵn). Giữ selector chết chỉ tạo cảm giác sai là danh sách đã phủ hết
     — đúng thứ đã làm lọt lỗi `.cta` ở trên. */
  .hdr,.ft,.floating-contact,.guide-side,.guide-crumb,.cta-sec,
  #wpadminbar,.voltic-live-edit-bar,.vt-img-btn,.vt-bar{display:none !important}

  /* orphans/widows: không để một dòng lẻ loi bị đẩy sang trang sau (hoặc bỏ lại
     trang trước). Thiếu hai dòng này là bản in đầy những đoạn bị cắt cụt 1 dòng. */
  html,body{background:#fff !important;color:#000;orphans:3;widows:3}
  .guide-layout{display:block;padding:0 !important;gap:0}
  .guide-page{padding:0;margin:0;background:#fff !important}
  .guide-content{max-width:100%;margin:0;width:auto}
  .guide-sec{padding-top:14pt;break-inside:auto}

  /* Lưới an toàn: phần tử cuối còn margin/padding-bottom thì trình duyệt tính
     thành nội dung và đẻ thêm giấy. Hiện tại đây là NO-OP (`.guide-sec` chỉ khai
     padding-top; phần tử cuối của mục bảo hành là `.guide-contact` chỉ có margin-top)
     — giữ lại để phòng khi thêm khối mới có lề đáy.
     ⚠️ ĐÂY KHÔNG PHẢI chỗ đã chữa lỗi "dư cuối bản in" ngày 06/08/2026. Thủ phạm
     nằm NGOÀI `<article class="guide-content">` — là `.cta-sec` ở cuối mẫu trang
     (page-templates/guide.php dòng 64), xem ghi chú ở danh sách ẩn phía trên.
     Đừng sửa quanh đây nữa nếu bản in lại dư: kiểm danh sách ẩn TRƯỚC. */
  .guide-content > :last-child,
  .guide-sec:last-of-type,
  .guide-sec:last-of-type > :last-child{margin-bottom:0 !important;padding-bottom:0 !important}

  /* đầu trang in: tên công ty + ngày + hotline. Ngày do PHP in ra lúc tải trang. */
  .guide-print-only{display:block}
  .guide-print-head{border-bottom:2pt solid #000;padding-bottom:6pt;margin-bottom:14pt}
  .guide-print-head b{font-size:13pt;letter-spacing:.04em}
  .guide-print-head span{display:block;font-size:8.5pt;color:#333;margin-top:3pt}

  .guide-page .guide-head h1{font-size:19pt}
  .guide-subtitle{font-size:10pt}
  .guide-intro{background:#f4f4f4 !important;font-size:9.5pt;padding:8pt;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  .guide-page .guide-h2 span{font-size:13pt}
  .guide-steps p,.guide-list li,.guide-warranty p{font-size:10pt;line-height:1.55}
  .guide-steps>li::before{background:#eee !important;color:#000 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Mỗi BƯỚC lắp đặt là một đơn vị đọc — cắt đôi giữa hai trang giấy là thợ đọc
     nửa câu rồi phải lật trang. Cho cả mục quy trình/tính năng luôn. */
  .guide-steps>li,.guide-list li,.guide-contact{break-inside:avoid}
  /* Số bước nối bằng đường kẻ dọc — đường đó vô nghĩa khi sang trang mới. */
  .guide-steps>li:not(:last-child)::after{display:none}

  /* bảng mã lỗi thường dài — cho phép tách trang nhưng không cắt giữa dòng */
  .guide-table-wrap{overflow:visible;border-color:#999}
  .guide-table{min-width:0;font-size:9pt}
  .guide-table thead{display:table-header-group}          /* lặp tiêu đề ở mỗi trang in */
  .guide-table tr{break-inside:avoid}
  .guide-table thead th{background:#ddd !important;color:#000 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  .guide-figure{break-inside:avoid;border-color:#999}
  .guide-note{border-color:#999;background:#f7f7f7 !important;break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .guide-closing{background:#fff !important;border:1pt solid #000;font-size:10pt;break-inside:avoid}

  /* Tiêu đề không được đứng một mình ở đáy trang: `break-after:avoid` giữ nó đi cùng
     nội dung phía sau. Thêm `break-before:auto` để không tự nhảy trang vô cớ. */
  h1,h2,h3{break-after:avoid;break-before:auto}
  .guide-h2{break-after:avoid}
  a{color:#000 !important;text-decoration:none}
  /* in URL sau liên kết ngoài để bản giấy vẫn tra được */
  .guide-contact a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}
@page{margin:14mm 12mm}