/*
* Pali Help Desk — Premium Light-Purple Theme v1.4.73
* โหลดหลัง stylesheet เดิมทุกไฟล์
*
* หลักการ:
* - พื้นม่วงอ่อนคุมเฉพาะ "ส่วนเนื้อหา" (content) เท่านั้น
* - ไม่แตะพื้นหลังของ footer (#colophon) และเมนู/เฮดเดอร์ (#masthead)
* - เอาสีเขียว (#034f4f) ออกทั้งหมด เปลี่ยนเป็นม่วงอ่อนพรีเมียม
*/
:root {
--phdui-purple: #9575cd !important; /* ม่วงอ่อนหลัก (ตามที่ขอ) */
--phdui-purple-deep: #7e57c2 !important; /* ม่วงเข้มขึ้นเล็กน้อยสำหรับปุ่ม */
--phdui-purple-ink: #1a1a1a !important; /* หัวข้อ = ดำ */
--phdui-purple-soft: #f3eefb !important;
--phdui-purple-soft-2: #e9e0f7 !important;
--phdui-purple-line: #d8c8f0 !important;
--phdui-purple-line-2: #c3abe6 !important;
--phdui-text: #241b33 !important; /* ตัวอักษรเนื้อหา = เข้ม อ่านง่าย */
--phdui-muted: #4a4157 !important; /* คำอธิบาย = เทาเข้ม อ่านออกชัด */
--phdui-heading-black: #1a1a1a !important; /* หัวข้อสีดำ (แทนสีทองเดิม) */
--phdui-white: #ffffff !important;
/* map ตัวแปรเดิมของ frontend.css ให้กลายเป็นม่วงอ่อน */
--phdui-green: #f3eefb !important;
--phdui-green-dark: #e9e0f7 !important;
--phdui-gold: #9575cd !important;
--phdui-gold-dark: #7e57c2 !important;
--phdui-line: #d8c8f0 !important;
--phdui-contract-gold: #9575cd !important;
--phdui-contract-green:#f3eefb !important;
}
/* ============================================================
* 1) พื้นม่วงอ่อน — เฉพาะ "กล่องเนื้อหา" ไม่ลามไป footer / เมนู
* ============================================================ */
html body.phdui-support-ui #content,
html body.phdui-support-ui .site-content,
html body.phdui-support-ui #primary,
html body.phdui-support-ui .content-area,
html body.phdui-support-ui main.site-main,
html body.phdui-support-ui article,
html body.phdui-support-ui .ast-article-single,
html body.phdui-support-ui .entry-content,
html body.phdui-support-ui #content > .ast-container,
html body.phdui-support-ui #content .ast-container,
html body.phdui-support-ui .entry-content > .elementor,
html body.phdui-support-ui .elementor,
html body.phdui-support-ui .elementor-section-wrap,
html body.phdui-support-ui .elementor-section,
html body.phdui-support-ui .elementor-container,
html body.phdui-support-ui .e-con,
html body.phdui-support-ui .e-con-inner,
html body.phdui-support-ui .elementor-widget-wrap,
html body.phdui-support-ui .elementor-widget,
html body.phdui-support-ui .elementor-widget-container,
html body.phdui-support-ui .elementor-shortcode,
html body.phdui-support-ui .phdui-page-shell,
html body.phdui-support-ui .phdui-helpdesk-page,
html body.phdui-support-ui .phdui-root,
html body.phdui-support-ui .phdui-faq-page,
html body.phdui-support-ui .phdui-track-page,
html body.phdui-support-ui .phdui-ticket-main,
html body.phdui-support-ui .phdui-ticket-form-column,
html body.phdui-support-ui #phd-ticket-form-wrap {
background: linear-gradient(160deg,#f9f6ff 0%,#f3ecff 55%,#eee5ff 100%) !important;
background-color: #f3ecff !important;
background-image: linear-gradient(160deg,#f9f6ff 0%,#f3ecff 55%,#eee5ff 100%) !important;
color: var(--phdui-text) !important;
}
/* กล่องเนื้อหาแบบเต็มความกว้าง (KB / Help Desk)
* ใช้ specificity สูงกว่า frontend.css (html body.phdui-kb-page/.phdui-page .phdui-kb-landing)
* โดยเติม class ของ body เข้าไปให้ชนะแน่นอน และตัดเส้นทองบน/ล่างออก
*/
html body.phdui-support-ui.phdui-kb-page .phdui-kb-landing,
html body.phdui-support-ui.phdui-page .phdui-kb-landing,
html body.phdui-support-ui .phdui-kb-landing,
html body.phdui-kb-page .phdui-kb-landing,
html body.phdui-page .phdui-kb-landing {
background: linear-gradient(160deg,#f9f6ff 0%,#f1e9ff 55%,#eadcff 100%) !important;
background-color: #f1e9ff !important;
background-image: linear-gradient(160deg,#f9f6ff 0%,#f1e9ff 55%,#eadcff 100%) !important;
color: var(--phdui-text) !important;
border-top: 1px solid var(--phdui-purple-line) !important;
border-bottom: 1px solid var(--phdui-purple-line) !important;
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
}
/* v1.4.85 — แยกพื้นหลัง KB เป็นสองช่วงแบบโครงสร้างจริง
* landing ทั้งก้อนเป็นขาว; สีม่วงอยู่เฉพาะ content band ก่อนแถบแชร์ */
html body.phdui-support-ui.phdui-kb-page .phdui-kb-landing,
html body.phdui-support-ui.phdui-page .phdui-kb-landing,
html body.phdui-support-ui .phdui-kb-landing,
html body.phdui-kb-page .phdui-kb-landing,
html body.phdui-page .phdui-kb-landing {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
html body.phdui-support-ui .phdui-kb-content-band,
html body.phdui-kb-page .phdui-kb-content-band,
html body.phdui-page .phdui-kb-content-band {
display: block !important;
width: 100% !important;
padding: 34px 20px !important;
background: linear-gradient(160deg,#f9f6ff 0%,#f1e9ff 55%,#eadcff 100%) !important;
background-color: #f1e9ff !important;
background-image: linear-gradient(160deg,#f9f6ff 0%,#f1e9ff 55%,#eadcff 100%) !important;
}
html body.phdui-support-ui .phdui-kb-content-band .phdui-kb-landing-inner,
html body.phdui-kb-page .phdui-kb-content-band .phdui-kb-landing-inner,
html body.phdui-page .phdui-kb-content-band .phdui-kb-landing-inner {
padding-bottom: 0 !important;
}
@media (max-width: 640px) {
html body.phdui-support-ui .phdui-kb-content-band,
html body.phdui-kb-page .phdui-kb-content-band,
html body.phdui-page .phdui-kb-content-band {
padding: 24px 14px 30px !important;
}
}
/* ตัดแถบ/เส้นทองรุ่นเก่าออก แต่ "ไม่แตะ" footer และ header */
html body.phdui-support-ui #content::before,
html body.phdui-support-ui #content::after,
html body.phdui-support-ui .phdui-page-shell::before,
html body.phdui-support-ui .phdui-page-shell::after {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* ============================================================
* 2) footer + เมนู : คืนค่าเดิม ไม่ให้ม่วงกิน
* ============================================================ */
html body.phdui-support-ui #colophon,
html body.phdui-support-ui footer.site-footer,
html body.phdui-support-ui .site-footer,
html body.phdui-support-ui .ast-footer-overlay,
html body.phdui-support-ui #colophon *,
html body.phdui-support-ui footer.site-footer * {
background-image: none !important;
}
html body.phdui-support-ui #colophon,
html body.phdui-support-ui footer.site-footer,
html body.phdui-support-ui .site-footer {
background: initial !important;
background-color: initial !important;
}
/* FAQ/Track ใช้เส้นม่วงอ่อนแทนเส้นทองเดิม.
* Knowledge Base ไม่อยู่ในกฎนี้ เพราะขอบล่าง 1px คือเส้นม่วง
* ที่คั่นระหว่าง content band กับแถบแชร์สีขาว. */
html body.phdui-support-ui .phdui-faq-page,
html body.phdui-support-ui .phdui-track-page,
html body.phdui-page .phdui-faq-page,
html body.phdui-page .phdui-track-page,
html body.phdui-kb-page .phdui-faq-page {
border-top: 1px solid var(--phdui-purple-line) !important;
border-bottom: 1px solid var(--phdui-purple-line) !important;
}
/* ============================================================
* 3) การ์ด/หัวข้อในเนื้อหา — เอาเขียวออก เป็นม่วงอ่อน
* (พื้นเป็นม่วงอ่อนจริง ไม่ใช่ transparent เพื่อไม่ให้เขียวจากพาเรนต์ทะลุ)
* ============================================================ */
html body.phdui-support-ui :is(
.phdui-hero,
.phdui-kb-landing-heading,
.phdui-ticket-root,
.phdui-faq-root,
.phdui-track-root,
.phdui-kb-preview,
.phdui-kb-box,
.phdui-kb-section,
.phdui-knowledge-box,
.phdui-knowledge-base,
[class*="knowledge"]
),
html body.phdui-page :is(.phdui-kb-preview,.phdui-kb-box,.phdui-kb-section,.phdui-knowledge-box,.phdui-knowledge-base,[class*="knowledge"]),
html body.phdui-kb-page :is(.phdui-kb-preview,.phdui-kb-box,.phdui-kb-section,.phdui-knowledge-box,.phdui-knowledge-base,[class*="knowledge"]) {
border-color: var(--phdui-purple-line) !important;
background: linear-gradient(160deg,#f9f6ff 0%,#f1e9ff 100%) !important;
background-color: #f1e9ff !important;
background-image: linear-gradient(160deg,#f9f6ff 0%,#f1e9ff 100%) !important;
color: var(--phdui-text) !important;
}
/* ข้อความ/หัวข้อ/ไอคอนภายในกล่อง knowledge ที่เดิมเป็นทอง/ขาวบนเขียว */
html body.phdui-support-ui [class*="knowledge"] :is(h1,h2,h3,h4,strong),
html body.phdui-page [class*="knowledge"] :is(h1,h2,h3,h4,strong),
html body.phdui-kb-page [class*="knowledge"] :is(h1,h2,h3,h4,strong) {
color: var(--phdui-purple-deep) !important;
-webkit-text-fill-color: var(--phdui-purple-deep) !important;
}
html body.phdui-support-ui [class*="knowledge"] :is(p,span,small,label),
html body.phdui-page [class*="knowledge"] :is(p,span,small,label),
html body.phdui-kb-page [class*="knowledge"] :is(p,span,small,label) {
color: var(--phdui-muted) !important;
-webkit-text-fill-color: var(--phdui-muted) !important;
}
/* หัวข้อใหญ่ของ KB landing (เดิมเป็นการ์ดเขียว+อักษรทอง #ffc000) */
html body.phdui-support-ui .phdui-kb-landing-heading h1,
html body.phdui-support-ui .phdui-kb-landing-heading h1 small,
html body.phdui-kb-page .phdui-kb-landing-heading h1,
html body.phdui-page .phdui-kb-landing-heading h1,
html body.phdui-kb-page .phdui-kb-landing-heading h1 small,
html body.phdui-page .phdui-kb-landing-heading h1 small {
color: var(--phdui-purple-deep) !important;
-webkit-text-fill-color: var(--phdui-purple-deep) !important;
}
html body.phdui-support-ui .phdui-kb-landing-heading p,
html body.phdui-support-ui .phdui-kb-landing-heading > span,
html body.phdui-kb-page .phdui-kb-landing-heading p,
html body.phdui-page .phdui-kb-landing-heading p {
color: var(--phdui-muted) !important;
-webkit-text-fill-color: var(--phdui-muted) !important;
}
/* การ์ดรายการ KB item ที่เดิมเป็นเขียวโปร่ง rgba(0,52,50,.5) → การ์ดขาวขอบม่วง */
html body.phdui-support-ui .phdui-kb-landing-item,
html body.phdui-kb-page .phdui-kb-landing-item,
html body.phdui-page .phdui-kb-landing-item {
border: 1px solid var(--phdui-purple-line) !important;
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
color: var(--phdui-text) !important;
box-shadow: 0 10px 26px rgba(109,40,217,.10) !important;
}
html body.phdui-support-ui .phdui-kb-landing-item:hover,
html body.phdui-support-ui .phdui-kb-landing-item:focus,
html body.phdui-kb-page .phdui-kb-landing-item:hover,
html body.phdui-page .phdui-kb-landing-item:hover {
border-color: var(--phdui-purple-line-2) !important;
background: #faf7ff !important;
transform: translateY(-2px) !important;
box-shadow: 0 16px 34px rgba(109,40,217,.16) !important;
}
html body.phdui-support-ui .phdui-kb-landing-item strong,
html body.phdui-kb-page .phdui-kb-landing-item strong,
html body.phdui-page .phdui-kb-landing-item strong { color: var(--phdui-purple-ink) !important; -webkit-text-fill-color: var(--phdui-purple-ink) !important; }
html body.phdui-support-ui .phdui-kb-landing-item small,
html body.phdui-kb-page .phdui-kb-landing-item small,
html body.phdui-page .phdui-kb-landing-item small { color: var(--phdui-muted) !important; -webkit-text-fill-color: var(--phdui-muted) !important; }
html body.phdui-support-ui .phdui-kb-landing-arrow,
html body.phdui-kb-page .phdui-kb-landing-arrow,
html body.phdui-page .phdui-kb-landing-arrow { color: var(--phdui-purple) !important; -webkit-text-fill-color: var(--phdui-purple) !important; }
/* ไอคอน 📖 เดิมพื้นทอง rgba(255,192,0,.18) → พื้นม่วงอ่อน */
html body.phdui-support-ui .phdui-kb-landing-icon,
html body.phdui-kb-page .phdui-kb-landing-icon,
html body.phdui-page .phdui-kb-landing-icon {
background: #ede7ff !important;
color: var(--phdui-purple) !important;
-webkit-text-fill-color: var(--phdui-purple) !important;
}
/* ช่องค้นหาในการ์ด KB (input) ให้ขอบม่วง */
html body.phdui-support-ui .phdui-kb-landing input,
html body.phdui-kb-page .phdui-kb-landing input,
html body.phdui-page .phdui-kb-landing input {
border: 1px solid var(--phdui-purple-line-2) !important;
background: #ffffff !important;
color: var(--phdui-text) !important;
-webkit-text-fill-color: var(--phdui-text) !important;
}
/* ============================================================
* 4) การ์ดเนื้อหาหลัก (ฟอร์ม, accordion) — ขาวพรีเมียม
* ============================================================ */
html body.phdui-support-ui :is(
form,
.phdui-form-card,
.phdui-track-card,
.phdui-kb-empty,
.phdui-kb-landing-empty,
.phdui-faq-item
) {
border: 1px solid var(--phdui-purple-line) !important;
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
color: var(--phdui-text) !important;
box-shadow: 0 12px 30px rgba(109,40,217,.09) !important;
border-radius: 16px !important;
}
/* ============================================================
* 5) ตัวหนังสือ (เฉพาะในเนื้อหา ไม่แตะเมนู/footer)
* ============================================================ */
html body.phdui-support-ui #content :is(h1,h2,h3,h4,h5,h6,label,legend,strong) {
color: var(--phdui-purple-ink) !important;
-webkit-text-fill-color: var(--phdui-purple-ink) !important;
}
html body.phdui-support-ui #content :is(p,small,li,.phdui-muted) {
color: var(--phdui-muted) !important;
-webkit-text-fill-color: var(--phdui-muted) !important;
}
/* ============================================================
* 6) ฟอร์ม input
* ============================================================ */
html body.phdui-support-ui #content :is(input,select,textarea) {
border: 1px solid var(--phdui-purple-line-2) !important;
background: #ffffff !important;
background-image: none !important;
color: var(--phdui-text) !important;
-webkit-text-fill-color: var(--phdui-text) !important;
border-radius: 12px !important;
}
html body.phdui-support-ui #content :is(input,select,textarea):focus {
border-color: var(--phdui-purple) !important;
outline: none !important;
box-shadow: 0 0 0 4px rgba(124,58,237,.15) !important;
}
/* ============================================================
* 7) ปุ่ม + แท็บ
* ============================================================ */
html body.phdui-support-ui #content :is(
button,
.phdui-btn,
.phdui-submit,
.phdui-exact-tab.is-primary
) {
border: none !important;
background: linear-gradient(135deg,#a48bd6 0%,#9575cd 55%,#8268bd 100%) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-radius: 12px !important;
box-shadow: 0 8px 20px rgba(124,58,237,.28) !important;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
html body.phdui-support-ui #content :is(button,.phdui-btn,.phdui-submit,.phdui-exact-tab.is-primary):hover {
filter: brightness(1.05) !important;
transform: translateY(-1px) !important;
box-shadow: 0 12px 26px rgba(124,58,237,.36) !important;
}
html body.phdui-support-ui #content :is(
.phdui-exact-tab,
.phdui-faq-tabs a,
.phdui-track-tabs a,
.phdui-kb-tabs a
) {
border: 1px solid var(--phdui-purple-line-2) !important;
background: #ffffff !important;
background-image: none !important;
color: var(--phdui-purple-deep) !important;
-webkit-text-fill-color: var(--phdui-purple-deep) !important;
border-radius: 12px !important;
}
html body.phdui-support-ui #content :is(
.phdui-exact-tab,
.phdui-faq-tabs a,
.phdui-track-tabs a,
.phdui-kb-tabs a
):hover {
border-color: var(--phdui-purple) !important;
background: linear-gradient(135deg,#a48bd6,#9575cd) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* accordion / FAQ แถบหัวข้อ (แถบม่วงในรูป) */
html body.phdui-support-ui #content :is(.phdui-accordion-trigger,.phdui-faq-question,.phdui-accordion__header,summary) {
background: linear-gradient(135deg,#a48bd6 0%,#9575cd 55%,#8268bd 100%) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-radius: 12px !important;
}
/* ============================================================
* 8) แถบโซเชียล (KB / support) — ขาว ไม่ใช่เขียว
* ============================================================ */
html body.phdui-support-ui .phdui-kb-social-band,
html body.phdui-support-ui .phdui-social-white-band {
background: #ffffff !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* ============================================================
* 9) การ์ดวิดเจ็ตย่อ (อาจอยู่นอกหน้า support)
* ============================================================ */
.phdui-helpdesk-widget {
border: 1px solid var(--phdui-purple-line) !important;
background: #ffffff !important;
color: var(--phdui-text) !important;
box-shadow: 0 10px 26px rgba(124,58,237,.12) !important;
}
.phdui-helpdesk-widget__link,
html body .phdui-helpdesk-widget__link {
border: 1px solid var(--phdui-purple-line-2) !important;
background: #ffffff !important;
color: var(--phdui-purple-deep) !important;
-webkit-text-fill-color: var(--phdui-purple-deep) !important;
}
.phdui-helpdesk-widget__link.is-primary,
html body .phdui-helpdesk-widget__link.is-primary,
.phdui-helpdesk-widget__link:hover {
background: linear-gradient(135deg,#a48bd6,#9575cd) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* ============================================================
* 10) หัวข้อสีทอง/ส้มเดิม (#ffc000) → ดำทั้งหมด
* ครอบ selector ที่ frontend.css ใช้ specificity สูง
* ============================================================ */
html body.phdui-support-ui #content h1,
html body.phdui-support-ui #content h2,
html body.phdui-support-ui #content h3,
html body.phdui-support-ui #content h4,
html body.phdui-support-ui #content h5,
html body.phdui-support-ui #content h6,
html body.phdui-page .phdui-faq-root h1, html body.phdui-page .phdui-faq-root h2, html body.phdui-page .phdui-faq-root h3,
html body.phdui-page .phdui-track-root h1, html body.phdui-page .phdui-track-root h2, html body.phdui-page .phdui-track-root h3,
html body.phdui-page .phdui-faq-page h1, html body.phdui-page .phdui-faq-page h2, html body.phdui-page .phdui-faq-page h3,
html body.phdui-page .phdui-track-page h1, html body.phdui-page .phdui-track-page h2, html body.phdui-page .phdui-track-page h3,
html body.phdui-support-ui .phdui-faq-root .phdui-kb-empty h3,
html body.phdui-page .phdui-faq-root .phdui-kb-empty h3,
html body.phdui-support-ui .phdui-kb-landing-heading h1,
html body.phdui-support-ui .phdui-kb-landing-heading h1 small,
html body.phdui-kb-page .phdui-kb-landing-heading h1,
html body.phdui-page .phdui-kb-landing-heading h1,
html body.phdui-kb-page .phdui-kb-landing-heading h1 small,
html body.phdui-page .phdui-kb-landing-heading h1 small,
html body.phdui-support-ui .phdui-kb-landing-empty h2,
html body.phdui-page .phdui-kb-landing-empty h2 {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
/* ไอคอนลูกศร/หัวข้อย่อยที่เคยเป็นทอง → ม่วงอ่อน (ไม่ใช่ทอง) */
html body.phdui-support-ui .phdui-kb-landing-arrow,
html body.phdui-page .phdui-kb-landing-arrow,
html body.phdui-support-ui .phdui-faq-root .phdui-kb-list a::before,
html body.phdui-page .phdui-faq-root .phdui-kb-list a::before {
color: #9575cd !important;
-webkit-text-fill-color: #9575cd !important;
}
/* ============================================================
* 11) การ์ด KB (ฐานความรู้) — เพิ่ม contrast ให้อ่านออก
* พื้นเข้มขึ้นนิด + ตัวอักษรดำ/เทาเข้ม + ช่องค้นหาขอบชัด
* ============================================================ */
html body.phdui-support-ui .phdui-kb-landing,
html body.phdui-kb-page .phdui-kb-landing,
html body.phdui-page .phdui-kb-landing,
html body.phdui-support-ui [class*="knowledge"],
html body.phdui-page [class*="knowledge"],
html body.phdui-kb-page [class*="knowledge"] {
background: linear-gradient(160deg,#e5d8f7 0%,#dccbf2 55%,#d0bbec 100%) !important;
background-color: #dccbf2 !important;
background-image: linear-gradient(160deg,#e5d8f7 0%,#dccbf2 55%,#d0bbec 100%) !important;
}
/* หัวข้อการ์ด KB = ดำ, คำอธิบาย/ลิงก์/รายการ = ดำ-เทาเข้มอ่านง่าย */
html body.phdui-support-ui .phdui-kb-landing-heading p,
html body.phdui-page .phdui-kb-landing-heading p,
html body.phdui-kb-page .phdui-kb-landing-heading p,
html body.phdui-support-ui [class*="knowledge"] :is(p,span,small,label,a,li),
html body.phdui-page [class*="knowledge"] :is(p,span,small,label,a,li),
html body.phdui-kb-page [class*="knowledge"] :is(p,span,small,label,a,li) {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
/* ช่องค้นหาในการ์ด KB — พื้นขาว ขอบม่วงชัด ตัวอักษร/placeholder อ่านออก */
html body.phdui-support-ui .phdui-kb-landing input,
html body.phdui-page .phdui-kb-landing input,
html body.phdui-kb-page .phdui-kb-landing input,
html body.phdui-support-ui [class*="knowledge"] input,
html body.phdui-page [class*="knowledge"] input,
html body.phdui-kb-page [class*="knowledge"] input {
background: #ffffff !important;
border: 1px solid #a78bd8 !important;
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
html body.phdui-support-ui [class*="knowledge"] input::placeholder,
html body.phdui-page [class*="knowledge"] input::placeholder,
html body.phdui-support-ui .phdui-kb-landing input::placeholder {
color: #4a4157 !important;
-webkit-text-fill-color: #4a4157 !important;
opacity: 1 !important;
}
/* ============================================================
* 12) ปุ่ม/แถบ FAQ ม่วง — ใช้โทน #9575cd อ่อนลง (ไม่เข้มทึบ)
* ============================================================ */
html body.phdui-support-ui #content :is(button,.phdui-btn,.phdui-submit,.phdui-exact-tab.is-primary),
html body.phdui-support-ui #content :is(.phdui-accordion-trigger,.phdui-faq-question,.phdui-accordion__header,summary) {
background: linear-gradient(135deg,#a48bd6 0%,#9575cd 55%,#8268bd 100%) !important;
}
html body.phdui-support-ui #content :is(button,.phdui-btn,.phdui-submit):hover {
background: linear-gradient(135deg,#a48bd6,#8268bd) !important;
}
/* ============================================================
* 13) ช่องค้นหา KB (ปลั๊กอินหลัก) — ตัวอักษร/ค่า/placeholder = ดำ
* ============================================================ */
html body.phdui-support-ui #content input[type="text"],
html body.phdui-support-ui #content input[type="search"],
html body.phdui-page #content input[type="text"],
html body.phdui-page #content input[type="search"],
html body.phdui-kb-page #content input[type="text"],
html body.phdui-kb-page #content input[type="search"] {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
background: #ffffff !important;
}
html body.phdui-support-ui #content input::placeholder,
html body.phdui-page #content input::placeholder,
html body.phdui-kb-page #content input::placeholder {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
opacity: .75 !important;
}
/* ============================================================
* 14) คำถามที่พบบ่อย (FAQ accordion) — ม่วงสดตามที่ต้องการ (แบบรูป 2)
* คุมทั้งกล่องและปุ่มโดยตรง ไม่พึ่ง scrubber
* ============================================================ */
html body.phdui-support-ui .phdui-accordion,
html body.phdui-page .phdui-accordion,
html body.phdui-kb-page .phdui-accordion {
background: linear-gradient(135deg,#8b5cf6 0%,#7c3aed 55%,#6d28d9 100%) !important;
background-color: #7c3aed !important;
background-image: linear-gradient(135deg,#8b5cf6 0%,#7c3aed 55%,#6d28d9 100%) !important;
border: 1px solid #6d28d9 !important;
border-radius: 12px !important;
box-shadow: 0 8px 20px rgba(124,58,237,.22) !important;
overflow: hidden !important;
}
html body.phdui-support-ui .phdui-accordion .phdui-accordion-button,
html body.phdui-page .phdui-accordion .phdui-accordion-button,
html body.phdui-kb-page .phdui-accordion .phdui-accordion-button {
background: transparent !important;
background-image: none !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body.phdui-support-ui .phdui-accordion .phdui-accordion-button *,
html body.phdui-page .phdui-accordion .phdui-accordion-button *,
html body.phdui-kb-page .phdui-accordion .phdui-accordion-button * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body.phdui-support-ui .phdui-accordion .phdui-chevron,
html body.phdui-page .phdui-accordion .phdui-chevron {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* เนื้อหาที่กางออกในแต่ละข้อ — พื้นขาว ตัวอักษรเข้ม อ่านง่าย */
html body.phdui-support-ui .phdui-accordion .phdui-accordion-content,
html body.phdui-page .phdui-accordion .phdui-accordion-content,
html body.phdui-kb-page .phdui-accordion .phdui-accordion-content,
html body.phdui-support-ui .phdui-accordion .phdui-accordion-content *,
html body.phdui-page .phdui-accordion .phdui-accordion-content * {
background: #ffffff !important;
background-color: #ffffff !important;
color: #241b33 !important;
-webkit-text-fill-color: #241b33 !important;
}
/* ============================================================
* 15) การ์ดฟอร์ม "แจ้งปัญหา / ส่ง Ticket" — กรอบ พื้นม่วงเข้ม
* ครอบทั้งบล็อก (หัวข้อ + แท็บ + ฟอร์ม) เป็นกล่องเดียว ตามที่วงสีแดง
* ============================================================ */
html body.phdui-support-ui .phdui-ticket-root,
html body.phdui-page .phdui-ticket-root {
background: linear-gradient(160deg,#9575cd 0%,#8a68c6 55%,#7e57c2 100%) !important;
background-color: #9575cd !important;
background-image: linear-gradient(160deg,#9575cd 0%,#8a68c6 55%,#7e57c2 100%) !important;
border: 3px solid #d7c3f4 !important;
border-radius: 24px !important;
box-shadow: 0 22px 52px rgba(149,117,205,.32) !important;
padding: clamp(22px,3.4vw,40px) !important;
margin: clamp(16px,3vw,32px) auto !important;
width: 100% !important;
max-width: 1180px !important; /* ขยายกรอบให้กว้างขึ้น */
box-sizing: border-box !important;
}
/* กล่องฟอร์มด้านในให้โปร่ง วางบนพื้นม่วงเข้มของ root */
html body.phdui-support-ui .phdui-ticket-root #phd-ticket-form-wrap,
html body.phdui-page .phdui-ticket-root #phd-ticket-form-wrap,
html body.phdui-support-ui .phdui-ticket-root .phdui-hero,
html body.phdui-page .phdui-ticket-root .phdui-hero {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ข้อความ/หัวข้อ/label ในการ์ด → ขาว อ่านง่ายบนม่วงเข้ม */
html body.phdui-support-ui .phdui-ticket-root :is(h1,h2,h3,h4,label,legend,strong,p,span,small),
html body.phdui-page .phdui-ticket-root :is(h1,h2,h3,h4,label,legend,strong,p,span,small) {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* แท็บเมนูบนการ์ดม่วงเข้ม — โปร่งขอบขาว, ตัวที่เลือก = ขาวทึบ */
html body.phdui-support-ui .phdui-ticket-root .phdui-exact-tab,
html body.phdui-page .phdui-ticket-root .phdui-exact-tab {
background: rgba(255,255,255,.16) !important;
background-image: none !important;
border: 1px solid #d7c3f4 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body.phdui-support-ui .phdui-ticket-root .phdui-exact-tab.is-primary,
html body.phdui-page .phdui-ticket-root .phdui-exact-tab.is-primary,
html body.phdui-support-ui .phdui-ticket-root .phdui-exact-tab:hover,
html body.phdui-page .phdui-ticket-root .phdui-exact-tab:hover {
background: #ffffff !important;
color: #7e57c2 !important;
-webkit-text-fill-color: #7e57c2 !important;
border-color: #ffffff !important;
}
/* ช่องกรอก (select / input / textarea) ในการ์ด → พื้นขาว ตัวอักษรดำ */
html body.phdui-support-ui .phdui-ticket-root :is(input,select,textarea),
html body.phdui-page .phdui-ticket-root :is(input,select,textarea) {
background: #ffffff !important;
background-image: none !important;
border: 1px solid #c9b6ec !important;
color: #241b33 !important;
-webkit-text-fill-color: #241b33 !important;
border-radius: 12px !important;
}
html body.phdui-support-ui .phdui-ticket-root :is(input,select,textarea)::placeholder,
html body.phdui-page .phdui-ticket-root :is(input,select,textarea)::placeholder {
color: #6a6178 !important;
-webkit-text-fill-color: #6a6178 !important;
opacity: 1 !important;
}
html body.phdui-support-ui .phdui-ticket-root :is(input,select,textarea):focus,
html body.phdui-page .phdui-ticket-root :is(input,select,textarea):focus {
border-color: #b79fe0 !important;
outline: none !important;
box-shadow: 0 0 0 4px rgba(255,255,255,.28) !important;
}
/* ปุ่มส่ง — ขาวทึบ ตัดกับพื้นม่วงเข้ม ให้เด่น */
html body.phdui-support-ui .phdui-ticket-root button,
html body.phdui-support-ui .phdui-ticket-root .phdui-submit,
html body.phdui-page .phdui-ticket-root button {
background: #ffffff !important;
background-image: none !important;
color: #7e57c2 !important;
-webkit-text-fill-color: #7e57c2 !important;
border: none !important;
border-radius: 12px !important;
font-weight: 700 !important;
box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}
html body.phdui-support-ui .phdui-ticket-root button:hover,
html body.phdui-page .phdui-ticket-root button:hover {
background: #f3eefb !important;
transform: translateY(-1px) !important;
}
/* ============================================================
* 18) v1.4.74 — ระยะห่างจากเมนู + ปรับสี/ขนาดหัวข้อให้เท่ากันทั้งหน้า
*
* - เพิ่มระยะห่างระหว่างกล่องม่วง "ศูนย์ช่วยเหลือ" กับแถบเมนูด้านบน
* (layout-contract.css บังคับ margin-top:0 ไว้ที่ .phdui-root.phdui-ticket-root
* เพื่อกันเส้นทองซ้อน — ใช้ #phdui-report-section (มี id เดียวเท่านั้น)
* เพื่อให้ specificity สูงกว่าแน่นอน ชนะกฎเดิมได้โดยไม่ต้องแก้ไฟล์นั้น)
* - หัวข้อ "ศูนย์ช่วยเหลือ (Help Desk)" เป็นสีขาว + ใหญ่ขึ้น
* (ต้องชนะกฎ #content h1{color:#1a1a1a} ในข้อ 10 ด้านบนของไฟล์นี้เอง
* จึงเติม #content ควบ #phdui-report-section เข้าไปด้วยเพื่อความชัวร์)
* - หัวข้อ "ติดตามสถานะ Ticket" และ "คำถามที่พบบ่อย" ปรับตัวอักษรให้ใหญ่
* เท่ากับหัวข้อบน (สีเดิม—ดำ—ตามที่ออกแบบไว้ อ่านง่ายบนพื้นขาว)
* - เพิ่มระยะห่างด้านบนก่อนหัวข้อ "คำถามที่พบบ่อย" ในโซนพื้นขาว
* ============================================================ */
/* ระยะห่างจากเมนูด้านบนถึงกล่องม่วง */
html body.phdui-support-ui #phdui-report-section,
html body.phdui-page #phdui-report-section {
margin-top: clamp(28px, 4vw, 48px) !important;
}
/* หัวข้อ "ศูนย์ช่วยเหลือ (Help Desk)" — ขาว + ใหญ่ขึ้น */
html body.phdui-support-ui #content #phdui-report-section .phdui-hero h1,
html body.phdui-support-ui #content #phdui-report-section .phdui-hero h1.phdui-title,
html body.phdui-support-ui #phdui-report-section .phdui-hero h1,
html body.phdui-support-ui #phdui-report-section .phdui-hero h1.phdui-title,
html body.phdui-page #phdui-report-section .phdui-hero h1,
html body.phdui-page #phdui-report-section .phdui-hero h1.phdui-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 26px !important;
}
/* หัวข้อ "ติดตามสถานะ Ticket" และ "คำถามที่พบบ่อย" — ไซส์เท่าหัวข้อบน */
html body.phdui-page #phdui-track-section .phdui-hero h1,
html body.phdui-page #phdui-track-section .phdui-hero h1.phdui-title,
html body.phdui-page #phdui-faq-section .phdui-hero h1,
html body.phdui-page #phdui-faq-section .phdui-hero h1.phdui-title,
html body.phdui-support-ui #phdui-track-section .phdui-hero h1,
html body.phdui-support-ui #phdui-track-section .phdui-hero h1.phdui-title,
html body.phdui-support-ui #phdui-faq-section .phdui-hero h1,
html body.phdui-support-ui #phdui-faq-section .phdui-hero h1.phdui-title {
font-size: 26px !important;
}
/* ระยะห่างด้านบนก่อนหัวข้อ "คำถามที่พบบ่อย" ในพื้นขาว */
html body.phdui-page .phdui-faq-white-band,
html body.phdui-support-ui .phdui-faq-white-band {
padding-top: 40px !important;
}
/* ============================================================
* 19) v1.4.75 — เติมสีพื้นม่วงอ่อนให้เต็มกรอบการ์ด
* กล่อง "ติดตามสถานะ Ticket" (ฟอร์มค้นหา) และกล่อง
* "คำถามที่พบบ่อย" (รายการ) เดิมพื้นหลังเป็นสีขาว มีแค่เส้นขอบม่วง
* ทำให้ดูเหมือนกรอบเปล่า — เปลี่ยนพื้นหลังให้เป็นม่วงอ่อนเต็มกรอบ
* (ช่องกรอกข้อมูลด้านในยังคงเป็นสีขาวตามเดิม อ่านง่าย)
* ใช้ #id ของแต่ละ section เพื่อให้ specificity ชนะกฎเดิมแน่นอน
* ============================================================ */
html body.phdui-page #phdui-track-section .phdui-form-card,
html body.phdui-support-ui #phdui-track-section .phdui-form-card,
html body.phdui-page #phdui-faq-section .phdui-faq-list,
html body.phdui-support-ui #phdui-faq-section .phdui-faq-list {
background: linear-gradient(160deg,#f3eefb 0%,#e9e0f7 100%) !important;
background-color: #f3eefb !important;
background-image: linear-gradient(160deg,#f3eefb 0%,#e9e0f7 100%) !important;
border: 1px solid #c3abe6 !important;
border-radius: 16px !important;
padding: 24px !important;
box-shadow: 0 12px 30px rgba(109,40,217,.10) !important;
}
/* ============================================================
* 20) v1.4.76 — เก็บงานกล่องม่วง: ลบเงาที่ล้นออกนอกกรอบมน +
* เพิ่มระยะขอบให้ตัวหนังสือในช่องกรอก
*
* - .phdui-form-card / .phdui-faq-list ที่เติมพื้นม่วงในข้อ 19
* ไม่ได้ตัดขอบ (overflow) ไว้ ทำให้เงา/กรอบของ