/* ========================================================== SP Solution Center — หัวเว็บใหม่ (โทน ขาว / ส้ม / ดำ) ค่าคอนทราสต์ที่ตรวจแล้ว: #333333 บนขาว 12.63:1 ผ่าน AA #333333 บนส้ม #FF8A00 5.35:1 ผ่าน AA <- เมนู active ขาว บนส้ม #FF8A00 2.36:1 ไม่ผ่าน <- ห้ามใช้ #AA5C00 บนขาว 4.56:1 ผ่าน AA <- ส้มสำหรับตัวหนังสือ ========================================================== */ :root{ --sp-white:#FFFFFF; --sp-cream:#FAF7F2; --sp-orange:#FF8A00; /* Energetic Warmth — พื้น active, แถบบน */ --sp-orange-ink:#AA5C00; /* ส้มสำหรับตัวหนังสือ/ลิงก์ 4.95:1 บนขาว · 4.63:1 บนครีม */ --sp-red:#E53935; /* Passion — ใช้เน้นน้อย ๆ */ --sp-ink:#333333; /* Professional — ตัวหนังสือหลัก */ --sp-ink-soft:#5F5F5F; --sp-line:#E6E1D8; --sp-serif:"Prompt",system-ui,sans-serif; --sp-sans:"Sarabun",system-ui,sans-serif; --sp-mono:"IBM Plex Mono",ui-monospace,monospace; } /* ---------- แถบบนสุด : ส้มอ่อน (แบบ ค) ---------- ลดความจี้ดโดยไม่ทิ้งแถบส้ม — ตัวหนังสือดำ #333 อ่านได้ 10.53:1 ส้มเข้มยังทำงานอยู่ที่เส้นคั่น แท็บที่เลือก และปุ่ม CTA */ .sp-top{ background:linear-gradient(96deg,#FFF0DC 0%,#FFEBD1 55%,#FFE7C6 100%); border-bottom:2px solid var(--sp-orange); padding:.68rem 1.25rem;display:flex;align-items:center;gap:1.1rem} /* ตัวมาร์กเป็นสีส้ม ถ้าวางบนแถบส้มตรง ๆ จะจมหาย (วัดได้ 1.2–1.4:1) จึงรองด้วยไทล์ขาว ให้โลโก้เด่นและคมขึ้น */ .sp-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none} .sp-brand .mk{background:#fff;border-radius:11px;padding:6px 9px;display:flex;align-items:center; border:1px solid #F2DFC0;box-shadow:0 2px 6px rgba(120,80,20,.13);flex:none} .sp-brand img{height:32px;width:auto;display:block} .sp-brand .t{font-family:var(--sp-serif);font-weight:700;font-size:1.06rem;letter-spacing:.02em; color:var(--sp-ink);line-height:1.18} .sp-brand .t small{display:block;font-family:var(--sp-mono);font-weight:500;font-size:.68rem; letter-spacing:.15em;text-transform:uppercase;color:#7A5C2E;opacity:1;margin-top:2px} .sp-search{flex:1;max-width:430px;position:relative} /* 16px คือเส้นที่ Safari บน iPhone จะซูมหน้าจอเข้าเองตอนแตะช่องกรอก แล้วไม่ซูมกลับให้ ของเดิม .95rem = 15.2px ต่ำกว่าเส้นพอดี ทำให้ทุกหน้าที่มีหัวเว็บโดนซูมหมด */ .sp-search input{width:100%;font-family:var(--sp-sans);font-size:1rem;color:var(--sp-ink); padding:.56rem .9rem .56rem 2.4rem;border:1px solid #EBD9BC;border-radius:999px;background:#fff; box-shadow:0 1px 2px rgba(120,80,20,.08)} .sp-search input::placeholder{color:#5A5A5A} .sp-search input:focus{outline:none;border-color:var(--sp-orange); box-shadow:0 0 0 3px rgba(255,138,0,.22)} .sp-search .ic{position:absolute;left:.82rem;top:50%;transform:translateY(-50%);width:16px;height:16px; stroke:#7C7568;fill:none;stroke-width:2.2;pointer-events:none} /* กล่องผลค้นหา */ .sp-res{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:#fff;border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.22);overflow:hidden;display:none;z-index:120; max-height:min(70vh,460px);overflow-y:auto} .sp-res.open{display:block} .sp-res .hd{font-family:var(--sp-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:#5A5A5A;padding:.7rem .95rem .35rem} .sp-res a{display:block;text-decoration:none;padding:.6rem .95rem;border-bottom:1px solid #F0ECE4} .sp-res a:last-child{border-bottom:none} .sp-res a:hover,.sp-res a.sel{background:#FFF4E6} .sp-res a b{display:block;font-family:var(--sp-serif);font-weight:600;font-size:.94rem; color:var(--sp-ink);line-height:1.5} .sp-res a span{display:block;font-size:.8rem;color:#5A5A5A;line-height:1.6;margin-top:1px; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .sp-res a em{font-style:normal;background:#FFE2B8;color:#A34D00;border-radius:3px;padding:0 .12em} .sp-res .none{padding:1rem .95rem;font-size:.9rem;color:#5A5A5A;line-height:1.8} .sp-res .none a.q{display:inline;color:var(--sp-orange-ink);font-weight:600;text-decoration:underline; padding:0;border:none} .sp-acts{margin-left:auto;display:flex;gap:.5rem;flex:none} .sp-acts a{text-decoration:none;font-size:.86rem;font-weight:600;border-radius:999px; padding:.46rem 1rem;white-space:nowrap;font-family:var(--sp-sans)} .sp-acts .signup{background:#fff;color:var(--sp-ink);border:1px solid #EBD9BC; box-shadow:0 1px 2px rgba(120,80,20,.08)} .sp-acts .login{background:var(--sp-ink);color:#fff} .sp-acts a:hover{transform:translateY(-1px)} /* ---------- แถวเมนู ---------- */ .sp-nav{background:#fff;border-bottom:1px solid var(--sp-line);display:flex;align-items:stretch; padding:0 .6rem;position:relative;font-family:var(--sp-sans)} .sp-nav a.i,.sp-nav .has>button{ font-family:var(--sp-sans);font-size:1rem;font-weight:500;color:var(--sp-ink);text-decoration:none; background:none;border:none;cursor:pointer;padding:.86rem 1.05rem;display:flex;align-items:center; gap:.38rem;line-height:1.4;white-space:nowrap;letter-spacing:0; border-bottom:3px solid transparent;transition:background .15s,color .15s} .sp-nav a.i:hover,.sp-nav .has>button:hover{background:var(--sp-cream);color:var(--sp-orange-ink)} .sp-nav a.i.on,.sp-nav .has.on>button{background:var(--sp-orange);color:var(--sp-ink); border-bottom-color:#C96D00;font-weight:600} .sp-nav a.i.on:hover,.sp-nav .has.on>button:hover{background:var(--sp-orange);color:var(--sp-ink)} .sp-nav a.quote{margin-left:auto;align-self:center;background:var(--sp-ink);color:#fff; border-radius:999px;padding:.52rem 1.2rem;font-weight:600;font-size:.95rem;border-bottom:none; margin-right:.4rem} .sp-nav a.quote:hover{background:#1c1c1c;color:#fff} .sp-nav .has{position:relative;display:flex;align-items:stretch} .sp-nav .has>button svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.6; transition:transform .18s} .sp-nav .has.open>button svg{transform:rotate(180deg)} .sp-dd{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--sp-line); border-radius:0 0 12px 12px;box-shadow:0 14px 40px rgba(0,0,0,.16);padding:.4rem;display:none;z-index:110} .sp-nav .has.open .sp-dd{display:block} .sp-dd a{display:block;text-decoration:none;color:var(--sp-ink);font-size:.95rem;padding:.55rem .75rem; border-radius:8px;line-height:1.6} .sp-dd a:hover{background:var(--sp-cream);color:var(--sp-orange-ink)} .sp-dd a b{display:block;font-weight:600;font-family:var(--sp-serif)} .sp-dd a span{display:block;font-size:.79rem;color:#5A5A5A;line-height:1.6} .sp-msearch{display:none} /* เมนูช่วงจอกลาง — ต้องมีหลังเพิ่มเมนู "ผลงาน" */ @media (min-width:981px) and (max-width:1200px){ .sp-nav a.i,.sp-nav .has>button{padding-left:.68rem;padding-right:.68rem;font-size:.95rem} .sp-nav a.quote{padding:.5rem .95rem;font-size:.92rem} .sp-nav{overflow-x:auto;scrollbar-width:none} .sp-nav::-webkit-scrollbar{display:none} } /* v244 เพิ่มเมนู "โปรแกรมควบคุมเอกสาร" — จอโน้ตบุ๊ก 1201–1440px บีบระยะเมนูให้พอดีหนึ่งแถว */ @media (min-width:1201px) and (max-width:1440px){ .sp-nav a.i,.sp-nav .has>button{padding-left:.62rem;padding-right:.62rem;font-size:.95rem} .sp-nav a.quote{padding:.5rem .95rem;font-size:.92rem} } @media (max-width:980px){ .sp-search{display:none} .sp-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .sp-nav::-webkit-scrollbar{display:none} .sp-nav a.quote{margin-left:.4rem} /* แถบเมนูจอแคบเลื่อนแนวนอนได้ (overflow-x) ซึ่งตัดกล่องเมนูย่อยหายทั้งใบ จึงเปลี่ยนไปยึดกับหน้าจอ แล้วให้ JS ส่งขอบล่างของปุ่มมาทาง --dd-top */ .sp-nav .has.open .sp-dd{ position:fixed;top:var(--dd-top,112px);left:.8rem;right:.8rem; min-width:0;width:auto;max-height:min(70vh,420px);overflow-y:auto; z-index:300;box-shadow:0 18px 44px rgba(25,23,18,.18)} .sp-dd-veil{position:fixed;inset:0;z-index:299;background:rgba(25,23,18,.28)} /* กล่องเมนูย่อยที่ถูก JS ย้ายออกมาเป็นลูกของ body เพื่อหนีการตัดของ iOS Safari */ .sp-dd.sp-dd-float{ display:block;position:fixed;top:var(--dd-top,112px);left:.8rem;right:.8rem; min-width:0;width:auto;max-height:min(70vh,420px);overflow-y:auto; z-index:300;background:#fff;border:1px solid var(--sp-line); border-radius:12px;padding:.4rem;box-shadow:0 18px 44px rgba(25,23,18,.18)} } @media (min-width:981px){.sp-dd-veil{display:none}} @media (max-width:620px){ .sp-top{padding:.55rem .8rem;gap:.6rem;border-bottom:none} .sp-brand .mk{padding:5px 7px;border-radius:9px} .sp-brand img{height:25px} .sp-brand .t{font-size:.88rem} .sp-brand .t small{font-size:.62rem;letter-spacing:.09em} .sp-acts .signup{display:none} .sp-acts a{font-size:.78rem;padding:.4rem .8rem} .sp-msearch{display:block;background:linear-gradient(96deg,#FFEBD1,#FFE7C6); border-bottom:2px solid var(--sp-orange);padding:0 .8rem .6rem} .sp-msearch .sp-search{display:block;max-width:none} .sp-nav a.i,.sp-nav .has>button{font-size:.92rem;padding:.72rem .78rem} } /* หน้า /search/ */ .sp-searchpage{max-width:860px;margin-inline:auto;padding:2.5rem 1.2rem 4rem} .sp-searchpage h1{font-family:var(--sp-serif);font-weight:600;font-size:1.5rem;color:var(--sp-ink); margin-bottom:.4rem} .sp-searchpage .cnt{color:#5A5A5A;font-size:.92rem;margin-bottom:1.6rem} .sp-searchpage .row{display:block;text-decoration:none;padding:1rem 0;border-bottom:1px solid var(--sp-line)} .sp-searchpage .row b{display:block;font-family:var(--sp-serif);font-weight:600;font-size:1.06rem; color:var(--sp-ink);line-height:1.55} .sp-searchpage .row u{display:block;text-decoration:none;font-family:var(--sp-mono);font-size:.7rem; color:var(--sp-orange-ink);margin-top:.2rem} .sp-searchpage .row span{display:block;font-size:.92rem;color:#5A5A5A;line-height:1.8;margin-top:.3rem} .sp-searchpage .row em{font-style:normal;background:#FFE2B8;color:#A34D00;border-radius:3px;padding:0 .14em} .sp-searchpage .row:hover b{color:var(--sp-orange-ink)} .sp-searchpage input.big{width:100%;font-family:var(--sp-sans);font-size:1.05rem;color:var(--sp-ink); padding:.85rem 1rem;border:1.5px solid var(--sp-line);border-radius:12px;margin-bottom:1.4rem} .sp-searchpage input.big:focus{outline:none;border-color:var(--sp-orange); box-shadow:0 0 0 3px rgba(255,138,0,.22)} /* ========================================================== โทนสว่าง — ทับหัวเรื่องพื้นดำเดิมของทุกหน้า (ไฟล์นี้โหลดท้ายสุดใน จึงชนะ style ในหน้า) หมายเหตุ: .photo-hero เดิมออกแบบให้วางบนรูปถ่าย พอถอดรูปคนออกตอน PDPA จึงเหลือแค่ฉากดำเปล่า ๆ ========================================================== */ /* เดิมมี .svc-head อยู่ในกลุ่มนี้ด้วย ทั้งที่มันไม่ใช่หัวหน้าเพจ แต่เป็นแค่แถวหัวข้อ ที่อยู่ "ข้างใน" section สีครีมของหน้าแรก ผลคือกลายเป็นกล่องขาวลอยอยู่บนพื้นครีม มีเส้นขอบล่างและไล่สีส้มติดมาด้วย ดูเหมือนของหลุด — ถอดออกจากกฎนี้ (.svc-head ถูกใช้แค่ในหน้าแรกหน้าเดียว การถอดจึงไม่กระทบหน้าอื่น) */ .photo-hero,.a-hero,.c-hero,.t-hero,.list-hero{ background:#fff !important;color:#333 !important; background-image:radial-gradient(820px 320px at 92% -22%,rgba(255,138,0,.14),transparent 62%) !important; border-bottom:1px solid #E6E1D8} .photo-hero::before,.a-hero::before,.c-hero::before{display:none !important} .photo-hero{padding:4.2rem 0 3.2rem !important} .photo-hero .mono,.a-hero .mono,.c-hero .mono,.t-hero .mono,.svc-head .mono,.list-hero .mono{color:#A34D00} .photo-hero h1,.a-hero h1,.c-hero h1,.t-hero h1,.svc-head h1,.list-hero h1{color:#333} .photo-hero h1 em,.a-hero h1 em,.c-hero h1 em,.t-hero h1 em, .svc-head h1 em,.list-hero h1 em{color:#A34D00} .photo-hero p.sub,.photo-hero p,.c-hero p,.t-hero p,.svc-head p,.list-hero p{color:#5F5F5F} .photo-hero .pill,.photo-hero .tag,.photo-hero .chip{border-color:#E6E1D8;color:#333} .photo-hero .pill b,.photo-hero .tag b{color:#A34D00} /* กล่องเข้ม 2 อันในหน้าเกี่ยวกับเรา — ใช้ดำเทา #333333 ของชุดสี */ .chain,.closing{background:#333 !important;color:#fff !important} .chain a,.closing a{color:#A34D00} /* ซากเมนูเดิม */ header.nav,nav.mobile-nav{display:none !important} /* พื้นหลังหน้าให้เป็นขาวเสมอ (ไฟล์นี้โหลดท้ายสุดจึงชนะ style ในหน้า) */ body{background:#fff;color:#333} /* ปุ่มแอดมิน (โผล่เฉพาะบัญชีแอดมิน) */ .sp-acts .admin{background:#fff;color:var(--sp-ink);border:1px solid #EBD9BC; box-shadow:0 1px 2px rgba(120,80,20,.08)} @media (max-width:620px){.sp-acts .admin{display:none}} /* ---------- หน้าในระบบ Academy ให้เข้าชุดเดียวกัน ---------- */ .hero-a{background:#fff !important;color:#333 !important; background-image:radial-gradient(820px 320px at 92% -22%,rgba(255,138,0,.14),transparent 62%) !important; border-bottom:1px solid #E6E1D8} .hero-a .mono{color:#A34D00 !important} .hero-a h1{color:#333} .hero-a p{color:#5F5F5F} .hero-a .pts span{color:#5F5F5F} .hero-a .pts b{color:#333} .btn{background:#FF8A00;color:#333} .btn.dark{background:#333;color:#fff} .chip.on{background:#FF8A00 !important;color:#333 !important;border-color:#A34D00 !important} .cimg{background:linear-gradient(135deg,#FF7A00,#FFA328)} .cbtn{background:#FF8A00;color:#333} footer.ac{background:#333;color:#C9C9C9} footer.ac a:hover{color:#A34D00} /* ตัวเล่นวิดีโอยังเป็นพื้นดำ เพราะภาพในคลิปต้องเด่นกว่าพื้น */ /* ========================================================== อ่านออกทุกจุด — ซากสีตัวหนังสือจากธีมมืด (#F1EEE6 / rgba(241,238,230,…)) ที่ตอนนี้ไปวางอยู่บนพื้นขาว จึงจางจนแทบมองไม่เห็น ทุกค่าด้านล่างวัดคอนทราสต์ตามเกณฑ์ WCAG 2.1 AA แล้ว (พื้นเข้มจริง ๆ เช่น footer, .a-cta, .mail-toast, .chain, .closing ไม่แตะ) ========================================================== */ .photo-hero p.sub,.a-hero p.sub,.c-hero p.sub,.t-hero p.sub, .list-hero p.sub,.svc-head p.sub{color:#5F5F5F !important} /* เส้นทางนำทางเล็ก ๆ ใต้หัวเรื่อง */ .crumb{color:#6B6B6B !important} .crumb a{color:#A34D00 !important} .crumb a:hover{color:#7A3A00 !important} /* ชิปข้อมูลในหัวเรื่อง (ตัวที่ถูกเลือก .on ยังเป็นพื้นเข้ม จึงเว้นไว้) */ .chip:not(.on){border-color:#E6E1D8 !important;color:#333 !important} .chip:not(.on) b{color:#A34D00 !important} /* .mini-chips อยู่ในการ์ดพื้นดำ .course-hero จึงห้ามเปลี่ยนเป็นสีเข้ม */ /* ราคาคอร์ส */ .c-hero .c-price{color:#333 !important} .c-hero .c-vatline{color:#5F5F5F !important} .c-hero .c-vatline b{color:#A34D00 !important} /* ป้ายวิทยากร / แถบข้อมูล */ .t-hero .role{color:#5F5F5F !important} .t-hero .role b{color:#333 !important} /* ส้มแบรนด์ #FF8A00 คอนทราสต์บนขาวแค่ 2.36:1 — ใช้เป็นสีพื้นได้ แต่เป็นตัวหนังสือไม่ได้ */ .photo-hero b,.a-hero b,.c-hero b,.t-hero b,.list-hero b,.svc-head b{color:#A34D00} /* ป้ายวุฒิวิทยากร — เดิมเป็นกล่องบนพื้นดำ ตอนนี้อยู่บนขาว */ .badge{border-color:#E6E1D8 !important;background:#FAF7F2 !important} .badge b{color:#333 !important} .badge span{color:#A34D00 !important} .badge small{color:#5F5F5F !important} /* ชิป "Online Course" บนหัวคอร์ส */ .c-chip{color:#A34D00 !important;border-color:#E6E1D8 !important} /* ป้ายชื่อบทความ/หัวข้อในหน้าลิสต์ */ .list-hero .mono,.a-hero .mono{color:#A34D00 !important} /* ========================================================== หัวข้อประจำหมวด (.sec-label) ของเดิมเป็นตัวมอโนสเปซ 0.7rem สีเทา อ่านผ่าน ๆ แล้วสายตาไม่หยุด ของใหม่แยกเป็นสองชั้น: ป้ายอังกฤษเล็กสีส้ม + หัวเรื่องไทยตัวใหญ่สีดำ ไฟล์นี้โหลดท้ายสุด จึงชนะ .sec-label ที่นิยามไว้ในแต่ละหน้า ========================================================== */ .sec-label{ display:block;margin:3.6rem 0 1.5rem;padding:0; font-family:'Prompt',system-ui,sans-serif;font-weight:500; letter-spacing:normal;text-transform:none;color:#333;font-size:1rem} .sec-label::before{ content:"";display:block;width:40px;height:3px;border-radius:2px; background:#FF8A00;margin-bottom:.9rem} .sec-label i{ display:block;font-style:normal; font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500; font-size:.64rem;letter-spacing:.22em;text-transform:uppercase; color:#A34D00;margin-bottom:.4rem} /* 5.80:1 บนขาว */ .sec-label b{ display:block;font-weight:500; font-size:clamp(1.45rem,2.7vw,2rem);line-height:1.4; color:#333;letter-spacing:-.005em} /* 12.63:1 บนขาว */ /* ป้ายแรกของหน้าไม่ต้องเว้นบนเยอะ */ .page-body>.sec-label:first-child,.wrap>.sec-label:first-child{margin-top:1.8rem} @media (max-width:640px){ .sec-label{margin:2.6rem 0 1.1rem} .sec-label::before{width:32px;margin-bottom:.7rem} } /* ---------- ช่องทางติดตาม (ท้ายเว็บทุกหน้า) ---------- ท้ายเว็บมีสองธีม (พื้นขาวที่หน้าแรก / พื้นเข้มที่หน้าอื่น) จึงไม่กำหนดสีตัวหนังสือเอง ปล่อยให้รับสีจาก footer ที่ตรวจคอนทราสต์ไว้แล้ว และไม่ลด opacity ของตัวหนังสือ เพราะจะทำให้ค่าคอนทราสต์ตกจาก 4.99:1 เหลือราว 3.5:1 ซึ่งไม่ผ่าน AA ความ "เบา" ของปุ่มใช้พื้นเทาจาง ๆ แทน สีจริงของแต่ละแพลตฟอร์มโผล่ตอนเอาเมาส์ชี้ */ .sp-social{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.2rem} .sp-social .sp-so-lb{font-size:.82rem;color:inherit;margin-right:.2rem} .sp-social .sp-so-b{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none; background:rgba(127,127,127,.10);border:1px solid transparent;border-radius:999px; padding:.36rem .9rem .36rem .75rem;font-size:.82rem;font-weight:600;color:inherit; transition:background .16s,color .16s,transform .16s} .sp-social .sp-so-b svg{width:16px;height:16px;flex:none} .sp-social .sp-so-b:hover{color:#fff;transform:translateY(-1px)} .sp-social .sp-so-fb:hover{background:#1877F2} .sp-social .sp-so-yt:hover{background:#C4302B} .sp-social .sp-so-tt:hover{background:#111} .sp-social .sp-so-b:focus-visible{outline:2px solid currentColor;outline-offset:2px} @media (max-width:520px){ .sp-social{gap:.4rem} .sp-social .sp-so-lb{width:100%;margin-bottom:.15rem} .sp-social .sp-so-b{padding:.36rem .75rem} } /* ---------- ขนาดตัวอักษรขั้นต่ำสำหรับข้อความภาษาไทย ---------- ภาษาไทยมีสระบน สระล่าง และวรรณยุกต์ซ้อนกันได้ถึงสามชั้นในหนึ่งบรรทัด ที่ขนาดต่ำกว่า 11px สระอิ อี ือ กับไม้เอก-ไม้โท เริ่มเกยกันจนแยกไม่ออกบนมือถือ ป้ายกำกับหลายจุดถูกตั้งไว้ที่ 9.3–10.9px ตามธรรมเนียมของตัวอักษรโรมันตัวพิมพ์ใหญ่ ซึ่งใช้กับไทยไม่ได้ จึงยกพื้นขึ้นเป็น 11.5px เฉพาะจุดที่มีข้อความไทยจริง ใช้ !important เพราะบางหน้าประกาศทับไว้ใน