/* CabinHitech Buying Guide CSS — v1.5 | กรกฎาคม 2569 */
/* อัปโหลดไฟล์นี้ที่ /wp-content/uploads/cabin-guide.css */
/* แก้ไฟล์นี้ไฟล์เดียว ทุก guide post อัปเดตทันที */
/* v1.4 FIX: body .cmp-bar ขาด width:var(--w) และ background:var(--c) ทำให้ score bar
   ในบทความรุ่นใหม่ (ใช้ inline style="--w;--c") ไม่แสดงผล — เพิ่มกลับเข้าไปแล้ว */
/* v1.5 FIX: v1.4 ลบ .bar-w*/.bar-c* utility class ทิ้งไปด้วย ทำให้บทความรุ่นเก่าที่ใช้ระบบ
   class (เช่น class="cmp-bar bar-w85 bar-ca") พังแทน — พบว่าเว็บมีบทความ guide 2 แบบปนกัน:
   (1) รุ่นใหม่ ใช้ inline style="--w:93%;--c:#00e5ff" ต่อแถบ
   (2) รุ่นเก่า ใช้ class="bar-wNN bar-cX" ต่อแถบ (ไม่มี inline style)
   ไฟล์นี้รองรับทั้ง 2 แบบพร้อมกัน: .cmp-bar ใช้ var(--w)/var(--c) เป็นค่าเริ่มต้น,
   ส่วน .bar-wNN/.bar-cX ประกาศไว้ "หลัง" .cmp-bar จึงชนะ cascade (specificity เท่ากัน)
   และ override เฉพาะ element ที่มี class เหล่านั้นจริงๆ เท่านั้น — ห้ามลบ .bar-w*/.bar-c*
   อีกเพราะจะทำให้บทความรุ่นเก่าพังซ้ำ */

/* ─── ซ่อน WP theme post title (ซ้ำกับ <h1> ใน hero) ─── */
/* WP เพิ่ม body class "single-guide" อัตโนมัติสำหรับ guide CPT */
body.single-guide .entry-title,
body.single-guide .entry-header h1,
body.single-guide h1.page-title,
body.single-guide .post-title,
body.single-guide header.entry-header { display: none !important; }

/* ─── Design Tokens ─── */
:root {
  --primary: #00e5ff;
  --secondary: #7c3aed;
  --bg: #0a0a0a;
  --surface: #111;
  --surface2: #1a1a1a;
  --text: #e0e0e0;
  --text2: #aaa;
  --green: #00c853;
  --red: #ff1744;
  --yellow: #ffd600;
  --radius: 12px;
  --font: 'Sarabun', sans-serif;
  --shopee: #EE4D2D;
  --lazada: #6B3FA0;
}

/* ─── Reset (scoped to guide content) ─── */
body .hero *, body .container *, body .section *,
body .verdict-section *, body .faq-item *, body footer * {
  box-sizing: border-box !important;
}

/* ─── Body & Container ─── */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font), sans-serif !important;
  line-height: 1.7 !important;
  font-size: 16px !important;
}
body a { color: var(--primary) !important; text-decoration: none !important; }
body .container {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* ════════════════════════════════════════════
   1. HERO — จัดกึ่งกลางทุก element
   ════════════════════════════════════════════ */
body .hero {
  background: linear-gradient(135deg, #0d0d2b 0%, #1a0533 100%) !important;
  padding: 60px 20px !important;
  text-align: center !important;
  border-bottom: 2px solid var(--secondary) !important;
  display: block !important;
}
body .hero .badge {
  display: inline-block !important;
  background: var(--secondary) !important;
  color: #fff !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  font-size: .8rem !important;
  margin-bottom: 16px !important;
  text-align: center !important;
}
body .hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
  color: #fff !important;
  margin: 0 auto 12px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  max-width: 800px !important;
  font-weight: 700 !important;
}
body .hero .subtitle {
  color: var(--text2) !important;
  font-size: 1rem !important;
  max-width: 680px !important;
  margin: 0 auto 24px !important;
  text-align: center !important;
  display: block !important;
}

/* ════════════════════════════════════════════
   2. QUICK ANSWER BOX
   ════════════════════════════════════════════ */
body .quick-answer {
  background: linear-gradient(135deg, #0d1f2b, #0a0a1a) !important;
  border: 1px solid var(--primary) !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  margin: 32px 0 !important;
}
body .quick-answer h2 {
  font-size: 1rem !important;
  color: var(--primary) !important;
  margin-bottom: 12px !important;
}
body .qa-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}
body .qa-label {
  font-size: .85rem !important;
  color: var(--text2) !important;
  min-width: 160px !important;
  flex-shrink: 0 !important;
}
body .qa-name  { color: #fff !important; font-weight: 700 !important; font-size: .9rem !important; }
body .qa-price { color: var(--green) !important; font-size: .85rem !important; font-weight: 700 !important; }
body .qa-link  { color: #fff !important; border-bottom: 1px dashed rgba(255,255,255,.35) !important; text-decoration: none !important; }
body .qa-btns  { display: flex !important; gap: 6px !important; margin-left: auto !important; flex-wrap: wrap !important; }

/* ════════════════════════════════════════════
   3. SECTIONS
   ════════════════════════════════════════════ */
body .section { padding: 40px 0 !important; display: block !important; }
body .section-title {
  font-size: 1.4rem !important;
  color: var(--primary) !important;
  border-left: 4px solid var(--secondary) !important;
  padding-left: 14px !important;
  margin-bottom: 24px !important;
  display: block !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   4. CRITERIA GRID — 3×2 (desktop)
   ════════════════════════════════════════════ */
body .criteria-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
body .criteria-item {
  background: var(--surface2) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  border-left: 3px solid var(--primary) !important;
  display: block !important;
}
body .criteria-item .icon { font-size: 1.6rem !important; margin-bottom: 8px !important; display: block !important; }
body .criteria-item h3    { font-size: 1rem !important; color: #fff !important; margin-bottom: 6px !important; font-weight: 700 !important; }
body .criteria-item p     { font-size: .87rem !important; color: var(--text2) !important; margin: 0 !important; }

/* ════════════════════════════════════════════
   5. COMPARISON TABLE
   ════════════════════════════════════════════ */
body .seo-table-wrapper { overflow-x: auto !important; margin-bottom: 24px !important; border-radius: var(--radius) !important; border: 1px solid #222 !important; }
body .seo-table         { width: 100% !important; border-collapse: collapse !important; background: var(--surface) !important; font-size: .85rem !important; }
body .seo-table th      { background: var(--surface2) !important; color: var(--primary) !important; padding: 12px !important; font-weight: 700 !important; border-bottom: 2px solid #222 !important; text-align: left !important; }
body .seo-table td      { padding: 12px !important; border-bottom: 1px solid #222 !important; color: var(--text) !important; text-align: left !important; }
body .seo-table tr:hover{ background: #151515 !important; }
body .tag-yes { color: var(--green) !important; font-weight: 700 !important; }
body .tag-no  { color: var(--text2) !important; }

/* ════════════════════════════════════════════
   6. SCORE BARS (cmp)
   ════════════════════════════════════════════ */
body .cmp-wrap      { background: var(--surface2) !important; border-radius: var(--radius) !important; padding: 20px 24px !important; }
body .cmp-legend    { font-size: .8rem !important; color: var(--text2) !important; margin-bottom: 20px !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 4px !important; }
body .cmp-dot       { display: inline-block !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
body .cmp-row       { margin-bottom: 18px !important; }
body .cmp-label     { font-size: .82rem !important; color: #fff !important; margin-bottom: 7px !important; font-weight: 700 !important; display: block !important; }
body .cmp-bars      { display: flex !important; flex-direction: column !important; gap: 5px !important; }
body .cmp-bar-group { display: flex !important; align-items: center !important; gap: 8px !important; }
body .cmp-name      { font-size: .72rem !important; color: var(--text2) !important; width: 130px !important; flex-shrink: 0 !important; text-align: right !important; }
body .cmp-bar-wrap  { flex: 1 !important; background: #222 !important; border-radius: 4px !important; height: 20px !important; overflow: hidden !important; }
body .cmp-bar       { height: 100% !important; width: var(--w) !important; background: var(--c) !important; border-radius: 4px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; padding-right: 7px !important; font-size: .72rem !important; font-weight: 700 !important; color: #000 !important; box-sizing: border-box !important; }
/* Bar widths (legacy class-based convention — must stay AFTER .cmp-bar to win the cascade) */
body .bar-w0{width:0%!important} body .bar-w1{width:1%!important} body .bar-w2{width:2%!important} body .bar-w3{width:3%!important} body .bar-w4{width:4%!important} body .bar-w5{width:5%!important} body .bar-w6{width:6%!important} body .bar-w7{width:7%!important} body .bar-w8{width:8%!important} body .bar-w9{width:9%!important}
body .bar-w10{width:10%!important} body .bar-w11{width:11%!important} body .bar-w12{width:12%!important} body .bar-w13{width:13%!important} body .bar-w14{width:14%!important} body .bar-w15{width:15%!important} body .bar-w16{width:16%!important} body .bar-w17{width:17%!important} body .bar-w18{width:18%!important} body .bar-w19{width:19%!important}
body .bar-w20{width:20%!important} body .bar-w21{width:21%!important} body .bar-w22{width:22%!important} body .bar-w23{width:23%!important} body .bar-w24{width:24%!important} body .bar-w25{width:25%!important} body .bar-w26{width:26%!important} body .bar-w27{width:27%!important} body .bar-w28{width:28%!important} body .bar-w29{width:29%!important}
body .bar-w30{width:30%!important} body .bar-w31{width:31%!important} body .bar-w32{width:32%!important} body .bar-w33{width:33%!important} body .bar-w34{width:34%!important} body .bar-w35{width:35%!important} body .bar-w36{width:36%!important} body .bar-w37{width:37%!important} body .bar-w38{width:38%!important} body .bar-w39{width:39%!important}
body .bar-w40{width:40%!important} body .bar-w41{width:41%!important} body .bar-w42{width:42%!important} body .bar-w43{width:43%!important} body .bar-w44{width:44%!important} body .bar-w45{width:45%!important} body .bar-w46{width:46%!important} body .bar-w47{width:47%!important} body .bar-w48{width:48%!important} body .bar-w49{width:49%!important}
body .bar-w50{width:50%!important} body .bar-w51{width:51%!important} body .bar-w52{width:52%!important} body .bar-w53{width:53%!important} body .bar-w54{width:54%!important} body .bar-w55{width:55%!important} body .bar-w56{width:56%!important} body .bar-w57{width:57%!important} body .bar-w58{width:58%!important} body .bar-w59{width:59%!important}
body .bar-w60{width:60%!important} body .bar-w61{width:61%!important} body .bar-w62{width:62%!important} body .bar-w63{width:63%!important} body .bar-w64{width:64%!important} body .bar-w65{width:65%!important} body .bar-w66{width:66%!important} body .bar-w67{width:67%!important} body .bar-w68{width:68%!important} body .bar-w69{width:69%!important}
body .bar-w70{width:70%!important} body .bar-w71{width:71%!important} body .bar-w72{width:72%!important} body .bar-w73{width:73%!important} body .bar-w74{width:74%!important} body .bar-w75{width:75%!important} body .bar-w76{width:76%!important} body .bar-w77{width:77%!important} body .bar-w78{width:78%!important} body .bar-w79{width:79%!important}
body .bar-w80{width:80%!important} body .bar-w81{width:81%!important} body .bar-w82{width:82%!important} body .bar-w83{width:83%!important} body .bar-w84{width:84%!important} body .bar-w85{width:85%!important} body .bar-w86{width:86%!important} body .bar-w87{width:87%!important} body .bar-w88{width:88%!important} body .bar-w89{width:89%!important}
body .bar-w90{width:90%!important} body .bar-w91{width:91%!important} body .bar-w92{width:92%!important} body .bar-w93{width:93%!important} body .bar-w94{width:94%!important} body .bar-w95{width:95%!important} body .bar-w96{width:96%!important} body .bar-w97{width:97%!important} body .bar-w98{width:98%!important} body .bar-w99{width:99%!important}
body .bar-w100{width:100%!important}
/* Bar colors (legacy class-based convention) */
body .bar-ca{background:#00e5ff!important} body .bar-cb{background:#f97316!important}
body .bar-cc{background:#a78bfa!important} body .bar-cd{background:#10b981!important}
body .bar-ce{background:#ef4444!important} body .bar-cf{background:#ffd600!important}

/* ════════════════════════════════════════════
   7. TIER / BUDGET BOXES
   ════════════════════════════════════════════ */
body .tier {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
  background: var(--surface2) !important;
  border-radius: 10px !important;
  padding: 18px !important;
}
body .tier-badge {
  min-width: 100px !important;
  text-align: center !important;
  padding: 8px 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  flex-shrink: 0 !important;
  display: block !important;
}
body .tier-budget  { background: #1e3a1e !important; color: var(--green) !important; }
body .tier-mid     { background: #1e2a3a !important; color: var(--primary) !important; }
body .tier-premium { background: #2a1e3a !important; color: #ce93d8 !important; }
body .tier-content { flex: 1 !important; min-width: 0 !important; }
body .tier-content h3 { font-size: .95rem !important; color: #fff !important; margin-bottom: 4px !important; font-weight: 700 !important; }
body .tier-content p  { font-size: .85rem !important; color: var(--text2) !important; margin-bottom: 10px !important; }
body .tier-buy        { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }

/* ════════════════════════════════════════════
   8. AFFILIATE BUTTONS
   ════════════════════════════════════════════ */
body .aff-link {
  display: inline-block !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  color: #fff !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  transition: opacity .2s !important;
}
body .aff-link:hover     { opacity: .8 !important; color: #fff !important; }
body .aff-link.aff-spe,
body .aff-spe.aff-link   { background: var(--shopee) !important; }
body .aff-link.aff-lzd,
body .aff-lzd.aff-link   { background: var(--lazada) !important; }

body .aff-link-sm {
  display: inline-block !important;
  font-weight: 700 !important;
  font-size: .73rem !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  color: #fff !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  transition: opacity .2s !important;
}
body .aff-link-sm:hover         { opacity: .8 !important; color: #fff !important; }
body .aff-link-sm.aff-spe,
body .aff-spe.aff-link-sm       { background: var(--shopee) !important; }
body .aff-link-sm.aff-lzd,
body .aff-lzd.aff-link-sm       { background: var(--lazada) !important; }

/* ════════════════════════════════════════════
   9. PICK CARDS
   ════════════════════════════════════════════ */
body .pick-card {
  background: var(--surface) !important;
  border: 1px solid #2a2a2a !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  scroll-margin-top: 24px !important;
}
body .pick-card-inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  align-items: stretch !important;
}
body .pick-img-wrap {
  width: 140px !important;
  flex-shrink: 0 !important;
  background: #0d0d0d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
}
body .pick-img-wrap img {
  width: 116px !important;
  height: 116px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}
body .pick-body   { padding: 18px !important; flex: 1 !important; min-width: 0 !important; }
body .pick-header { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 6px !important; flex-wrap: wrap !important; }
body .pick-rank   { font-size: 1.6rem !important; font-weight: 900 !important; color: var(--secondary) !important; line-height: 1 !important; }
body .pick-info h3{ font-size: 1.05rem !important; color: #fff !important; margin-bottom: 2px !important; font-weight: 700 !important; }
body .pick-score  { font-size: .82rem !important; color: var(--primary) !important; margin-bottom: 8px !important; display: block !important; }
body .pick-info p { font-size: .85rem !important; color: var(--text2) !important; margin-bottom: 8px !important; }
body .pick-pros-cons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
}
body .pro { display: flex !important; gap: 5px !important; color: var(--green) !important; font-size: .8rem !important; align-items: flex-start !important; }
body .con { display: flex !important; gap: 5px !important; color: var(--red) !important; font-size: .8rem !important; align-items: flex-start !important; }
body .pro-icon, body .con-icon { flex-shrink: 0 !important; margin-top: 2px !important; }
body .pick-who {
  background: #0d1a0d !important;
  border: 1px solid #1a3a1a !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  font-size: .8rem !important;
  color: #8bc34a !important;
  margin-bottom: 10px !important;
  display: block !important;
}
body .pick-price {
  font-weight: 700 !important;
  color: var(--green) !important;
  font-size: .95rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* ════════════════════════════════════════════
   10. VERDICT / CTA
   ════════════════════════════════════════════ */
body .verdict-section {
  background: linear-gradient(135deg, #0d1a2b, #1a0533) !important;
  border: 1px solid #2a2a4a !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
  margin-bottom: 8px !important;
  display: block !important;
}
body .verdict-section h2     { font-size: 1.3rem !important; color: #fff !important; margin-bottom: 6px !important; font-weight: 700 !important; }
body .verdict-section .vs-sub{ font-size: .9rem !important; color: var(--text2) !important; margin-bottom: 24px !important; display: block !important; }
body .verdict-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
body .verdict-card            { background: rgba(255,255,255,.04) !important; border: 1px solid #2a2a2a !important; border-radius: 10px !important; padding: 16px !important; display: block !important; }
body .verdict-card .vc-if     { font-size: .8rem !important; color: var(--text2) !important; margin-bottom: 4px !important; display: block !important; }
body .verdict-card .vc-pick   { font-size: 1rem !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 4px !important; display: block !important; }
body .verdict-card .vc-price  { font-size: .82rem !important; color: var(--green) !important; margin-bottom: 12px !important; display: block !important; }
body .verdict-card .vc-btns,
body .verdict-winner .vc-btns { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
body .verdict-winner          { background: var(--surface2) !important; border-radius: 10px !important; padding: 16px !important; text-align: center !important; border: 1px solid #3a2a5a !important; }
body .verdict-winner p        { font-size: .9rem !important; color: var(--text2) !important; margin-bottom: 12px !important; }
body .verdict-winner strong   { color: #fff !important; }
body .verdict-winner .vc-btns { justify-content: center !important; }

/* ════════════════════════════════════════════
   11. FAQ
   ════════════════════════════════════════════ */
body .faq-item{ border-bottom: 1px solid #222 !important; padding: 16px 0 !important; display: block !important; }
body .faq-q   { font-size: 1rem !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 6px !important; display: block !important; }
body .faq-a   { font-size: .9rem !important; color: var(--text2) !important; display: block !important; }

/* ════════════════════════════════════════════
   12. RELATED LINKS
   ════════════════════════════════════════════ */
body .related-link {
  display: block !important;
  background: var(--surface2) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
body .related-link:hover { background: #222 !important; }

/* ════════════════════════════════════════════
   13. FOOTER
   ════════════════════════════════════════════ */
body footer {
  text-align: center !important;
  padding: 30px 20px !important;
  color: var(--text2) !important;
  font-size: .82rem !important;
  border-top: 1px solid #1a1a1a !important;
}

/* ════════════════════════════════════════════
   14. RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  body .criteria-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  body .criteria-grid          { grid-template-columns: 1fr !important; }
  body .pick-card-inner        { flex-direction: column !important; }
  body .pick-img-wrap          { width: 100% !important; height: 140px !important; }
  body .pick-img-wrap img      { width: auto !important; height: 120px !important; }
  body .pick-pros-cons         { grid-template-columns: 1fr !important; }
  body .tier                   { flex-direction: column !important; }
  body .qa-row                 { gap: 6px !important; }
  body .qa-btns                { margin-left: 0 !important; }
  body .cmp-name               { width: 80px !important; font-size: .68rem !important; }
  body .verdict-grid           { grid-template-columns: 1fr !important; }
}