/* helpflow.css — ศูนย์ช่วยเหลือเครื่องพิมพ์และอุปกรณ์ (drivers.html + help-*.html · 2026-11-02)
   แนว "ตรวจอัตโนมัติปุ่มเดียว + คู่มือภาพสั้น" · กล่องตรวจ pc- (assets/printercheck.js) · การ์ดภาพ vg- · ส่วนอื่น hp-
   ตัวสร้าง notes/drivers/make_help_pages.py + make_drivers.py + pcheck_ui.py */
:root{--hp-blue:#1d4ed8;--hp-navy:#0f2a5c;--hp-sky:#eef4ff;--hp-green:#15803d;--hp-green-bg:#eaf7ef;--hp-red:#b91c1c;--hp-red-bg:#fdecec;--hp-amber:#b45309;--hp-amber-bg:#fff6e5;--hp-line:#d8e2f0;--hp-mut:#53627a}
.hp-wrap{max-width:1040px;margin:0 auto;padding:0 18px}
.hp-ic,.pc-ic{width:20px;height:20px;flex:0 0 auto}

/* ── หัวหน้า (help-*) ── */
.hp-hero{background:linear-gradient(135deg,#0f2a5c,#1d4ed8);color:#fff;padding:24px 0 26px}
.hp-kick{margin:0 0 6px;font-size:14px;font-weight:700;color:#bfdbfe}
.hp-hero h1{margin:0 0 8px;font-size:clamp(25px,4vw,38px);line-height:1.25}
.hp-hero p{margin:0 0 12px;max-width:760px;color:#dbeafe;line-height:1.7}
.hp-models{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;padding:0;list-style:none}
.hp-models li{padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-size:13.5px;font-weight:700}
.hp-hero .hp-mnote{margin:0 0 14px;font-size:13px;color:#bfdbfe}
.hp-hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

/* ── ปุ่ม ── */
.hp-btn,.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:12px;border:2px solid transparent;
  font:inherit;font-size:16px;font-weight:700;line-height:1.3;text-decoration:none;cursor:pointer;text-align:center}
.hp-btn-main{background:#fff;color:var(--hp-navy)}
.hp-btn-main:hover{background:#e8efff}
.hp-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hp-btn-ghost:hover{background:rgba(255,255,255,.14)}
.hp-btn-blue,.pc-btn-blue{background:var(--hp-blue);color:#fff}
.hp-btn-blue:hover,.pc-btn-blue:hover{background:#1e40af}
.hp-btn-line,.pc-btn-line{background:#06c755;color:#fff}
.hp-btn-line:hover,.pc-btn-line:hover{background:#05a948}
.hp-btn-out,.pc-btn-out{background:#fff;color:var(--hp-blue);border-color:var(--hp-blue)}
.hp-btn-out:hover,.pc-btn-out:hover{background:var(--hp-sky)}

/* ── กล่องตรวจอัตโนมัติ ── */
/* ── กล่องตรวจเครื่องพิมพ์ (2026-11-03 เจ้าของสั่ง: แนวเครื่องมือ Diagnostic · ปุ่มใหญ่ ผลใหญ่ สีสถานะชัด ข้อความน้อย) ── */
.pc-hero h1{font-size:clamp(15px,1.8vw,18px)!important;margin:6px 0 14px!important;opacity:.85}
.pc-box{max-width:760px;margin:0 auto;background:#fff;color:var(--hp-navy);border:1px solid var(--hp-line);border-radius:26px;padding:28px 24px 22px;
  box-shadow:0 30px 60px -36px rgba(15,42,92,.65);text-align:center}
.pc-box p,.pc-box h3,.pc-box b{color:inherit}
.pc-title{margin:0 0 16px!important;font-size:clamp(24px,3.2vw,32px);font-weight:800;line-height:1.25;color:var(--hp-navy)!important;text-align:center}
.pc-big .pc-title{font-size:clamp(28px,4.4vw,42px)}
.pc-go{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:100%;max-width:480px;min-height:76px;padding:16px 28px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font:inherit;font-size:clamp(21px,2.6vw,26px);font-weight:800;
  box-shadow:0 0 0 8px rgba(22,163,74,.13),0 18px 32px -16px rgba(21,128,61,.85);transition:transform .15s ease,box-shadow .15s ease}
.pc-go:hover{transform:translateY(-2px);box-shadow:0 0 0 10px rgba(22,163,74,.18),0 22px 36px -16px rgba(21,128,61,.9)}
.pc-go:focus-visible{outline:4px solid #f59e0b;outline-offset:4px}
.pc-go .pc-ic{width:32px;height:32px}
.pc-sub{margin:14px auto 0!important;color:var(--hp-mut)!important;font-size:16px;text-align:center}
.pc-out{margin-top:22px;text-align:left}
.pc-out[hidden]{display:none}
.pc-out [hidden]{display:none!important}
.pc-res{border-radius:20px;padding:20px;border:2px solid var(--hp-line)}
.pc-res-ok{background:var(--hp-green-bg);border-color:#86d3a1}
.pc-res-no{background:var(--hp-red-bg);border-color:#f3a9a9}
.pc-res-info,.pc-res-wait{background:var(--hp-sky);border-color:#c4d4f5}
.pc-stat{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pc-stat .pc-ic{width:44px;height:44px;flex:none}
.pc-res-ok .pc-stat{color:var(--hp-green)}
.pc-res-ok .pc-stat-warn{color:var(--hp-amber)}
.pc-res-no .pc-stat{color:var(--hp-red)}
.pc-res-info .pc-stat,.pc-res-wait .pc-stat{color:var(--hp-blue)}
.pc-res h3{margin:0;font-size:clamp(24px,3vw,30px);font-weight:800;line-height:1.25;outline:none}
.pc-msg{margin:0 0 14px!important;font-size:16.5px;line-height:1.6;color:#1f2f4a!important}
.pc-warn{margin:0 0 12px!important;padding:8px 12px;border-radius:10px;background:var(--hp-amber-bg);color:var(--hp-amber)!important;font-weight:700;font-size:15px}
.pc-facts{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 14px}
.pc-facts div{padding:10px 14px;border-radius:14px;background:#fff;border:1px solid rgba(15,42,92,.08)}
.pc-facts dt{font-size:13.5px;font-weight:700;color:var(--hp-mut)}
.pc-facts dd{margin:2px 0 0;font-size:18px;font-weight:800;color:var(--hp-navy);word-break:break-word;display:flex;align-items:center;gap:8px}
.pc-dot{width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.2);flex:none}
.pc-main{display:grid;gap:10px}
.pc-btn-main{min-height:58px;border-radius:16px;font-size:18px;font-weight:800;background:var(--hp-blue);color:#fff}
.pc-btn-main:hover{background:#1e40af;color:#fff}
.pc-res-no .pc-btn-main{background:var(--hp-navy)}
.pc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:10px 0 0!important}
.pc-link{display:inline-flex;align-items:center;gap:6px;padding:8px 2px;min-height:44px;border:0;background:none;color:var(--hp-blue);font:inherit;font-size:15px;font-weight:700;text-decoration:underline;cursor:pointer}
.pc-link .pc-ic{width:18px;height:18px}
.pc-spin{width:40px;height:40px;border-radius:50%;border:5px solid #c4d4f5;border-top-color:var(--hp-blue);animation:pcspin .8s linear infinite;flex:none}
@keyframes pcspin{to{transform:rotate(360deg)}}
.pc-3{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 14px;padding:0;list-style:none}
.pc-3 li{display:flex;flex-direction:column;gap:8px;padding:8px 8px 10px;border-radius:16px;background:#fff;border:1px solid rgba(15,42,92,.08)}
.pc-3-img{display:block;border-radius:10px;overflow:hidden;background:#fff}
.pc-3-img img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}
.pc-3-note{margin:-8px 0 12px!important;font-size:12.5px;color:var(--hp-mut)!important}
.pc-3 b{display:flex;align-items:center;gap:8px;font-size:17px;color:var(--hp-navy);padding:0 4px}
.pc-3-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--hp-navy);color:#fff;font-size:15px;flex:none}
.hp-detect .pc-box{margin-top:-6px}

/* ── การ์ดภาพ (help-*) ── */
.hp-sec{padding:22px 0}
.hp-h2{margin:0 0 14px;font-size:24px;color:var(--hp-navy)}
.vg-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.vg-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--hp-line);border-radius:20px;padding:16px;box-shadow:0 16px 34px -28px rgba(15,42,92,.55)}
.vg-h{display:flex;align-items:center;gap:10px}
.vg-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--hp-blue);color:#fff;font-weight:700;font-size:18px;flex:0 0 auto}
.vg-h h3{margin:0;font-size:21px;color:var(--hp-navy)}
.vg-pts{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.vg-pts li{position:relative;padding-left:26px;line-height:1.55;font-size:15.5px}
.vg-pts li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:7px;border-left:3px solid var(--hp-green);border-bottom:3px solid var(--hp-green);transform:rotate(-45deg)}
.vg-more{margin:0;padding:9px 12px;border-radius:12px;background:var(--hp-amber-bg);border:1px solid #f6d48f;color:#5a3b05;font-size:14px;line-height:1.55}
.vg-dl{display:grid;gap:6px}
.vg-dl small{color:var(--hp-mut);font-size:12.5px;line-height:1.5}
.vg-causes{margin-top:16px;padding:14px 16px;border-radius:16px;background:var(--hp-red-bg);border:1px solid #f3c4c4}
.vg-causes h3{margin:0 0 8px;font-size:18px;color:var(--hp-red)}
.vg-causes ul{margin:0;padding-left:20px;display:grid;gap:4px;line-height:1.55}
.vg-alt{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.vg-alt div{display:grid;gap:6px}
.vg-alt small{color:var(--hp-mut);font-size:13px;line-height:1.5}
.hp-fig{margin:0;border:1px solid var(--hp-line);border-radius:14px;overflow:hidden;background:#f6f9fe}
.hp-fig img{display:block;width:100%;height:auto}
.hp-zoom{display:block;cursor:zoom-in}
.hp-fig-photo img{max-height:240px;object-fit:contain;background:#fff;padding:8px}
.hp-fig figcaption{padding:7px 10px;font-size:13px;line-height:1.5;color:var(--hp-mut);border-top:1px solid var(--hp-line);background:#fff}
.hp-fig figcaption b{display:inline-block;margin-right:4px;padding:0 7px;border-radius:6px;font-size:12px;line-height:1.7}
.hp-tag-real{background:var(--hp-green-bg);color:var(--hp-green)}
.hp-tag-ill{background:var(--hp-amber-bg);color:var(--hp-amber)}
.hp-tag-photo{background:var(--hp-sky);color:var(--hp-blue)}

/* ── ติดต่อขอรับบริการ ── */
.hp-help{display:grid;gap:12px;padding:18px;border-radius:18px;background:linear-gradient(135deg,#0f2a5c,#1d4ed8);color:#fff}
.hp-help h2{margin:0;color:#fff;font-size:21px}
.hp-help p{margin:0;color:#dbeafe;line-height:1.6}
.hp-help-btns{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.hp-help dl{margin:0;display:grid;gap:6px}
.hp-help dl div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.1)}
.hp-help dt{font-weight:700}
.hp-help dd{margin:0;color:#dbeafe}
.hp-help small{color:#bfdbfe;font-size:13px}
.hp-help a.hp-terms{color:#fff;text-decoration:underline}

/* ── FAQ / ลิงก์ที่เกี่ยวข้อง ── */
.hp-faq{display:grid;gap:8px}
.hp-faq details{background:#fff;border:1px solid var(--hp-line);border-radius:12px;padding:0 14px}
.hp-faq summary{cursor:pointer;padding:12px 0;font-weight:700;color:var(--hp-navy);list-style:none;display:flex;justify-content:space-between;gap:10px}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::after{content:"+";color:var(--hp-blue);font-size:20px;line-height:1}
.hp-faq details[open] summary::after{content:"−"}
.hp-faq p{margin:0 0 12px;line-height:1.65}
.hp-rel{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0;padding:0;list-style:none}
.hp-rel a{display:block;height:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--hp-line);background:#fff;text-decoration:none;color:var(--hp-navy)}
.hp-rel a b{display:block}
.hp-rel a span{font-size:13.5px;color:var(--hp-mut)}
.hp-rel a:hover{border-color:var(--hp-blue)}

/* ── การ์ดอุปกรณ์ในหน้าศูนย์ (drivers.html) ── */
.hp-cards{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.hp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hp-line);border-radius:18px;overflow:hidden;box-shadow:0 16px 34px -28px rgba(15,42,92,.55)}
.hp-card[hidden]{display:none}
.hp-card-img{display:block;aspect-ratio:16/10;background:#f3f7fd}
.hp-card-img img{display:block;width:100%;height:100%;object-fit:contain;padding:10px}
.hp-card-b{display:flex;flex-direction:column;gap:8px;flex:1;padding:14px 16px 16px}
.hp-card h3{margin:0;font-size:20px;color:var(--hp-navy)}
.hp-card h3 a{color:inherit;text-decoration:none}
.hp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.hp-chips li{padding:2px 10px;border-radius:999px;background:var(--hp-red-bg);color:var(--hp-red);font-size:13px;font-weight:700}
.hp-checks{margin:2px 0 4px;padding:0;list-style:none;display:grid;gap:5px}
.hp-checks li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5}
.hp-checks li::before{content:"";position:absolute;left:3px;top:.5em;width:11px;height:6px;border-left:3px solid var(--hp-green);border-bottom:3px solid var(--hp-green);transform:rotate(-45deg)}
.hp-card-btns{display:grid;gap:8px;margin-top:auto}
.hp-card-btns .hp-btn{width:100%;min-height:46px;font-size:15px}

@media (min-width:700px){
  .hp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-help dl div{grid-template-columns:200px minmax(0,1fr);align-items:center}
}
@media (max-width:640px){
  .pc-facts{gap:6px}
  .pc-facts div{padding:7px 10px;border-radius:11px}
  .pc-facts dt{font-size:12.5px}
  .pc-facts dd{font-size:15px;line-height:1.35}
  .pc-facts div:first-child{grid-column:1/-1}
  .pc-stat{gap:10px;margin-bottom:8px}
  .pc-stat .pc-ic,.pc-spin{width:36px;height:36px}
  .pc-res h3{font-size:23px}
  .pc-msg{font-size:15px;margin-bottom:10px!important}
  .pc-btn-main{min-height:54px;font-size:16px;padding:8px 12px}
  .pc-3-note{margin:-4px 0 10px!important}
  .pc-3{grid-template-columns:minmax(0,1fr);gap:8px}
  .pc-3 li{flex-direction:row;align-items:center;gap:12px;padding:6px 12px 6px 6px}
  .pc-3-img{flex:none;width:132px}
  .pc-3 b{font-size:17px;padding:0}
}
@media (max-width:420px){
  .hp-wrap{padding:0 14px}
  .pc-box{padding:22px 14px 16px;border-radius:22px}
  .pc-res{padding:16px 14px}
  .pc-go{min-height:70px}
  .vg-card{padding:14px}
}
@media (prefers-reduced-motion:reduce){.pc-spin{animation:none}.pc-go{transition:none}}