/* ══════════════════════════════════════════════════════════════
   THEME: Simple — ขาว + ส้ม 3 เฉด (แบบ Preview 2) (อนุมัติ 27 ก.ย. 2026)
   โหลดเป็นไฟล์สุดท้ายในทุกหน้า → ทับสี navy เดิมทั้งเว็บ
   ย้อนกลับเป็น navy: ลบบรรทัด <link ... theme-simple.css> ออก (หรือทำไฟล์นี้ให้ว่าง)
   สัดส่วน: ขาว/พีช ~85% · ส้มอิฐ (ปุ่ม/กล่องเน้น) · ส้มโลโก้ (จุดเล็ก) · เทาเข้ม (ตัวหนังสือ)
   ══════════════════════════════════════════════════════════════ */

:root {
  --orange:      #F08228;  /* ส้มหลัก (แบบ Preview 2) */
  --orange-dark: #C96A10;  /* ปุ่ม/กล่องเน้น — ตัวหนังสือขาวบนนี้ได้ contrast 4.8:1 */
  --peach:       #FFF3E8;  /* พื้นหลังสลับ section (แทนเทาอ่อน/navy) */
  --line:        #F0E2D4;
  --navy:        #1E1E1E;  /* ของเดิมที่เป็นตัวหนังสือ navy → เทาเข้ม */
  --navy-dark:   #1E1E1E;
  --navy-light:  #F08228;
  --gray-light:  #FFF3E8;
  --text-mid:    #3A3430;  /* ตัวหนังสือรอง: เดิมเทา #555 ดูจางไม่เด่น → เกือบดำโทนอุ่น (27 ก.ย.) */
  --text-soft:   #5E554D;  /* ตัวหนังสือเล็กที่ตั้งใจให้เบากว่า เช่น breadcrumb, วันที่ */
}

/* ── ฟอนต์ (แบบ INNOVEK, อนุมัติ 27 ก.ย. 2026) ───────────────
   Poppins นำหน้า → ตัวอังกฤษ/ตัวเลขใช้ Poppins, ตัวไทยตกไปใช้ Kanit อัตโนมัติ
   (Poppins ไม่มีตัวไทย เบราว์เซอร์เลยหยิบฟอนต์ถัดไปมาใช้เฉพาะตัวไทย)
   แยกหน้าที่ด้วยความหนา: หัวข้อ 500 · เนื้อหา 400 · เมนู 300
   ฟอนต์โหลดจาก <link> Google Fonts ในแต่ละหน้า (Kanit + Poppins) */
body, body *:not(svg):not(path) { font-family: 'Poppins', 'Kanit', sans-serif !important; }
h1, h2, h3, h4, .section-title, .vision-text, .lead-name, .pillar-title,
.nav-logo-text, .pledge-title, #cta h2, .reach-title,
.service-card h4, .include-card h3, .package-block h3, .mission-card h4,
.article-title { font-weight: 500 !important; letter-spacing: 0 !important; }
.nav-links a, .mobile-menu a { font-weight: 300; }

/* ── ปุ่มหลักทุกหน้า: ส้มอิฐ ─────────────────────────── */
.nav-cta, .btn-primary, .btn-submit, .card-btn, .wc-btn { background: var(--orange-dark); }
.nav-cta:hover, .btn-primary:hover, .btn-submit:hover,
.service-card:hover .card-btn, .wc-btn:hover { background: #A9570B; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(201,106,16,0.25); }

/* ── NAV: พื้นขาว ตัวหนังสือเข้ม ───────────────────────── */
nav { background: rgba(255,255,255,0.97); border-bottom: 1px solid var(--line); box-shadow: none; }
.nav-logo-text { color: #1E1E1E; }
.nav-logo-text span { color: var(--orange-dark); }
.nav-links a { color: #333; }
.nav-links a:hover { color: var(--orange-dark); }
.lang-toggle button { color: #888; }
.lang-toggle button.active { color: var(--orange-dark); }
.lang-toggle button:hover:not(.active) { color: #1E1E1E; }
.lang-sep { color: #CCC; }
.hamburger span { background: #1E1E1E; }
.mobile-menu { background: white; border-top: 1px solid var(--line); box-shadow: 0 8px 16px rgba(0,0,0,0.08); }
.mobile-menu a { color: #1E1E1E; border-bottom-color: var(--line); }
.mobile-menu .lang-toggle button { color: #888; }
.mobile-menu .lang-toggle button.active { color: var(--orange-dark); }

/* ── ป้ายเล็กเหนือหัวข้อ ─────────────────────────────── */
.section-label { color: var(--orange-dark); }

/* ── FOOTER ทุกหน้า: พีช ตัวหนังสือเข้ม ───────────────── */
footer { background: var(--peach); color: var(--text-mid); border-top: 1px solid var(--line); }
footer [style*="color:rgba(255,255,255"] { color: #1E1E1E !important; }
.footer-logo-text, .footer-col h4 { color: #1E1E1E; }
.footer-col ul li a { color: var(--text-mid); }
.footer-col ul li a:hover { color: var(--orange-dark); }
.footer-bottom { border-top-color: var(--line); }
.footer-bottom span { color: var(--orange-dark); }


/* ══ หน้าแรก (index.html) ══════════════════════════════════ */

#hero { background: linear-gradient(180deg, var(--peach) 0%, #FFFFFF 100%); }
.hero-bg-pattern { opacity: .10; }
.hero-orb.orb-2 { background: radial-gradient(circle, rgba(240,130,40,0.15) 0%, transparent 70%); }
.hero-badge { background: white; border-color: rgba(240,130,40,0.5); color: var(--orange-dark); }
#hero .hero-content h1 { color: #1E1E1E; }
#hero .hero-content h1 span { color: var(--orange); }
#hero .hero-subtitle { color: var(--text-mid); }
.hero-tagline { color: var(--orange-dark); }
#hero .btn-outline { color: #1E1E1E; border-bottom-color: rgba(0,0,0,0.3); }
.hero-stats { border-top-color: var(--line); }
.stat { border-left-color: var(--line); }
.stat-label { color: var(--text-soft); }

#about { background: var(--peach); }


#vision { background: var(--peach); color: #1E1E1E; }
#vision .section-title { color: var(--text-mid); }
#vision .section-desc { color: var(--text-mid) !important; }
.vision-text { color: #1E1E1E; }
.vision-text strong { color: var(--orange-dark) !important; }
.pillar { background: white; border-color: var(--line); }
.pillar-icon { color: var(--orange); }
.pillar-title { color: #1E1E1E; }

#mission { background: white; }
.mission-number { background: var(--orange-dark); }

#commitment { background: var(--peach); }

#cta { background: var(--orange-dark); }
#cta p { color: rgba(255,255,255,0.9); }
.btn-white { color: var(--orange-dark); }

.collab-num { background: var(--orange-dark); }


/* ══ หน้าบริการ / ความร่วมมือ / บทความ / พันธมิตร (service-page.css) ══ */

/* Hero ที่ไม่มีรูปพื้นหลัง → พีชไล่ลงขาว ตัวหนังสือเข้ม */
.service-hero:not([style*="url("]) { background: linear-gradient(180deg, var(--peach) 0%, #FFFFFF 100%); color: #1E1E1E; }
.service-hero:not([style*="url("]) .hero-bg-pattern { opacity: .10; }
.service-hero:not([style*="url("]) .breadcrumb { color: var(--text-soft); }
.service-hero:not([style*="url("]) .breadcrumb:hover { color: var(--orange-dark); }
.service-hero:not([style*="url("]) .hero-subtitle { color: var(--text-mid); }
.service-hero:not([style*="url("]) .hero-icon { background: white; border-color: rgba(240,130,40,0.4); color: var(--orange-dark); animation: icon-float 5s ease-in-out infinite; }
.service-hero:not([style*="url("]) [style*="color:white"],
.service-hero:not([style*="url("]) [style*="color: white"] { color: #1E1E1E !important; }
.service-hero:not([style*="url("]) [style*="color:rgba(255,255,255"],
.service-hero:not([style*="url("]) [style*="color: rgba(255,255,255"] { color: var(--text-mid) !important; }
.service-hero:not([style*="url("]) [style*="color:#FFB05A"] { color: var(--orange-dark) !important; background: white !important; }

/* Hero บทความที่มีรูปปก → คงรูป แต่เปลี่ยนม่านทับจาก navy เป็นเทาดำกลางๆ (แก้ในไฟล์บทความ) */

.content-section.gray { background: var(--peach); }
.content-section h2::after,
.section-header h2::after, .two-col h2::after { background: var(--orange); }
.include-card { border-color: var(--line); }
.include-num, .step-list li::before, .check-list li::before { color: var(--orange-dark); }
.scroll-progress { background: var(--orange); box-shadow: none; }

.package-section { background: var(--peach); }
.package-section::before, .package-section::after { display: none; }
.package-badge { background: var(--orange-dark); animation: none; box-shadow: none; }
.price-card { background: var(--orange-dark); }
.price-card::before { display: none; }
.price-card .price { color: white; }
.price-card .price-label, .price-card .price-period { color: rgba(255,255,255,0.85); }
.price-card .price-note { color: rgba(255,255,255,0.75); border-top-color: rgba(255,255,255,0.25); }

/* CTA ท้ายหน้า → ส้มอิฐสีเดียว ปุ่มขาว */
.cta-section { background: var(--orange-dark); }
.cta-section::before { display: none; }
.cta-section p { color: rgba(255,255,255,0.9); }
.cta-section .btn-primary { background: white; color: var(--orange-dark); }
.cta-section .btn-primary:hover { background: white; }

.service-card { border-color: var(--line); }
.service-icon { background: var(--peach); color: var(--orange-dark); }

/* กล่อง/แถบที่เคยเป็น navy แบบ inline style → ส้มอิฐ */
[style*="background:var(--navy)"],
[style*="background: var(--navy)"] { background: var(--orange-dark) !important; }
[style*="background:var(--navy)"] a[style*="background:var(--orange)"] { background: white !important; color: var(--orange-dark) !important; }
[style*="background:var(--navy)"] [style*="color:rgba(240,130,40"] { color: rgba(255,255,255,0.85) !important; }
[style*="background:#f0f4f8"] { background: var(--peach) !important; }

/* ตารางในบทความ */
.article-table th { background: var(--orange-dark); }

/* เทาอมฟ้าในบทความ (FAQ, แถวตาราง, กล่องอ้างอิง) → ขาวอมส้มอ่อนมาก ให้โทนอุ่นเหมือนกันทั้งหน้า */
[style*="background:#f7f9fc" i], [style*="background:#fafbfc" i],
[style*="background:#f0f4f8" i] { background: #FFF9F4 !important; }
[style*="solid #e8edf2" i], [style*="solid #e8edf3" i] { border-color: var(--line) !important; }
.faq-block, .faq-section, .sources-box, .source-list, .article-meta-bar { background: #FFF9F4; }
.sources-box { border-left-color: var(--orange); }

/* หน้ารวมบทความ: ภาพแทนปกที่ยังไม่มีรูป */
.article-thumb,
[style*="linear-gradient(135deg,var(--navy)"] { background: var(--peach) !important; }
.article-thumb svg { stroke: rgba(201,106,16,0.35); }



/* หน้าความร่วมมือ (cooperation-page.css) */
.vbtn.active { background: var(--orange-dark); }
.load-more-btn { color: var(--orange-dark); }
.load-more-btn:hover { background: var(--orange-dark); color: white; }

/* หน้ารายละเอียดความร่วมมือ */
.back-bar { background: white; border-bottom: 1px solid var(--line); }
.back-btn { color: var(--text-soft); }
.back-btn:hover { color: var(--orange-dark); }
.detail-hero { background: linear-gradient(180deg, var(--peach) 0%, #FFFFFF 100%); }
.detail-hero-text h1 { color: #1E1E1E; }
.detail-hero-text .tagline { color: var(--text-mid); }
.website-card { background: var(--orange-dark); box-shadow: none; }
.website-card .wc-label, .wc-label { color: rgba(255,255,255,0.85); }
.website-card .wc-btn, .wc-btn { background: white; color: var(--orange-dark); }
.website-card .wc-btn:hover, .wc-btn:hover { background: var(--peach); }

/* ── ตัวหนังสือเทาที่ฝังในหน้าเว็บ (#555 / #666) → สีตัวหนังสือรองใหม่ ── */
[style*="color:#555"], [style*="color:#666"] { color: var(--text-mid) !important; }
.article-desc, .faq-a, .faq-item p, .source-list, .source-list ol li, .sources-box ol li { color: var(--text-mid); }

/* ══ มือถือ (≤ 768px) — ปรับให้ใช้นิ้วกดง่าย ตัวหนังสืออ่านชัด (27 ก.ย. 2026) ══════════
   ผลตรวจ 34 หน้าที่จอ 360/390px: ไม่มีหน้าไหนล้นจอ · ปัญหาหลักคือปุ่มเล็ก + ตัวหนังสือเล็ก */
@media (max-width: 768px) {
  /* ปุ่มเมนู ☰ : เดิมพื้นที่กดแค่ 24×16px → 44×44px (มาตรฐานขนาดนิ้ว) โดยขีด 3 เส้นขนาดเท่าเดิม */
  /* ปุ่ม "ปรึกษาฟรี" บนแถบเมนูของหน้าบทความ/ความร่วมมือ: จอแคบแล้วเบียดโลโก้จนตัวหนังสือหักเป็น 2 บรรทัด
     → ซ่อนบนมือถือ (ในเมนู ☰ มี "ติดต่อเรา" อยู่แล้ว) */
  nav > .nav-cta { display: none; }
  .hamburger { width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; margin-right: -10px; }

  /* ลิงก์ "← กลับ..." และ "ดูบทความทั้งหมด →" : เดิมสูง 24px → 44px */
  .breadcrumb, .back-btn, a[href="../../articles.html"][style*="font-size:0.85rem"] {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .breadcrumb { margin-bottom: 20px; }

  /* ตัวหนังสือเล็ก (ป้ายหัว section, ป้ายหมวดบทความ, แท็บความร่วมมือ) : เดิม 11.5–12px → 13px */
  .section-label { font-size: 13px; letter-spacing: 1.5px; }
  .article-tag, .ctab, .detail-section-label { font-size: 13px; }
  /* ป้ายเล็กที่เขียนขนาดไว้ในแท็กบทความ (0.7–0.78rem ≈ 11–12.5px) → 13px */
  [style*="font-size:0.7rem"], [style*="font-size:0.72rem"], [style*="font-size: 0.72rem"],
  [style*="font-size:0.75rem"], [style*="font-size: 0.75rem"], [style*="font-size: 0.78rem"] { font-size: 13px !important; }

  /* footer: ลิงก์ติดต่อเราเว้นระยะให้กดได้ทีละอัน ไม่กดโดนอันข้างๆ */
  .footer-col ul li { margin-bottom: 4px; }
  .footer-col ul li a { display: inline-block; padding: 8px 0; font-size: 0.95rem; }

  /* ตารางในบทความ : เดิมบีบ 3 คอลัมน์จนคำไทยหักทีละคำ → ให้ตารางกว้างพอ แล้วปัดซ้าย-ขวาในกรอบได้ */
  [style*="overflow-x:auto"] > table { min-width: 520px; }
  .article-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-table th, .article-table td { min-width: 140px; }

  /* หน้าแรก: Hero ไม่ต้องสูงเต็มจอบนมือถือ (แผนที่ถูกซ่อน เหลือที่ว่างเปล่าเยอะ) */
  #hero { min-height: auto; padding-top: 120px; padding-bottom: 72px; }
}

/* ป้ายตัวเล็กสีส้มสดในบทความ อ่านยาก (contrast 2.6:1) → ส้มอิฐ (4.8:1) ทุกขนาดจอ */
[style*="font-size:0.72rem"][style*="color:var(--orange)"],
[style*="font-size: 0.72rem"][style*="color:var(--orange)"],
[style*="font-size:0.7rem"][style*="color:var(--orange)"] { color: var(--orange-dark) !important; }
.detail-section-label { color: var(--orange-dark); }