/*
Theme Name: MU Amnat Charoen (Kadence Child)
Theme URI: https://am.mahidol.ac.th
Description: ธีมลูกของ Kadence สำหรับโครงการจัดตั้งวิทยาเขตอำนาจเจริญ มหาวิทยาลัยมหิดล
ระบบสีและตัวอักษรอ้างอิงค่าที่วัดจริงจาก muit.mahidol.ac.th
Author: โครงการจัดตั้งวิทยาเขตอำนาจเจริญ
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
------------------------------------------------------------------------
สารบัญ — เลขไม่เรียงตามตำแหน่งจริงในไฟล์ (เพิ่มทีหลังบางส่วน) ใช้ Ctrl+F
หาเลข "N. " (มีจุด+เว้นวรรค) เพื่อกระโดดไปยังหัวข้อนั้นได้เลย
------------------------------------------------------------------------
1. ตัวแปรสี (:root) — สีทั้งเว็บแก้ที่นี่ที่เดียว
1b. เขียนทับจานสีของ Kadence ให้ตรงกับตัวแปรใน 1.
2. ฟอนต์ — self-host Noto Sans Thai ไม่พึ่ง Google Fonts
3. ตัวอักษร — ขนาด/ระยะบรรทัดพื้นฐานของเนื้อหา
4. ลิงก์ — สี/ขีดเส้นใต้ตอน hover
5. แถบบนสุด (Above Header) — พื้นน้ำเงินเข้ม เมนูรอง/ภาษา
6. แถบหลัก (Main Header) — โลโก้ + เมนูหลัก พื้นขาว
7. หัวข้อส่วน — เส้นเหลืองสั้นนำหน้าหัวข้อแต่ละ section
8. พื้นหลังส่วนสลับ และการ์ด (เช่น การ์ดข่าว/ประกาศ)
9. ป้ายเน้นสีเหลือง (badge/tag)
10. ท้ายเว็บ (Footer) + icon โซเชียลอัตโนมัติ (FB/YT/Line/IG/X/TikTok)
11. ลิงก์ข้าม navigation (skip link) — คู่กับ WCAG hook ใน functions.php
12. สั่งพิมพ์ (@media print) — ตัดส่วนที่ไม่จำเป็นออกตอนพิมพ์หน้าเว็บ
13. หน้าแรก — ส่วนประกอบเฉพาะหน้า (การ์ดข่าว 4 หมวด, เพิ่มเติม » ฯลฯ)
14. การ์ดบุคลากร — ใช้กับหน้าอาจารย์/บุคลากรสายสนับสนุน
15. แก้ LayerSlider ลอยทับเมนู dropdown ของ header
16. ปุ่มลอย (Facebook Messenger + กลับด้านบน) — ตำแหน่ง/ระยะห่างจากขอบจอ
17. แถบข้อมูลด้านบนสุด (Top Bar) — กริดคอลัมน์ คู่กับ widget ใน functions.php
------------------------------------------------------------------------
ไฟล์คู่กันที่ควรรู้จัก: functions.php ในโฟลเดอร์เดียวกัน — ทุกอย่างที่เป็น
"พฤติกรรม/ข้อมูล" (PHP hooks, เช่น ตัว widget ของ Top Bar, ตัวกรองรูป,
cookie banner) อยู่ที่นั่น ส่วนไฟล์นี้ (style.css) คุมแค่ "หน้าตา" (สี ระยะ
ห่าง ฟอนต์ เลย์เอาต์) เท่านั้น สองไฟล์นี้คือหัวใจหลักของการปรับแต่งเว็บทั้งเว็บ
------------------------------------------------------------------------
*/
/* ==========================================================================
1. ตัวแปรสี — แก้ที่นี่ที่เดียว ทั้งเว็บเปลี่ยนตาม
ค่าทั้งหมดวัดจาก computed style ของ muit.mahidol.ac.th เมื่อ 27 ก.ค. 2569
========================================================================== */
:root {
--mu-blue: #1d4f91; /* น้ำเงินหลัก คอนทราสต์บนขาว 8.2:1 ผ่าน AAA */
--mu-blue-dark: #17468c; /* แถบบนสุด 9.2:1 ผ่าน AAA */
--mu-blue-link: #045cb4; /* ลิงก์ hover 6.6:1 ผ่าน AA */
--mu-yellow: #ffc122; /* เน้น — 1.6:1 ห้ามใช้เป็นสีตัวอักษรบนพื้นขาว */
--mu-slate: #2d4156; /* พื้นเข้มรอง / ตัวอักษรเข้ม 10.5:1 */
--mu-text: #334155; /* ตัวอักษรเนื้อหา 10.3:1 ผ่าน AAA */
--mu-bg-soft: #f0f4f7; /* พื้นหลังส่วนสลับ */
--mu-bg-card: #eaeff2; /* พื้นการ์ด / ตาราง */
--mu-border: #dbe4ee; /* เส้นขอบ */
--mu-white: #ffffff; /* พื้นหลังหลักของเว็บ */
--mu-font: "Noto Sans Thai", "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
/* ระยะบรรทัด — ภาษาไทยต้องการมากกว่าอังกฤษ เพราะมีสระบนล่างและวรรณยุกต์
1.45 คือค่าต่ำสุดที่ยังไม่ชนบรรทัดบน (muit ใช้ค่านี้จริง) */
--mu-lh-tight: 1.45;
--mu-lh-body: 1.65;
--mu-lh-head: 1.35;
}
/* ==========================================================================
1b. เขียนทับจานสีของ Kadence
Kadence ใช้ตัวแปร --global-palette1 ถึง 9 ทั่วทั้งธีม
กำหนดทับที่นี่แล้วทุกส่วนเปลี่ยนตาม ปุ่ม ลิงก์ หัวข้อ พื้นหลัง เมนู
ข้อดีคือค่าอยู่ในธีมลูก ติดไปกับไฟล์ ไม่ต้องมาตั้ง Customizer ใหม่ทุกครั้ง
ถ้าจะปรับสีตอนท้าย แก้แค่บล็อกนี้บล็อกเดียว
========================================================================== */
:root {
--global-palette1: #1d4f91; /* สีหลัก ลิงก์ ปุ่ม */
--global-palette2: #17468c; /* สีหลักเข้มขึ้น สำหรับ hover */
--global-palette3: #1d4f91; /* หัวข้อ — muit ใช้น้ำเงินกับหัวข้อ ไม่ใช่ดำ */
--global-palette4: #2d4156; /* หัวข้อรอง */
--global-palette5: #334155; /* ตัวอักษรเนื้อหา */
--global-palette6: #64748b; /* ข้อความรอง คำอธิบาย */
--global-palette7: #eaeff2; /* พื้นการ์ด เส้นคั่น */
--global-palette8: #f0f4f7; /* พื้นหลังส่วนสลับ */
--global-palette9: #ffffff; /* ขาว พื้นหลังหลัก */
--global-palette-highlight: #045cb4;
--global-palette-highlight-alt: #17468c;
--global-palette-btn: #ffffff;
--global-palette-btn-bg: #1d4f91;
--global-palette-btn-hover: #ffffff;
--global-palette-btn-bg-hover: #17468c;
--global-body-font-family: var(--mu-font);
--global-heading-font-family: var(--mu-font);
}
/* ==========================================================================
2. ฟอนต์ — self-host ไม่ดึงจาก Google Fonts
เหตุผล: เว็บหน่วยงานรัฐมี PDPA และเว็บนี้มี cookie consent อยู่แล้ว
การเรียก fonts.gstatic.com คือส่ง IP ผู้ใช้ออกไปก่อนได้รับความยินยอม
ไฟล์ที่ใช้: fonts/NotoSansThai-Variable.woff2 ขนาด 29 KB
เป็น variable font ไฟล์เดียวครอบคลุมน้ำหนัก 400 ถึง 700 แบบต่อเนื่อง
จึงเลือกน้ำหนักได้อิสระ เช่น 550 หรือ 620 ไม่ได้ติดแค่ค่ามาตรฐาน
ไฟล์นี้เตรียมไว้ให้แล้ว โดยนำ NotoSansThai-VariableFont_wdth,wght.ttf จาก Google Fonts มา
1. ตรึงแกนความกว้าง (wdth) ไว้ที่ 100 เพราะเว็บนี้ไม่ใช้ตัวอักษรแบบแคบ
2. จำกัดแกนน้ำหนัก (wght) เหลือ 400-700 เท่าที่ใช้จริง
3. ตัดอักขระเหลือเฉพาะไทย ละติน และเครื่องหมายวรรคตอนที่จำเป็น (278 ตัว)
ผลคือจาก 92 KB เหลือ 29 KB
⚠️ อย่าใช้ไฟล์ที่แปลงจาก Transfonter แทน
Transfonter จะแปลง variable font ให้เหลือน้ำหนักเดียว (static 400)
แต่ตั้งชื่อไฟล์ว่า Regular เหมือนกัน ถ้าเอามาใช้กับ font-weight เป็นช่วง
หัวข้อจะหนาเท่าเนื้อหาเป๊ะทั้งเว็บ โดยไม่มี error อะไรให้เห็น
========================================================================== */
@font-face {
font-family: "Noto Sans Thai";
src: url("fonts/NotoSansThai-Variable.woff2") format("woff2");
/* ช่วงน้ำหนักที่ไฟล์นี้รองรับจริง เบราว์เซอร์ดึงค่าที่ต้องการจากไฟล์เดียว */
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
3. ตัวอักษร
muit ใช้หัวข้อใหญ่สุดแค่ 26px น้ำหนัก 500 — ไม่ใช่ 42px/700 ตามที่เคยเข้าใจ
สเกลด้านล่างเด่นกว่า muit เล็กน้อย เพราะ am เป็นเว็บวิทยาเขต ไม่ใช่พอร์ทัลบริการล้วน
========================================================================== */
body,
button,
input,
select,
textarea {
font-family: var(--mu-font);
font-size: 16px;
font-weight: 400;
line-height: var(--mu-lh-body);
color: var(--mu-text);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--mu-font);
font-weight: 500; /* 500 อ่านง่ายกว่า 700 ในภาษาไทย หัวอักษรกลมจะตันเมื่อหนาเกิน */
line-height: var(--mu-lh-head);
color: var(--mu-blue); /* muit ใช้สีน้ำเงินกับหัวข้อ ไม่ใช่สีดำ */
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; color: var(--mu-slate); }
h5 { font-size: 16px; color: var(--mu-slate); }
h6 { font-size: 15px; color: var(--mu-slate); }
@media (max-width: 767px) {
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
}
/* เมนู ตาราง และรายการที่อัดแน่น ใช้ระยะบรรทัดแคบกว่าเนื้อหาได้ แต่ห้ามต่ำกว่า 1.45 */
.site-header,
.menu,
table,
.wp-block-table {
line-height: var(--mu-lh-tight);
}
/* ==========================================================================
4. ลิงก์
========================================================================== */
a {
color: var(--mu-blue);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
a:hover,
a:focus {
color: var(--mu-blue-link);
}
/* focus ring ต้องมองเห็นชัด — เกณฑ์ WCAG 2.1 ข้อ 2.4.7 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--mu-blue-link);
outline-offset: 2px;
}
/* ==========================================================================
5. แถบบนสุด (Above Header) — พื้นน้ำเงินเข้ม
========================================================================== */
.site-top-header-wrap {
background-color: var(--mu-blue-dark);
}
.site-top-header-wrap,
.site-top-header-wrap a {
color: var(--mu-white);
font-size: 15px;
}
.site-top-header-wrap a:hover {
color: var(--mu-yellow); /* เหลืองบนพื้นน้ำเงินเข้ม คอนทราสต์สูง ใช้ได้ */
}
/* ==========================================================================
6. แถบหลัก (Main Header) — พื้นขาว มีเส้นเหลืองคั่นด้านล่าง
========================================================================== */
.site-main-header-wrap {
background-color: var(--mu-white);
border-bottom: 3px solid var(--mu-yellow);
}
/* ==========================================================================
7. หัวข้อส่วน — แถบเหลืองสั้นนำหน้า
ใช้กับ heading ที่ใส่ class ว่า mu-section-title
========================================================================== */
.mu-section-title {
display: flex;
align-items: center;
gap: 12px;
}
.mu-section-title::before {
content: "";
display: block;
flex: 0 0 auto;
width: 5px;
height: 1.1em;
background-color: var(--mu-yellow);
}
/* ==========================================================================
8. พื้นหลังส่วนสลับ และการ์ด
========================================================================== */
.mu-section-soft { background-color: var(--mu-bg-soft); }
.mu-section-card { background-color: var(--mu-bg-card); }
.mu-card {
background-color: var(--mu-white);
border: 1px solid var(--mu-border);
border-radius: 6px;
overflow: hidden;
}
/* ==========================================================================
9. ป้ายเน้นสีเหลือง
🔴 เหลือง #ffc122 บนพื้นขาวได้คอนทราสต์แค่ 1.6:1 ตกทุกเกณฑ์
ใช้เป็นพื้นเท่านั้น และตัวอักษรบนพื้นเหลืองต้องเป็นสีเข้ม (ที่นี่ได้ 12.8:1)
========================================================================== */
.mu-badge {
display: inline-block;
padding: 3px 12px;
border-radius: 3px;
background-color: var(--mu-yellow);
color: #412402;
font-size: 14px;
font-weight: 500;
}
/* ==========================================================================
10. ท้ายเว็บ
========================================================================== */
.site-footer-wrap {
background-color: var(--mu-blue);
color: var(--mu-white);
}
.site-footer-wrap a { color: var(--mu-white); }
.site-footer-wrap a:hover { color: var(--mu-yellow); }
.site-footer-wrap h1,
.site-footer-wrap h2,
.site-footer-wrap h3,
.site-footer-wrap h4 { color: var(--mu-yellow); }
/*
* Icon โซเชียลอัตโนมัติ — เช็คจาก URL ของลิงก์ (href) แล้วเติม icon ให้เอง
* ไม่ต้องเปลี่ยนวิธีพิมพ์ลิงก์ใน editor เลย พิมพ์/วางลิงก์แบบเดิมได้ตามปกติ
* ถ้ามีช่องทางโซเชียลเพิ่มในอนาคต เพิ่ม block ใหม่ตาม pattern ด้านล่างได้เลย
*/
.site-footer-wrap a[href*="facebook.com"]::before {
font-family: "Font Awesome 6 Brands";
font-weight: 400;
content: "\f39e";
margin-right: 6px;
}
.site-footer-wrap a[href*="youtube.com"]::before,
.site-footer-wrap a[href*="youtu.be"]::before {
font-family: "Font Awesome 6 Brands";
font-weight: 400;
content: "\f167";
margin-right: 6px;
}
.site-footer-wrap a[href*="line.me"]::before {
font-family: "Font Awesome 6 Brands";
font-weight: 400;
content: "\f3c0";
margin-right: 6px;
}
.site-footer-wrap a[href*="instagram.com"]::before {
font-family: "Font Awesome 6 Brands";
font-weight: 400;
content: "\f16d";
margin-right: 6px;
}
.site-footer-wrap a[href*="x.com"]::before,
.site-footer-wrap a[href*="twitter.com"]::before {
font-family: "Font Awesome 6 Brands";
font-weight: 400;
content: "\e61b";
margin-right: 6px;
}
.site-footer-wrap a[href*="tiktok.com"]::before {
font-family: "Font Awesome 6 Brands";
font-weight: 400;
content: "\e07b";
margin-right: 6px;
}
.site-bottom-footer-wrap {
background-color: var(--mu-blue-dark);
color: var(--mu-white);
font-size: 14px;
}
/* ==========================================================================
11. ลิงก์ข้าม navigation — จำเป็นตาม WCAG 2.1 ข้อ 2.4.1
========================================================================== */
.mu-skip-link {
position: absolute;
left: -9999px;
z-index: 999999;
padding: 12px 20px;
background-color: var(--mu-blue-dark);
color: var(--mu-white);
text-decoration: none;
}
.mu-skip-link:focus {
left: 8px;
top: 8px;
}
/* ==========================================================================
12. สั่งพิมพ์ — ตัดส่วนที่ไม่จำเป็นออก
========================================================================== */
@media print {
.site-header,
.site-footer-wrap,
.site-bottom-footer-wrap,
.mu-skip-link {
display: none !important;
}
body { font-size: 12pt; color: #000; }
a::after { content: " (" attr(href) ")"; font-size: 10pt; }
}
/* ==========================================================================
13. หน้าแรก — ส่วนประกอบเฉพาะหน้า
สร้างจาก block เปล่าของ WordPress core ล้วน (Cover, Columns, Query Loop)
คลาสพวกนี้แค่จัดสไตล์ผิว ไม่ผูกกับปลั๊กอินตัวไหน แก้ไฟล์นี้ไฟล์เดียวพอ
========================================================================== */
/* สไลด์หน้าแรก (Kadence Row Layout > Background Slider) — ทำให้ responsive เต็มรูปแบบทุกขนาดจอ
* ไม่ใช่แค่แก้เฉพาะช่วงมือถือ (ตั้งใจไม่ทำแบบ media-query แพตช์เป็นจุดๆ ตามที่ตกลงกัน)
*
* ปัญหาเดิม: Kadence ล็อก .kt-row-column-wrap ด้วย min-height:500px ตายตัว ไม่ผูกกับความกว้างจอเลย
* พอจอแคบ (เช่นมือถือ ~380px) อัตราส่วนกล่อง (380:500 ≈ แนวตั้ง) เพี้ยนไปจากภาพจริงมาก
* ซึ่งเป็นภาพแนวนอน (banner-1.png 1200x630 อัตราส่วน 1.9:1, banner-2.jpg 1536x634 อัตราส่วน 2.4:1)
* background-size:cover เลยต้องซูมภาพขึ้นมากเพื่อให้สูงครบ 500px ภาพกว้างล้นจอ ส่วนเกินถูกตัด
* ทิ้งซ้าย-ขวา ข้อความในภาพ (เช่น "...ตราบนิรันดร์") เลยโดนตัดหายไปตอนแสดงผลบนจอแคบ
*
* ทางแก้ถาวร: ใช้ aspect-ratio แทน fixed height บนตัวแถวเอง (ไม่ใช่แค่ colWrap) ความสูงจะ
* คำนวณตามความกว้างจอเสมอโดยอัตโนมัติ ไม่ต้องไล่ตั้งค่าความสูงแยกทีละ breakpoint อีกต่อไป
* เลือกอัตราส่วน 1200:630 (ของ banner-1.png) เป็นค่าอ้างอิงหลัก เพราะมีข้อความเต็มภาพ
* บอบบางต่อการถูกตัดมากกว่า banner-2.jpg ที่เป็นภาพประกอบล้วน โดนครอปขอบบ้างไม่กระทบการอ่าน
* ถ้าจะเปลี่ยนรูปแบนเนอร์ใหม่ในอนาคตแล้วอัตราส่วนต่างจากนี้มาก ควรกลับมาปรับเลขนี้ตาม */
.kb-row-layout-id6_1bab2d-ba {
aspect-ratio: 1200 / 630 !important;
height: auto !important;
}
/* ใช้ child combinator (>) ให้ specificity เท่ากฎของ Kadence และเติม padding-* ทับด้วย
* เพราะ CSS ของ Kadence ถูก output ทีหลัง child theme ถ้า specificity เท่ากันฝั่ง Kadence จะชนะ
* ผลเดิม: .kt-row-column-wrap ยังได้ min-height 500px ทำให้ aspect-ratio ด้านบนไม่มีผลบนมือถือ */
.kb-row-layout-id6_1bab2d-ba > .kt-row-column-wrap,
.kb-row-layout-id6_1bab2d-ba .kt-blocks-carousel {
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
height: 100% !important;
}
/* แถบลิงก์ด่วนใต้ header แทนแบนเนอร์ภาพกระจัดกระจายแบบเดิม */
.mu-quicklinks {
background-color: var(--mu-bg-soft);
border-bottom: 1px solid var(--mu-border);
}
.mu-quicklinks .wp-block-buttons {
justify-content: center;
gap: 8px 28px !important;
}
.mu-quicklinks .wp-block-button__link {
background: none !important;
color: var(--mu-blue) !important;
font-size: 14.5px;
padding: 4px 0 !important;
border-radius: 0 !important;
}
.mu-quicklinks .wp-block-button__link:hover {
color: var(--mu-blue-link) !important;
text-decoration: underline;
}
/* การ์ดหลักสูตร */
.mu-program-card {
background-color: var(--mu-white);
border: 1px solid var(--mu-border);
border-radius: 8px;
overflow: hidden;
transition: box-shadow .15s ease, transform .15s ease;
width: 100% !important; /* กันการ์ดแคบลอยเหลือพื้นที่ว่างข้างๆ ตอนคอลัมน์ยุบเหลือ 1 คอลัมน์บนมือถือ */
max-width: 100% !important;
}
.mu-program-card:hover {
box-shadow: 0 6px 20px rgba(29, 79, 145, .14);
transform: translateY(-2px);
}
.mu-program-card figure { margin: 0; width: 100% !important; }
/* บั๊กตัวจริงที่ทำให้รูปไม่เต็มความกว้าง: ที่ห่อรูปเป็น display:inline-block และไม่ได้กำหนดความกว้างไว้
* (shrink-to-fit ตามเนื้อหา) พอ img ข้างในตั้ง width:100% เบราว์เซอร์คำนวณ % ไม่ได้ (parent กว้างเท่าไหร่ก็ไม่รู้
* เพราะ parent เองก็ auto ตามเนื้อหา) เลย fallback ไปใช้ขนาดจริงของไฟล์รูปแทน (เห็นรูปเล็กจิ๋วชิดซ้าย)
* แก้โดยบังคับให้ เป็น block + width:100% เพื่อตัดปัญหาความกว้างวนลูปนี้ */
.mu-program-card figure a { display: block !important; width: 100% !important; }
.mu-program-card img { display: block !important; width: 100% !important; height: 190px !important; object-fit: cover !important; object-position: top !important; } /* ยึดครอปจากด้านบน กันหัวคนในรูปโดนตัด แทนที่จะครอปกึ่งกลาง */
.mu-program-card .wp-block-group__inner-container,
.mu-program-card > .wp-block-group { padding: 18px 20px 22px; }
.mu-program-card h3 { margin: 0 0 8px; font-size: 18px; }
/* รายการข่าวแบบกระชับ ใช้กับ Query Loop คอลัมน์ย่อย */
.mu-news-compact ul.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.mu-news-compact li.wp-block-post {
padding: 10px 0;
border-bottom: 1px solid var(--mu-border);
}
.mu-news-compact li.wp-block-post:last-child { border-bottom: none; }
.mu-news-compact .wp-block-post-title {
font-size: 15px;
font-weight: 400;
line-height: var(--mu-lh-tight);
margin: 0 0 4px;
}
.mu-news-compact .wp-block-post-title a { color: var(--mu-text); }
.mu-news-compact .wp-block-post-title a:hover { color: var(--mu-blue-link); }
.mu-news-compact .wp-block-post-date {
font-size: 12.5px;
color: var(--mu-blue);
font-weight: 500;
}
/* การ์ดข่าวหลัก (คอลัมน์ซ้าย) */
.mu-news-main li.wp-block-post {
background: var(--mu-white);
border: 1px solid var(--mu-border);
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}
.mu-news-main .wp-block-post-featured-image img {
display: block;
width: 100%;
height: 170px;
object-fit: cover;
}
.mu-news-main .wp-block-post-title,
.mu-news-main .wp-block-post-date,
.mu-news-main .wp-block-post-excerpt {
padding-left: 16px;
padding-right: 16px;
}
.mu-news-main .wp-block-post-title { font-size: 17px; margin: 12px 0 4px; }
.mu-news-main .wp-block-post-date { font-size: 13px; color: var(--mu-blue); font-weight: 500; }
.mu-news-main .wp-block-post-excerpt { font-size: 14px; margin-bottom: 14px; }
/* ป้ายหัวข้อคอลัมน์ข่าวย่อย */
.mu-news-subhead {
font-size: 15px !important;
color: var(--mu-white) !important;
background-color: var(--mu-blue);
display: inline-block;
padding: 5px 14px;
border-radius: 4px;
margin: 0 0 10px !important;
}
/* กริดภาพสถานที่ */
.mu-facility-item { position: relative; overflow: hidden; border-radius: 8px; }
.mu-facility-item img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform .2s ease; }
.mu-facility-item:hover img { transform: scale(1.05); }
.mu-facility-caption {
position: absolute;
left: 0; right: 0; bottom: 0;
background: linear-gradient(to top, rgba(23,70,140,.88), rgba(23,70,140,0));
color: var(--mu-white);
padding: 30px 14px 10px;
font-size: 15px;
font-weight: 500;
margin: 0;
}
/* แถบสถิติสั้น ๆ ใต้ hero */
.mu-stat-strip { background-color: var(--mu-blue); }
.mu-stat-strip .mu-stat-num {
color: var(--mu-yellow);
font-size: 30px;
font-weight: 500;
margin: 0;
line-height: 1.2;
}
.mu-stat-strip .mu-stat-label {
color: var(--mu-white);
font-size: 14px;
margin: 2px 0 0;
}
@media (max-width: 767px) {
.mu-program-card img { height: 240px !important; } /* เพิ่มจาก 150px กันหัวรูปโดนตัด ตอนนี้รูปเต็มความกว้างจอแล้ว */
.mu-facility-item img { height: 160px !important; }
.mu-stat-strip .mu-stat-num { font-size: 24px; }
/* กันคอลัมน์ที่ยุบเหลือ 1 อันแล้วยังเหลือพื้นที่ว่างข้างการ์ด (การ์ดหลักสูตร/สิ่งอำนวยความสะดวก) */
.wp-block-columns > .wp-block-column { width: 100% !important; flex-basis: 100% !important; }
/* ลดช่องว่าง (gap) ระหว่างการ์ดที่ซ้อนกันบนมือถือ ให้ดูเต็มจอ ไม่มีช่องว่างเยอะระหว่างการ์ด
* ค่า gap เดิม (32px) มาจาก layout gap อัตโนมัติของ WordPress/Kadence เวลาคอลัมน์ยุบเหลือคอลัมน์เดียว
* ใช้ :has() เจาะจงเฉพาะกลุ่มคอลัมน์ที่มีการ์ดหลักสูตร/สิ่งอำนวยความสะดวกอยู่ข้างใน ไม่กระทบคอลัมน์อื่นในเว็บ */
.wp-block-columns:has(.mu-program-card),
.wp-block-columns:has(.mu-facility-item) {
row-gap: 14px !important;
column-gap: 14px !important;
}
/* ลด padding บน-ล่างของ section ที่ครอบการ์ดพวกนี้ (ปกติ 56px) ให้กระชับขึ้นบนมือถือ */
.wp-block-group:has(> .wp-block-group__inner-container .mu-program-card),
.wp-block-group:has(> .wp-block-group__inner-container .mu-facility-item) {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
/* full-bleed: ให้การ์ด/รูปภาพชิดขอบจอมือถือทั้ง 2 ข้าง (ไม่มีระยะขอบซ้าย-ขวาเหมือนการ์ดทั่วไป)
* หมายเหตุ: รอบแรกใช้ margin-left: calc(50% - 50vw) แล้วไม่ได้ผล เพราะค่า % ใน margin
* คำนวณจากความกว้างของ "container แม่" ไม่ใช่ viewport ทำให้ระยะไม่พอ ต้องใช้เทคนิค
* position:relative + left/right:50% (อิง container แม่) ร่วมกับ margin:-50vw (อิง viewport ล้วนๆ)
* ผสมกันถึงจะดึงกล่องออกไปเท่าความกว้างจอจริงได้ ไม่ว่า container แม่จะมี padding เท่าไหร่ */
.wp-block-columns:has(.mu-program-card),
.wp-block-columns:has(.mu-facility-item) {
width: 100vw !important;
max-width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ตัดขอบโค้ง/เส้นขอบซ้าย-ขวาของการ์ดออกตอน full-bleed จะได้ดูเนียนชิดขอบจอ ไม่มีมุมโค้งลอยที่ริมจอ */
.mu-program-card,
.mu-facility-item {
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
}
/* ลดช่องว่างซ้าย-ขวาของคอนเทนเนอร์หลักบนมือถือ
* Kadence ตั้ง padding ซ้าย-ขวาของ .site-container เป็นค่าสัมพัทธ์ พอจอเหลือ 440px
* จะกลายเป็นข้างละ ~78px (17.7% ของจอ) คอลัมน์เนื้อหาเหลือแค่ 284px ทั้งหน้า
* ทำให้แบนเนอร์ การ์ดหลักสูตร และข้อความทั้งหมดถูกบีบเล็กเกินจำเป็น
* ล็อกเป็น 16px บนมือถือ คอลัมน์เนื้อหาจะกว้างขึ้นเป็น ~408px (แบนเนอร์ 268 -> ~376px)
* กฎนี้มีผลกับทุกหน้าบนมือถือ ถ้าปรับค่านี้ต้องไล่ดูหน้าอื่นประกอบด้วย */
.content-container.site-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* หมายเหตุ: เดิมเคยทำ full-bleed ให้แถวสไลด์หน้าแรกบนมือถือ (ดันภาพชนขอบจอ)
* แต่ยกเลิกแล้ว เพราะ iPad และเดสก์ท็อปแสดงแถวนี้อยู่ในกล่องขาว .entry-content-wrap
* การให้มือถือทะลุขอบจออยู่จอเดียวทำให้หน้าตาไม่สอดคล้องกันข้ามอุปกรณ์
* ปัจจุบันจึงปล่อยให้แถวนี้อยู่ในกรอบ content ตามปกติเหมือนทุกขนาดจอ
* ถ้าจะกลับมาทำ full-bleed อีกในอนาคต ใช้เทคนิคเดียวกับข้อ 13 ด้านบน
* (position:relative + left/right:50% + margin:-50vw) กับ class .kb-row-layout-id6_1bab2d-ba */
}
/* ==========================================================================
14. การ์ดบุคลากร — ใช้กับหน้าอาจารย์/บุคลากรสายสนับสนุน
========================================================================== */
.mu-staff-group-title {
background-color: var(--mu-bg-soft);
padding: 10px 18px;
border-left: 4px solid var(--mu-yellow);
margin: 40px 0 24px !important;
}
.mu-staff-group-title:first-child { margin-top: 0 !important; }
.mu-staff-card {
text-align: center;
}
.mu-staff-card img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--mu-border);
display: block;
}
.mu-staff-card .mu-staff-name {
font-size: 15px;
font-weight: 500;
color: var(--mu-slate);
margin: 10px 0 2px;
line-height: var(--mu-lh-tight);
}
.mu-staff-card .mu-staff-job {
font-size: 13px;
color: var(--mu-text);
margin: 0;
line-height: var(--mu-lh-tight);
}
/* ป้ายหัวข้อคอลัมน์ข่าวย่อยที่ทำเป็นลิงก์ได้ (เช่น "รับสมัครงาน" คลิกไปหน้าคลังหมวด)
ต้องแก้สี/ขีดเส้นใต้ทับ เพราะ a { color: var(--mu-blue); } ของ section 4 จะมาแทนที่
สีขาวที่ตั้งไว้ให้ h3.mu-news-subhead ปกติ (สีนั้นไม่ไหลลงไปถึง ลูกโดยอัตโนมัติ) */
.mu-news-subhead a {
color: inherit;
text-decoration: none;
}
/* ลิงก์ "เพิ่มเติม" ท้ายบล็อก Query Loop แต่ละหมวดในหน้าแรก */
.mu-more-link {
margin: 8px 0 4px !important;
font-size: 13.5px;
}
.mu-more-link a {
color: var(--mu-blue);
font-weight: 500;
text-decoration: none;
}
.mu-more-link a:hover {
color: var(--mu-blue-link);
text-decoration: underline;
}
/* ==========================================================================
16. ปุ่มลอย (Facebook Messenger + กลับด้านบน)
ขึ้นทุกหน้า มุมขวาล่าง ปุ่ม Messenger ต้องตั้งลิงก์ใน Customizer ก่อนถึงจะโชว์
========================================================================== */
.mu-floating-buttons {
position: fixed;
right: 20px;
bottom: 90px; /* เว้นระยะเหนือปุ่มเปลี่ยนภาษาลอยของ TranslatePress (มุมขวาล่างเหมือนกัน) ไม่ให้ซ้อนทับกัน */
z-index: 500; /* สูงกว่าเนื้อหาปกติ แต่ต่ำกว่า header (11 อยู่ใน local stacking context ของตัวเอง) และต่ำกว่า cookie banner ถ้ามี */
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.mu-float-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
transition: transform .15s ease, box-shadow .15s ease;
}
.mu-float-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 14px rgba(0, 0, 0, .3);
}
.mu-float-messenger {
background: linear-gradient(135deg, #00b2ff, #006aff);
color: var(--mu-white);
}
.mu-float-totop {
background-color: var(--mu-blue);
color: var(--mu-white);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
}
.mu-float-totop.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (max-width: 767px) {
.mu-floating-buttons {
right: 14px;
bottom: 78px;
}
.mu-float-btn {
width: 44px;
height: 44px;
}
}
/* ==========================================================================
17. แถบข้อมูลด้านบน (Top Bar) — ขึ้นทุกหน้าเหนือ header
ใส่เนื้อหาเองผ่าน Appearance > Widgets > แถบบน - คอลัมน์ 1-4 (เหมือน footer)
========================================================================== */
.mu-topbar {
background-color: var(--mu-blue, #14387a);
color: #fff;
font-size: 13.5px;
line-height: 1.6;
}
.mu-topbar-inner {
max-width: 1290px;
margin: 0 auto;
padding: 14px 20px;
display: grid;
grid-template-columns: repeat( var(--mu-topbar-cols, 4), 1fr );
gap: 20px;
}
.mu-topbar-cols-1 { --mu-topbar-cols: 1; }
.mu-topbar-cols-2 { --mu-topbar-cols: 2; }
.mu-topbar-cols-3 { --mu-topbar-cols: 3; }
.mu-topbar-cols-4 { --mu-topbar-cols: 4; }
.mu-topbar-col > *:last-child {
margin-bottom: 0;
}
.mu-topbar-widget-title {
font-size: 14px;
font-weight: 600;
margin: 0 0 6px;
color: #fff;
}
.mu-topbar-inner a {
color: #fff;
}
.mu-topbar-inner a:hover {
opacity: .85;
}
.mu-topbar-inner ul {
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 767px) {
.mu-topbar-inner {
grid-template-columns: 1fr;
padding: 12px 16px;
gap: 10px;
font-size: 12.5px;
text-align: left;
}
}
/* หน้ารายการข่าว/เอกสารทั่วไปที่ใช้ Query Loop เดี่ยว ๆ (ไม่ใช่หน้าแรก) */
.mu-list-page .wp-block-post-title { font-size: 17px; margin: 0 0 4px; }
.mu-list-page .wp-block-post-date { font-size: 13px; color: var(--mu-blue); font-weight: 500; margin-bottom: 4px; }
.mu-list-page li.wp-block-post {
padding: 16px 0;
border-bottom: 1px solid var(--mu-border);
}
.mu-list-page li.wp-block-post:last-child { border-bottom: none; }
.mu-list-page .wp-block-post-featured-image img { border-radius: 6px; }
/* ==========================================================================
15. แก้ LayerSlider ลอยทับเมนู dropdown ของ header
สาเหตุ: .ls-wp-container เป็น position:relative แต่ไม่มี z-index ของตัวเอง
จึงไม่สร้าง stacking context ใหม่ อีลิเมนต์ภายในสไลด์บางตัว (เช่นลิงก์คลิก
ทั้งสไลด์ .ls-link-on-top) ตั้ง z-index สูงมาก (999999) ค่านี้เลยหลุดออกไป
แข่งกับ z-index ของ header (.site-header ใช้ 11) โดยตรงแล้วชนะ ทำให้สไลด์
ลอยทับเมนู dropdown ที่ควรอยู่บนสุดเวลาเปิดเมนู เช่น "Academic Service"
วิธีแก้: ให้ .ls-wp-container สร้าง stacking context ของตัวเอง (ใส่ z-index
ต่ำ ๆ ก็พอ) ค่า z-index สูงลิ่วภายในกล่องนี้จะถูกจำกัดอยู่แค่ในกล่องเอง
ไม่หลุดไปแข่งกับ header อีกต่อไป
========================================================================== */
.ls-wp-container {
z-index: 1;
}
/* ==========================================================================
16. แก้การ์ด "หลักสูตรที่เปิดสอน" ตัวอักษรแตกเป็นแนวตั้งทีละตัว บน iPad
(เช่น iPad Air 11" M2 แนวตั้ง ~820px, iPad Pro 11" แนวตั้ง ~834px)
สาเหตุ: section นี้ใช้ WordPress core Columns block (3 คอลัมน์/แถว)
WordPress core มี breakpoint บังคับตายตัวว่า:
- viewport < 782px -> stack เป็นคอลัมน์เดียว (flex-basis: 100%)
- viewport >= 782px -> เรียง 3 คอลัมน์เคียงกันทันที (flex-wrap: nowrap)
แต่การ์ดพวกนี้ (รูป + ข้อความไทย + ปุ่ม) ถูกออกแบบให้พอดีคอลัมน์กว้าง
ระดับเดสก์ท็อป (>=1100px) เมื่อ viewport อยู่ในช่วง 782-1100px คอลัมน์เลย
ถูกบีบแคบเกินไป และเพราะ .wp-block-column ของ WordPress ตั้ง
min-width: 0 ไว้ คอลัมน์จึงบีบตัวต่อไปเรื่อย ๆ แทนที่จะขึ้นบรรทัดใหม่
ข้อความภาษาไทย (ไม่มีช่องว่างระหว่างคำให้ตัดบรรทัดง่ายแบบอังกฤษ) จึงถูก
ตัดทีละตัวอักษรจนอ่านไม่ได้
วิธีแก้: ขยายช่วง "stack เป็นคอลัมน์เดียว" ของ section นี้ออกไปจนถึง
1100px แทนที่จะหยุดแค่ 781px ตามค่า default ของ WordPress
========================================================================== */
@media (min-width: 782px) and (max-width: 1100px) {
.wp-block-columns:has(.mu-program-card) {
flex-wrap: wrap !important;
}
.wp-block-columns:has(.mu-program-card) > .wp-block-column {
flex-basis: 100% !important;
}
/* รูปการ์ดตอนนี้เต็มความกว้างจอแล้ว (เหมือนกรณีมือถือ <767px ด้านบน)
แต่การ์ดช่วงนี้กว้างกว่ามือถือมาก (620-827px เทียบกับมือถือ ~390px)
ถ้ายังใช้ความสูงคงที่ 240px เท่ามือถือ สัดส่วนที่เก็บไว้ด้านบนจะน้อยลง
หัวคนในรูปเลยยังโดนตัดอยู่บ้าง แก้โดยใช้ aspect-ratio แทนความสูงคงที่
ใช้อัตราส่วนเดียวกับที่มือถือ render จริง (390:240 = 13:8) ความสูงจะ
ขยายตามความกว้างเป็นสัดส่วนเดียวกับมือถือเป๊ะ ไม่ว่าการ์ดจะกว้างแค่ไหน */
.mu-program-card img {
height: auto !important;
aspect-ratio: 13 / 8 !important;
}
}