/* หน้าความรู้เรื่องน้ำมันหล่อลื่น (knowledge.php)
   ใช้ภาษาดีไซน์เดียวกับ why-zic.php: การ์ดขอบบางมุมมน 10px + เลขกำกับสีแดงทรงเหลี่ยมมน (.feat .ic)
   + แผงดำไล่เฉดแบบ .why-tech + แถบปิดท้ายพื้นเทา (.why-cta) */
.crumb{padding:0 0 14px;font-family:'Signs','Chakra Petch';font-size:12px;letter-spacing:.5px;color:var(--muted)}
.crumb a:hover{color:var(--red)}.crumb span{color:var(--text)}

/* ---- การ์ดหัวข้อ (หน้ารายการ + ท้าย why-zic) — ทรงเดียวกับ .feat ---- */
.kn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kn-card{display:block;padding:28px;border:1px solid var(--line);border-radius:10px;background:#fff;transition:.25s}
.kn-card:hover{border-color:var(--red);box-shadow:0 12px 30px rgba(229,0,79,.08);transform:translateY(-3px)}
.kn-card .ic{width:44px;height:44px;border-radius:8px;background:var(--red);display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Signs','Chakra Petch';font-weight:700;font-size:15px;margin-bottom:16px}
.kn-card h3{font-family:'Kanit';font-weight:600;font-size:19px;color:var(--text);margin-bottom:6px}
.kn-card p{color:var(--muted);font-size:14.5px;line-height:1.8}
.kn-card .go{display:inline-block;margin-top:14px;font-family:'Kanit';font-weight:500;font-size:13.5px;color:var(--red)}

/* ---- เลย์เอาต์: สารบัญ + เนื้อหา ---- */
.kn-wrap{display:grid;grid-template-columns:238px 1fr;gap:50px;align-items:start}

.kn-toc{position:sticky;top:88px;border:1px solid var(--line);border-radius:10px;padding:20px 18px;background:#fff}
.kn-toc b{display:block;font-family:'Signs','Chakra Petch';font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.kn-toc a{display:flex;gap:9px;align-items:baseline;font-family:'Kanit';font-size:13.5px;color:var(--muted);
  padding:7px 0 7px 10px;line-height:1.5;border-left:2px solid transparent;transition:.16s}
.kn-toc a i{font-family:'Signs','Chakra Petch';font-style:normal;font-size:11px;color:#c3c4cb;flex:none}
.kn-toc a:hover{color:var(--red)}
.kn-toc a.on{color:var(--text);border-left-color:var(--red);font-weight:500}
.kn-toc a.on i{color:var(--red)}

.kn-body{min-width:0;max-width:780px}
.kn-sec{margin-bottom:52px;scroll-margin-top:92px}
.kn-h{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.kn-h .num{width:44px;height:44px;flex:none;border-radius:8px;background:var(--red);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:'Signs','Chakra Petch';font-weight:700;font-size:15px}
.kn-h h2{font-family:'Kanit';font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--text);line-height:1.3}
.kn-body p{color:#454650;font-size:15.5px;line-height:1.9;margin-bottom:14px}

.kn-ul{margin:0 0 18px;padding-left:0;list-style:none}
.kn-ul li{position:relative;padding-left:24px;margin-bottom:11px;color:#454650;font-size:15px;line-height:1.85}
.kn-ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;background:var(--red);transform:rotate(45deg);border-radius:1px}

/* รายการมีเลข — การ์ดย่อยทรงเดียวกับ .feat */
.kn-num{margin:0 0 20px;padding:0;list-style:none;counter-reset:kn;display:grid;gap:12px}
.kn-num li{counter-increment:kn;position:relative;border:1px solid var(--line);border-radius:10px;padding:18px 20px 18px 62px;transition:.2s;background:#fff}
.kn-num li:hover{border-color:var(--red);box-shadow:0 10px 24px -14px rgba(229,0,79,.5)}
.kn-num li::before{content:counter(kn,decimal-leading-zero);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:7px;
  background:var(--soft);color:var(--red);font-family:'Signs','Chakra Petch';font-weight:700;font-size:12.5px;
  display:flex;align-items:center;justify-content:center}
.kn-num li b{display:block;font-family:'Kanit';font-weight:600;font-size:15.5px;color:var(--text);margin-bottom:4px}
.kn-num li span{color:var(--muted);font-size:14.5px;line-height:1.8}

/* คำศัพท์: คำ + คำอ่าน/ตัวย่อ แล้วตามด้วยคำอธิบาย */
.kn-dl{margin:6px 0 20px;display:grid;gap:10px}
.kn-dl > div{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fff;transition:.2s}
.kn-dl > div:hover{border-color:var(--red)}
.kn-dl dt{font-family:'Signs','Chakra Petch';font-weight:700;font-size:15px;color:var(--text);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.kn-dl dt span{font-family:'Kanit';font-weight:400;font-size:13px;color:var(--muted)}
.kn-dl dd{margin:6px 0 0;color:#454650;font-size:14.5px;line-height:1.8}

.kn-fig{margin:24px 0 28px}
.kn-fig img{width:100%;height:auto;border-radius:14px;background:var(--soft);display:block}
.kn-fig figcaption{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.7;padding-left:14px;border-left:2px solid var(--line)}

/* กล่องหมายเหตุ — แผงดำไล่เฉดแบบ .why-tech ให้เด่นจากเนื้อหาปกติ */
.kn-note{position:relative;background:linear-gradient(160deg,#141418,#0a0a0c);color:#d3d4da;border-radius:12px;
  padding:20px 24px 20px 26px;margin:22px 0;font-size:14.5px;line-height:1.85;overflow:hidden}
.kn-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.kn-note::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(229,0,79,.25),transparent 65%);pointer-events:none}

/* ตาราง — หัวตารางดำแบบ .spec.big คอลัมน์แรกติดขอบซ้ายเวลาเลื่อน */
.kn-table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:12px;background:#fff}
.kn-table{width:100%;border-collapse:collapse;min-width:580px;font-size:14px}
.kn-table thead th{background:#141418;color:#fff;font-family:'Kanit';font-weight:500;font-size:12.5px;line-height:1.5;
  padding:12px 14px;text-align:left;vertical-align:bottom;white-space:nowrap}
.kn-table tbody th,.kn-table tbody td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.kn-table tbody th{font-family:'Signs','Chakra Petch';font-weight:700;font-size:13.5px;color:var(--text);white-space:nowrap;
  background:var(--panel,#fafafb);position:sticky;left:0}
.kn-table tbody td{color:#555;font-family:'Kanit'}
.kn-table tbody tr:last-child th,.kn-table tbody tr:last-child td{border-bottom:none}
.kn-table tbody tr:hover td{background:#fcfcfd}

.kn-src{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:6px;line-height:1.75}

/* ---- ปิดท้าย: ใช้โทนเดียวกับ .why-cta ---- */
.kn-end{background:var(--soft);border-top:1px solid var(--line);margin-top:54px;padding:52px 0}
.kn-end h2{font-family:'Kanit';font-weight:800;font-size:clamp(22px,3.2vw,30px);letter-spacing:-.5px;text-align:center}
.kn-end p{color:var(--muted);margin:10px 0 24px;text-align:center}
.kn-end .btns{justify-content:center}

@media(max-width:900px){
  .kn-grid{grid-template-columns:1fr 1fr}
  .kn-wrap{grid-template-columns:1fr;gap:28px}
  .kn-toc{position:static;display:flex;flex-wrap:wrap;gap:4px 14px;padding:16px 18px}
  .kn-toc b{width:100%;margin-bottom:2px}
  .kn-toc a{border-left:none;padding:5px 0}
  .kn-toc a.on{border-left:none}
  .kn-h .num{width:38px;height:38px;font-size:13px}
}
@media(max-width:560px){
  .kn-grid{grid-template-columns:1fr}
  .kn-fig img{border-radius:10px}
  .kn-note{padding:18px 18px 18px 20px}
}