/* ===========================================================================
แถบหัวข้อ SPU — ใช้กับ Container ของ Elementor
วิธีใช้:
1. เลือก Container ใน Elementor
2. Advanced -> CSS Classes -> ใส่ spu-band
3. ใส่ Heading widget ข้างใน พิมพ์หัวข้อได้เลย
เปลี่ยนสีเป็นแบบอื่น: ใส่ class เพิ่มอีกอัน
spu-band spu-band--violet ไล่เป็นม่วง
spu-band spu-band--blue ไล่เป็นน้ำเงิน
ทำให้คำใดคำหนึ่งเป็นสีชมพู: ในช่องข้อความของ Heading พิมพ์
WHY? SPU
=========================================================================== */
.spu-band {
--band-l: #e6007e; /* ชมพูสว่าง ฝั่งซ้าย + สีคำที่เน้น + ปุ่มวงกลม */
--band-m: #c40b6c; /* ชมพูกลาง */
--band-d: #6b1044; /* ชมพูเข้ม ฝั่งขวา */
--band-bg: #222226; /* พื้นหลังของแถบ */
--band-h: 76px; /* ความสูงขั้นต่ำ */
--band-max: 1500px; /* ขอบขวาของรูปทรงชมพู = ขอบขวาของเนื้อหา (จอใหญ่ไม่ยืดไปขวา) — ขอบซ้ายชิดขอบจอเสมอ */
--band-curve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L30,0 C50,34 40,62 60,100 L0,100 Z' fill='%23fff'/%3E%3C/svg%3E");
position: relative;
isolation: isolate;
min-height: var(--band-h);
background-color: var(--band-bg);
}
/* รูปทรงชมพู — ไล่สี ตัดขอบด้วยเส้นโค้ง แล้วละลายหายทางขวา
mask 2 ชั้น: ชั้นแรกกำหนดรูปทรง ชั้นสองกำหนดความทึบ */
.spu-band::before {
--fade-from: 50%;
--fade-to: 100%;
content: "";
position: absolute;
/* ซ้ายชิดขอบจอ (จอกว้างกว่า --band-max เคยเว้นช่องว่างทางซ้าย 29 ต.ค.) ขวาจบที่ขอบเนื้อหา */
inset: 0 max(0px, calc((100% - var(--band-max)) / 2)) 0 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg,
var(--band-l) 0%,
var(--band-m) 42%,
var(--band-d) 100%);
-webkit-mask:
var(--band-curve) center / 100% 100% no-repeat,
linear-gradient(90deg, #000 0%, #000 var(--fade-from), transparent var(--fade-to));
-webkit-mask-composite: source-in;
mask:
var(--band-curve) center / 100% 100% no-repeat,
linear-gradient(90deg, #000 0%, #000 var(--fade-from), transparent var(--fade-to));
mask-composite: intersect;
}
/* เส้นบางใต้แถบ (ตามแบบ) — อยู่ในความกว้างเนื้อหาเหมือนรูปทรงชมพู
ไม่อยากได้เส้น: ใส่ class เพิ่ม spu-band--noline */
.spu-band::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: max(0px, calc((100% - var(--band-max)) / 2));
height: 2px;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg, var(--band-l) 0%, var(--band-m) 45%, rgb(255 255 255 / .18) 100%);
}
.spu-band--noline::after,
.spu-band--solid::after { display: none; }
/* ให้ของที่อยู่ข้างใน Container ลอยเหนือรูปทรงชมพู */
.spu-band > * { position: relative; z-index: 1; }
/* ---- ตัวอักษรข้างใน ---------------------------------------------------- */
.spu-band .elementor-heading-title,
.spu-band h1, .spu-band h2, .spu-band h3 {
color: #fff;
font-weight: 800;
letter-spacing: .01em;
text-transform: none; /* ตามแบบ: SPU Update / WHY? SPU / Ranking — พิมพ์ตัวพิมพ์ใหญ่เล็กเองได้ */
margin: 0;
}
/* คำที่อยู่ใน เปลี่ยนเป็นสีชมพู — พิมพ์ใน Elementor ได้เลย */
.spu-band em,
.spu-band .spu-hl {
color: var(--band-l);
font-style: normal;
font-weight: inherit;
}
/* ---- ปุ่มวงกลมลูกศร ---------------------------------------------------- */
/* ใช้กับ Button หรือ Icon widget โดยใส่ class spu-band-btn */
.spu-band .spu-band-btn .elementor-button,
.spu-band .spu-band-btn a,
a.spu-band-btn {
width: 30px;
height: 30px;
min-width: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--band-l);
color: #fff;
font-size: 13px;
line-height: 1;
display: inline-grid;
place-items: center;
text-decoration: none;
vertical-align: middle; /* อยู่กลางตัวหนังสือ ไม่ว่าหัวข้อจะใหญ่แค่ไหน */
margin-left: .25em;
position: relative;
top: -.08em;
}
.spu-band .spu-band-btn .elementor-button:hover,
a.spu-band-btn:hover { filter: brightness(1.12); }
/* ---- สีแบบอื่น --------------------------------------------------------- */
.spu-band--violet {
background: linear-gradient(90deg, #c11794 0%, #9a2fb4 55%, #6f3fd0 100%);
}
.spu-band--blue {
--band-l: #1877c9;
--band-m: #145ea3;
--band-d: #0a3560;
}
/* ชมพูทึบเต็มแถบ (SPU HUB) — คำใน เป็นสีเข้ม ปุ่มวงกลมเข้ม
ใช้: spu-band spu-band--solid หัวข้อ: SPU HUB */
.spu-band--solid {
--band-bg: #ff0080;
--band-h: 132px;
--band-ink: #2b2b2b;
}
.spu-band--solid::before { display: none; }
.spu-band--solid em,
.spu-band--solid .spu-hl { color: var(--band-ink); }
.spu-band--solid .spu-band-btn .elementor-button,
.spu-band--solid .spu-band-btn a,
.spu-band--solid a.spu-band-btn { background: var(--band-ink); }
/* ---- จอเล็ก ------------------------------------------------------------ */
@media (max-width: 600px) {
.spu-band { --band-h: 56px; }
.spu-band--solid { --band-h: 72px; }
/* แบบ mobile: ไม่มีโค้งชมพู เหลือหัวข้อชิดขวา + ปุ่มวงกลม */
.spu-band:not(.spu-band--solid)::before,
.spu-band:not(.spu-band--solid)::after { display: none; }
.spu-band .elementor-heading-title,
.spu-band h2 { font-size: 20px; }
}
/* ---- ทดลอง: แถบ WHY? SPU เป็นขบวนรถไฟฟ้า (2 พ.ย. 2026) --------------- */
/* img/band-train.svg รถ 5 ตู้วาดตามแบบผู้ใช้ (1121×69) วิ่งบนเส้นใต้แถบ · ลบบล็อกนี้ = กลับเป็นโค้งชมพูเดิม · --train-gap = ระยะกันที่ให้หัวข้อฝั่งขวา */
.elementor-element-76f4fa7.spu-band { --train-gap: 390px; --train-from: -180px; --train-to: 80px; }
/* รถไฟอยู่ที่ .e-con-inner::before เพราะ ::before ของแถบคือโค้งชมพู · static ให้ตำแหน่งอิงทั้งแถบ ไม่ใช่กรอบเนื้อหา */
.elementor-element-76f4fa7.spu-band > .e-con-inner { position: static; }
.elementor-element-76f4fa7.spu-band > .e-con-inner > .elementor-widget { z-index: 1; }
.elementor-element-76f4fa7.spu-band > .e-con-inner::before {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
inset: 0 calc(max(0px, (100% - var(--band-max)) / 2) + var(--train-gap)) 2px 0;
transform: translate3d(var(--train-x, 0px), 0, 0); /* spu-hub.js ขยับตามการเลื่อนหน้า */
will-change: transform;
background: url("img/band-train.svg") right bottom / auto 50px no-repeat;
}
@media (max-width: 600px) {
.elementor-element-76f4fa7.spu-band { --train-gap: 170px; --train-from: -120px; --train-to: 0px; }
.elementor-element-76f4fa7.spu-band > .e-con-inner::before { background-size: auto 36px; }
}
/* ---- Safari เก่ากว่า 15.4 ไม่รองรับ mask-composite -------------------- */
/* ถ้าไม่รองรับ ให้ใช้เส้นโค้งอย่างเดียว ไม่มีการละลาย (ยังใช้งานได้ ไม่พัง) */
@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
.spu-band::before {
-webkit-mask: var(--band-curve) center / 100% 100% no-repeat;
mask: var(--band-curve) center / 100% 100% no-repeat;
background: linear-gradient(90deg,
var(--band-l) 0%,
var(--band-m) 42%,
rgb(107 16 68 / 0) 100%);
}
}
/* ---- ปุ่มวงกลมลูกศร (แก้) ---------------------------------------------- */
/* ลูกศรเดิมเป็นตัวอักษร "▸" ซึ่งรับขนาดฟอนต์ของหัวข้อ (56px) มาด้วย เลยเยื้องไปมุมขวาล่าง
วาดสามเหลี่ยมด้วย CSS แทน — อยู่กลางวงกลมเสมอ ไม่ขึ้นกับขนาดหัวข้อ */
.spu-band a.spu-band-btn,
.spu-band .spu-band-btn a {
--btn: 34px;
position: relative;
top: -4px;
margin-left: 14px !important; /* em ใช้ไม่ได้ เพราะตั้ง font-size 0 */
display: inline-block;
width: var(--btn);
height: var(--btn);
min-width: 0;
padding: 0;
border-radius: 50%;
background: var(--band-l);
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
vertical-align: middle;
overflow: hidden;
}
.spu-band a.spu-band-btn::after,
.spu-band .spu-band-btn a::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
/* สามเหลี่ยมดูเหมือนเยื้องซ้าย ต้องดันไปขวานิดหนึ่ง (optical center) */
transform: translate(-38%, -50%);
border-style: solid;
border-width: calc(var(--btn) * .22) 0 calc(var(--btn) * .22) calc(var(--btn) * .34);
border-color: transparent transparent transparent #fff;
}
.spu-band--solid a.spu-band-btn,
.spu-band--solid .spu-band-btn a { background: var(--band-ink); }
@media (max-width: 600px) {
.spu-band a.spu-band-btn,
.spu-band .spu-band-btn a { --btn: 26px; }
}