@charset "UTF-8";

.white {
	color: #333;
	background-color: #fff;
	margin: 0 auto 10px auto;
	border: 1px solid #f1f1f1;
	padding: 5px 10px;
}
.white:hover {
	color: #333;
	background-color: #f9f9f9;
}
.beige {
	color: #000;
	background-color: #e3e1df;
	margin: 0 auto 10px auto;
	padding: 5px 10px;
	border: 1px solid #fff;
}

.greys {
	color: #333;
	background-color: #fafafa;
	margin: 0 auto 5px auto;
	padding: 5px;
}
.greys:hover {
	color: #333;
	background-color: #ddd;
}

.blues {
	color: #f1f1f1;
	margin: 0 auto 10px auto;
	padding: 5px 10px;
    background: #006699;
    background: -moz-linear-gradient(45deg, #006699 0%, #3399cc 100%);
    background: -webkit-linear-gradient(45deg, #006699 0%,#3399cc 100%);
    background: linear-gradient(45deg, #006699 0%,#3399cc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#3399cc',GradientType=1 );
}

.greens {
	color: #f1f1f1;
	margin: 0 auto 10px auto;
	padding: 5px 10px;
	background: #669933;
    background: -moz-linear-gradient(45deg, #669933 0%, #66cc33 100%);
    background: -webkit-linear-gradient(45deg, #669933 0%,#66cc33 100%);
    background: linear-gradient(45deg, #669933 0%,#66cc33 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#669933', endColorstr='#66cc33',GradientType=1 );
}
.oranges {
	color: #f1f1f1;
	margin: 0 auto 10px auto;
	padding: 5px 10px;
	background: #ff7b26;
    background: -moz-linear-gradient(45deg, #ff7b26 0%, #ffc108 100%);
    background: -webkit-linear-gradient(45deg, #ff7b26 0%,#ffc108 100%);
    background: linear-gradient(45deg, #ff7b26 0%,#ffc108 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b26', endColorstr='#ffc108',GradientType=1 );
}

.reds {
	color: #f1f1f1;
	margin: 0 auto 10px auto;
	padding: 5px 10px;
	background: #f32328;
    background: -moz-linear-gradient(45deg, #f32328 0%, #fe583c 100%);
    background: -webkit-linear-gradient(45deg, #f32328 0%,#fe583c 100%);
    background: linear-gradient(45deg, #f32328 0%,#fe583c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f32328', endColorstr='#fe583c',GradientType=1 );}

.colors {
	color: #f1f1f1;
	margin: 0 auto 10px auto;
	padding: 5px 10px;
	border: 1px solid #d7d7d7;
	background: #ff7b26;
}
.reds h3::before,.oranges h3::before,.greens h3::before,.blues h3::before,.dark h3::before,.colors h3::before   {background-color:#fff !important;}

.dark {
	background-color: #444;
	margin: 0 auto 10px auto;
	color: #ddd;
	padding: 5px 10px;
}
.dark ul, .mcolor ul, .white ul {
	padding-left: 10px;
}

.dark a, .colors a { color: #ddd !important;}
#sp-header {
  height: auto;
}
#sp-header.header-sticky{ background-color: #fff;}
.sp-megamenu-parent {
    list-style: none;
    padding: 0;
    margin: 0 -15px;
    z-index: 99;
    display: block;
    float: right;
    position: relative;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  display: inline-block;
  padding: 0 15px;
  line-height: 40px;
  font-size: 16px;
  margin: 10px 1px;
  font-weight: 500;
  text-transform: uppercase;
}

#sp-right .sp-module {
  margin-top: 20px;
  padding: 5px;
}
#sp-main-body {
  padding: 20px 0;
}
#sp-tops {
    padding: 10px 0px;
}

 .newsletter-signup form, .sm-popup .newsletter-signup form {
 display:-webkit-flex;
 display:-moz-flex;
 display:-ms-flex;
 display:-o-flex;
 display:flex
}
 .newsletter-signup form input[type=text], .sm-popup .newsletter-signup form input[type=text]{
 border:none;
 border-radius:3px 0 0 3px;
 padding:10px 20px;
 height:46px
}
 .newsletter-signup form button[type=submit], .sm-popup .newsletter-signup form button[type=submit] {
 text-transform:uppercase;
 padding-left:18px;
 padding-right:18px;
 width:140px;
 height:46px;
 border:none;
 box-shadow:none;
 border-radius:0 3px 3px 0;
 -webkit-transition:.4s;
 transition:.4s
}

.button-wrap {
  z-index: 10000 !important;
}
.sppb-tab-modern-content {
  padding: 20px;
  margin-top: 0px !important;
  border: 1px solid #dcdcdc;
  background: #fff;
  -webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.06);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.06);
}
.tab .sppb-tab-modern-content:before,
.tab .sppb-tab-modern-content:after {
  content: " ";
  display: table;
}
.tab .sppb-tab-modern-content:after {
  clear: both;
}
.tab .sppb-tab-modern-content p:last-child {
  margin-bottom: 0;
}

#sppb-addon-1621786411235 ul.sppb-nav.sppb-nav-modern {
    text-align: center !important;
}
#sppb-addon-1621786411235 .sppb-nav-modern > li {
    float: none;
    margin-bottom: -1px;
    display: inline-block;
}
.sppb-addon-tab .sppb-nav > li.active > a {
  background-color: #fff;
  border: none;
  box-shadow: 0 -1px 2px 0 rgba(209, 209, 209, 0.5);
}
.sppb-addon-tab .sppb-nav > li > a {
  border: none;
  text-transform: uppercase;
  padding: 15px 30px;
  color: #828282;
  background-color: transparent;
}
.sppb-addon-tab .sppb-tab-content {
  background: #fff;
  margin: 0;
  padding: 20px;
  box-shadow: 0 1px 2px 0 rgba(209, 209, 209, 0.5);
}
.tab-features-list {
  list-style: none;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
}
.tab-features-list > li {
  display: flex;
  align-items: baseline;
}
.tab-features-list > li:not(:last-child) {
  margin-bottom: 20px;
}
.tab-features-list > li span {
  color: #4e7e5c;
  margin-right: 15px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a{
	line-height: 20px;
	display: block;
	cursor: pointer;
	padding: 8px;
	font-size: 16px;
	font-weight: 300;
}
#sp-header, .layout-boxed .body-innerwrapper {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.01);
}
.sp-megamenu-wrapper {
background-color: #fff;
padding: 0px 30px;
	box-shadow:0 1px 5px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 5px rgba(0,0,0,0.2);
	-webkit-box-shadow:0 1px 5px rgba(0,0,0,0.2);
	background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0.4), rgba(160,160,160,0.4));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.4), rgba(160,160,160,0.4));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,0.4), rgba(160,160,160,0.4));
	background-image: -o-linear-gradient(top, rgba(255,255,255,0.4), rgba(160,160,160,0.4));}
}
#sp-header .logo {
  height: 90px;
}
 .service-box .service-icon .front-content img {
            margin-bottom: 5px !important;
            margin-top: 15px !important;
            display: initial;
    -webkit-border-radius: 1% !important;
    -moz-border-radius: 1% !important;
    border-radius: 1% !important;
    height: auto !important;
    width: auto !important;
    -webkit-box-shadow: 0 0 0px rgba(0,0,0,0.2) !important;
    -moz-box-shadow: 0 0 0px rgba(0,0,0,0.2) !important;
    box-shadow: 0 0 0px rgba(0,0,0,0.2) !important;
        }
.service-box .service-icon .front-content {
  top: 60px !important; 
  }
 .service-content{
            background-color: #fff !important;
        } 
 .service-box .service-content h3 {
            color: #333 !important;
            text-transform: uppercase;
        }
        .service-box .service-content p, .service-box .service-content .mos-img {
            color: #555 !important;
        }     

/* ================================================== */

/* ==========================
   MCRU Page Header
   ========================== */
/* --- Global Page Header Style --- */
.mcru-page-header {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 30px;
    position: relative;
}

/* ชื่อหัวข้อหลัก (Dynamic Title) */
.mcru-main-title {
    font-family: 'Kanit', sans-serif;
    color: #003366; /* สีน้ำเงินเข้ม มรภ. */
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 10px 0;
}

/* ชื่อมหาวิทยาลัย (Subtitle) */
.mcru-subtitle {
    font-family: 'Kanit', sans-serif;
    color: #777; /* สีเทา เพื่อไม่ให้แข่งกับหัวข้อหลัก */
    font-size: 1rem;
    font-weight: 300;
    margin: 0;
    letter-spacing: 0.5px;
}

.mcru-subtitle span.divider {
    color: #3598db; /* สีฟ้าตรงเส้นกั้น */
    margin: 0 10px;
    font-weight: bold;
}

/* เส้นขีดตกแต่งด้านล่าง (Decoration Line) */
.mcru-header-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #3598db, #003366); /* ไล่สีฟ้า-น้ำเงิน */
    margin: 20px auto 0 auto;
    border-radius: 2px;
}

/* Responsive: ปรับขนาดบนมือถือ */
@media (max-width: 768px) {
    .mcru-main-title { font-size: 1.6rem; }
    .mcru-subtitle { font-size: 0.85rem; display: flex; flex-direction: column; gap: 5px; }
    .mcru-subtitle span.divider { display: none; } /* ซ่อนขีดตั้งบนมือถือ */
}
/* ==========================
   MCRU Website Link Bar Style
   ========================== */
/* --- Related Website Link Bar Style --- */
.related-site-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8fbff; /* พื้นหลังสีฟ้าอ่อนจางๆ */
    border: 1px solid #eef2f5;
    border-left: 5px solid #003366; /* เส้นเน้นสีน้ำเงินเข้มด้านซ้าย */
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    flex-wrap: wrap; /* รองรับมือถือให้ปัดลงบรรทัดใหม่ */
    gap: 15px;
}

.related-site-wrapper:hover {
    box-shadow: 0 8px 15px rgba(0, 51, 102, 0.08);
    border-color: #3598db;
    background-color: #fff;
}

/* ส่วนข้อความ */
.site-info {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.site-icon {
    font-size: 1.8rem;
    color: #3598db;
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.site-label {
    font-family: 'Kanit', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    margin: 0;
    line-height: 1.4;
}

.site-label small {
    display: block;
    font-size: 0.9rem;
    color: #777;
    font-weight: 400;
    margin-top: 2px;
}

/* ส่วนปุ่มกด */
.btn-visit-site {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3598db;
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none !important;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(53, 152, 219, 0.3);
}

.btn-visit-site:hover {
    background-color: #003366;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 51, 102, 0.2);
}

.btn-icon-arrow { margin-left: 8px; font-size: 0.9rem; }

/* Responsive: มือถือ */
@media (max-width: 768px) {
    .related-site-wrapper {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .btn-visit-site {
        width: 100%; /* ปุ่มเต็มจอในมือถือ */
    }
}
/* ==========================
   MCRU University Executive Board
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

/* Container หลัก */
.exec-board {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 คอลัมน์ */
    gap: 30px;
    margin-bottom: 30px;
    font-family: 'Kanit', sans-serif; /* ใช้ฟอนต์ Kanit */
    width: 100%; /* Fix Safari: บังคับความกว้าง */
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .exec-board {
        grid-template-columns: repeat(2, 1fr); /* 2 คอลัมน์ */
    }
}

/* Desktop (992px+) */
@media (min-width: 992px) {
    .exec-board {
        grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์ */
    }
}

/* การ์ดแต่ละคน */
.exec-card {
    background-color: #ffffff;
    border: 1px solid #e1e8f0; /* เส้นขอบสีฟ้าอ่อนจางๆ */
    border-top: 4px solid #003399; /* Top Border สีน้ำเงินเข้มเน้นธีม */
    /*background: linear-gradient(90deg, #003366 0%, #3598db 100%); /* ไล่สีน้ำเงิน */
    border-radius: 10px;
    padding: 30px 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 51, 153, 0.05); /* เงาสีน้ำเงินจางๆ */
    transition: all 0.3s ease;
    height: 100%;
    position: relative; /* Fix Safari */
    display: flex;       /* จัดเรียงภายในการ์ดให้ยืดหยุ่น */
    flex-direction: column;
    justify-content: space-between;
}

.exec-card:hover {
    box-shadow: 0 15px 30px rgba(0, 51, 153, 0.15); /* เงาเข้มขึ้น */
    transform: translateY(-5px);
    border-color: #003399; /* เปลี่ยนขอบเป็นสีน้ำเงินเมื่อ Hover */
}

/* กล่องรูปภาพ */
.exec-photo {
    width: 160px;
    height: 190px;
    margin: 0 auto 20px auto;
    overflow: hidden;
    border-radius: 8px;
    border: 3px solid #f0f4f8; /* กรอบรูปสีเทาฟ้าอ่อน */
}

/* รูปภาพ */
.exec-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Fix Safari: ป้องกันรูปมีขอบเกิน */
    transition: transform 0.4s ease;
}

.exec-card:hover .exec-photo img {
    transform: scale(1.1);
}

/* ชื่อตำแหน่ง (สีน้ำเงิน) */
.exec-position {
    color: #003399; /* สีน้ำเงินเข้ม */
    font-weight: 600; /* Kanit หนาปานกลาง */
    font-size: 1.15rem;
    margin-bottom: 15px;
    line-height: 1.4;
    min-height: 50px; /* จองพื้นที่ความสูงให้เท่ากัน */
}

/* ชื่อไทย */
.exec-name-th {
    font-size: 1.25rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 5px;
}

/* ชื่ออังกฤษ */
.exec-name-en {
    font-size: 1rem;
    color: #666;
    margin-bottom: 20px;
    font-weight: 300;
}

/* ข้อมูลติดต่อ */
.exec-contact {
    font-size: 0.9rem;
    color: #444;
    background: #f4f8fb; /* พื้นหลังสีฟ้าจางมากๆ */
    padding: 15px;
    border-radius: 8px;
    line-height: 1.6;
}

/* Fix เพิ่มเติมสำหรับ Safari รุ่นเก่า */
@supports not (display: grid) {
  .exec-board {
    display: flex;
    flex-wrap: wrap;
  }
  .exec-card {
    margin: 1%;
    width: 31%; /* Fallback สำหรับเครื่องที่ไม่รองรับ Grid จริงๆ */
  }
}

/* ==========================
   Executive Card Responsive
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

/* Container หลัก */
.executive-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 คอลัมน์ */
    gap: 25px;
    padding: 20px 0;
    font-family: 'Kanit', sans-serif;
    box-sizing: border-box;
}

/* Tablet (768px ขึ้นไป) */
@media (min-width: 768px) {
    .executive-wrapper {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 คอลัมน์ */
    }
}

/* Desktop (992px ขึ้นไป) */
@media (min-width: 992px) {
    .executive-wrapper {
        grid-template-columns: repeat(3, 1fr); /* Desktop: 3 คอลัมน์ */
    }
}

/* การ์ดแต่ละใบ */
.executive-card {
    background-color: #fff;
    border: 1px solid #cfd8dc; /* สีเทาฟ้าจางๆ */
    border-top: 5px solid #607d8b; /* แถบสีหลักด้านบน (Blue Grey) */
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.executive-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(96, 125, 139, 0.2); /* เงาสีเทาฟ้า */
}

/* ป้ายลำดับที่ */
.executive-card .order {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #eceff1; /* พื้นหลังสีเทาอ่อน */
    color: #455a64; /* ตัวหนังสือสีเทาเข้ม */
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
}

/* กรอบรูปภาพ (เพื่อทำเอฟเฟกต์ Zoom) */
.exec-img-wrapper {
    width: 160px;  /* กำหนดขนาดความกว้างรูป */
    height: 160px; /* กำหนดความสูงรูป (สี่เหลี่ยมจัตุรัส) */
    margin: 0 auto 20px auto; /* จัดกึ่งกลาง */
    overflow: hidden; /* ซ่อนส่วนเกินเวลาซูม */
    border-radius: 8px; /* มุมมนเล็กน้อย */
    border: 3px solid #eceff1; /* ขอบรูปสีเทาอ่อน */
}

/* ตัวรูปภาพ */
.exec-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* บังคับรูปให้เต็มกรอบโดยไม่เสียสัดส่วน */
    transition: transform 0.5s ease; /* ความนุ่มนวลในการซูม */
    display: block; /* แก้บั๊ก Safari */
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้ที่การ์ด */
.executive-card:hover .exec-img-wrapper img {
    transform: scale(1.15); /* ขยายรูป 15% */
}

/* ชื่อ (H3) */
.executive-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #37474f; /* สีเทาเข้มเกือบดำ */
    margin: 0 0 10px 0;
    line-height: 1.4;
}

/* ตำแหน่ง (P) */
.executive-card p {
    font-size: 1rem;
    color: #546e7a; /* สีเทาฟ้ากลาง */
    margin: 0 0 15px 0;
    font-weight: 400;
}

/* ช่วงเวลา (วันที่/พ.ศ.) */
.executive-card .period {
    font-size: 0.9rem;
    color: #78909c; /* สีเทาฟ้าอ่อน */
    background: #fcfdfe;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 4px;
    border: 1px dashed #b0bec5;
    margin-top: auto; /* ดันลงไปด้านล่างสุดของการ์ดเสมอ */
}

/* ==========================
   MCRU History Timeline
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

/* --- Container หลัก --- */
.mcru-history-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #333;
    overflow-x: hidden; /* ป้องกัน Scroll แนวนอนในมือถือ */
    padding: 20px 0;
}

/* --- จัดการรูปภาพ Header/Footer และ Effect Zoom --- */
.history-img-box {
    width: 100%;
    max-width: 800px; /* จำกัดความกว้างไม่ให้ใหญ่เกิน */
    margin: 0 auto 40px auto; /* จัดกึ่งกลาง */
    border-radius: 10px;
    overflow: hidden; /* สำคัญสำหรับ Effect Zoom */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid #e1e8ed;
}

.history-img-box img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.history-img-box:hover img {
    transform: scale(1.05); /* ซูมรูป 5% */
}

/* --- Timeline Structure --- */
.timeline-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
}

/* เส้นแกนกลาง */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #003366; /* สีเส้นแกนกลาง (น้ำเงินเข้ม) */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
}

/* --- Timeline Item --- */
.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%; /* แบ่งครึ่งหน้าจอ */
    box-sizing: border-box;
}

/* ด้านซ้าย (สำหรับ Desktop) */
.timeline-item.left {
    left: 0;
    text-align: right; /* จัดข้อความชิดขวาเพื่อเข้าหาเส้นแกน */
}

/* ด้านขวา (สำหรับ Desktop) */
.timeline-item.right {
    left: 50%;
    text-align: left;
}

/* จุดวงกลม (Dot) */
.timeline-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px; /* ตำแหน่งสำหรับด้านซ้าย */
    background-color: #fff;
    border: 4px solid #3598db; /* สีฟ้าสว่าง */
    top: 25px;
    border-radius: 50%;
    z-index: 1;
    transition: all 0.3s ease;
}

/* ปรับตำแหน่งจุดสำหรับด้านขวา */
.timeline-item.right .timeline-dot {
    left: -10px;
}

/* Effect เมื่อชี้ที่จุด */
.timeline-item:hover .timeline-dot {
    background-color: #003366;
    transform: scale(1.2);
}

/* --- Content Card --- */
.timeline-content {
    padding: 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.1); /* เงาสีน้ำเงินจางๆ */
    position: relative;
    border-top: 5px solid #003366; /* เส้นขอบบนสีน้ำเงินเข้ม */
    transition: transform 0.3s ease;
}

.timeline-item:hover .timeline-content {
    transform: translateY(-5px); /* ลอยขึ้นเล็กน้อย */
}

/* Typography */
.timeline-content h2 {
    font-size: 1.4rem;
    color: #003366;
    margin-top: 0;
    margin-bottom: 5px;
    font-weight: 600;
}

.timeline-date {
    display: inline-block;
    padding: 4px 12px;
    background-color: #f0f4f8; /* สีพื้นหลังวันที่ */
    color: #3598db; /* สีตัวอักษรวันที่ */
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.timeline-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 10px;
}

.timeline-content ul {
    list-style: none;
    padding: 0;
    text-align: left; /* บังคับ List ชิดซ้ายเสมอเพื่อให้อ่านง่าย */
}

.timeline-content ul li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    font-size: 0.95rem;
}

.timeline-content ul li::before {
    content: "•";
    color: #3598db;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Badge ปัจจุบัน */
.badge-current {
    position: absolute;
    top: -15px;
    right: 20px;
    background: #e74c3c; /* สีแดงสะดุดตา */
    color: #fff;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- Responsive Layout (Mobile & Tablet) --- */
@media screen and (max-width: 991px) {
    /* ย้ายเส้นแกนไปด้านซ้าย */
    .timeline-container::after {
        left: 31px;
    }

    /* ปรับ Item ทั้งหมดให้เต็มความกว้าง */
    .timeline-item {
        width: 100%;
        padding-left: 70px; /* เว้นที่ให้เส้นแกน */
        padding-right: 25px;
    }

    /* ล้างค่าซ้ายขวาเดิม */
    .timeline-item.left, .timeline-item.right {
        left: 0;
        text-align: left; /* บังคับชิดซ้ายทั้งหมด */
    }

    /* ปรับตำแหน่งจุด */
    .timeline-dot, .timeline-item.right .timeline-dot {
        left: 21px; /* จัดให้ตรงกับเส้นแกนใหม่ */
        right: auto;
    }
    
    /* ปรับลูกศรชี้ (Optional Arrow styling if needed) */
    .timeline-content {
        text-align: left; /* เนื้อหาชิดซ้าย */
    }
    
    .badge-current {
        right: 10px; /* ขยับ Badge เข้ามาหน่อย */
    }
}
/* ==========================
   MCRU vision-mission
   ========================== */
/* Import Font Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

/* Main Container */
.mcru-container {
    font-family: 'Kanit', sans-serif;
    color: #333;
    line-height: 1.6;
    max-width: 100%;
}

/* Card Design Styles */
.mcru-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.08); /* เงาสีน้ำเงินจางๆ */
    padding: 30px;
    margin-bottom: 30px;
    border-left: 5px solid #003366; /* เส้นขอบซ้ายสีน้ำเงินเข้ม */
    transition: transform 0.3s ease;
}

.mcru-card:hover {
    transform: translateY(-5px); /* ลอยขึ้นเล็กน้อยเมื่อชี้ */
}

/* Headings */
.mcru-title {
    color: #003366; /* สีน้ำเงินเข้ม */
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

.mcru-title i, .mcru-title .icon {
    margin-right: 10px;
    color: #3598db; /* ไอคอนสีฟ้าสว่าง */
    font-size: 1.2em;
}

/* Highlight Text */
.mcru-highlight {
    color: #3598db; /* สีฟ้าตามโจทย์ */
    font-weight: 500;
    font-size: 1.1rem;
}

.mcru-desc {
    font-size: 1rem;
    color: #555;
    margin-top: 10px;
}

/* Button / Link Styling */
.mcru-btn {
    display: inline-block;
    background-color: #003366;
    color: #fff !important;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.3s;
}

.mcru-btn:hover {
    background-color: #3598db;
}

/* List Styling (แทน Table ปณิธาน) */
.mcru-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mcru-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.mcru-list li::before {
    content: "🔷"; /* หรือใช้เลขลำดับ */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1rem;
    color: #3598db;
}

/* Strategic Issues Grid (แทน Table ยุทธศาสตร์) */
.strategy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 768px) {
    .strategy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.strategy-item {
    background: #f4f8fb; /* สีฟ้าจางมากๆ */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dcebf7;
}

.strategy-num {
    color: #003366;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

/* Identity Colors */
.color-meaning span {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 0.9em;
    font-weight: bold;
}
.bg-blue { background: #e3f2fd; color: #0d47a1; }
.bg-green { background: #e8f5e9; color: #1b5e20; }
.bg-yellow { background: #fffde7; color: #f57f17; }

/* Image Zoom Effect (เผื่อมีการใส่รูป) */
.mcru-img-zoom {
    overflow: hidden;
    border-radius: 8px;
    display: inline-block;
}
.mcru-img-zoom img {
    transition: transform 0.4s ease;
    max-width: 100%;
    height: auto;
}
.mcru-img-zoom:hover img {
    transform: scale(1.1);
}
/* ==========================
   MCRU authority
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

/* Main Wrapper */
.legal-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #333;
    line-height: 1.6;
    max-width: 100%;
}

/* หัวข้อหลัก (Title) */
.legal-title {
    color: #003366; /* สีน้ำเงินเข้ม */
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}

.legal-title .icon {
    color: #3598db; /* สีฟ้า */
    margin-right: 10px;
    font-size: 1.2rem;
}

/* --- Section 7 Design --- */
.section-seven-card {
    background-color: #f8fbff; /* พื้นหลังสีฟ้าจางมากๆ */
    border-left: 5px solid #003366; /* เส้นขอบซ้าย */
    border-radius: 6px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.05);
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.highlight-text {
    color: #3598db;
    font-weight: 600;
    font-size: 1.2rem;
}

/* --- Section 8 Design (Grid Layout) --- */
.duties-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.duties-col {
    padding: 0 15px;
    margin-bottom: 20px;
    width: 100%; /* Mobile: 100% */
    box-sizing: border-box;
}

/* Tablet & Desktop Layout */
@media (min-width: 768px) {
    .duties-col {
        width: 50%; /* แบ่งครึ่งหน้าจอ */
    }
}

.duty-card {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 20px;
    height: 100%; /* ให้การ์ดสูงเท่ากัน */
    display: flex;
    align-items: flex-start;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.duty-card:hover {
    transform: translateY(-5px); /* ลอยขึ้นเมื่อเมาส์ชี้ */
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.1);
    border-color: #3598db;
}

/* ตัวเลขลำดับ */
.duty-number {
    background: #003366;
    color: #fff;
    min-width: 35px;
    height: 35px;
    border-radius: 50%; /* วงกลม */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    margin-right: 15px;
    flex-shrink: 0; /* ป้องกันวงกลมเบี้ยว */
    box-shadow: 0 3px 6px rgba(0, 51, 102, 0.3);
}

.duty-text {
    font-size: 1rem;
    color: #444;
    margin-top: 5px;
}

/* Footer / Source Link */
.legal-footer {
    text-align: right;
    margin-top: 30px;
    font-size: 0.9rem;
    color: #777;
    border-top: 1px dashed #ccc;
    padding-top: 15px;
}

.legal-btn {
    display: inline-block;
    background: #3598db;
    color: #fff !important;
    padding: 5px 15px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.3s;
    margin-left: 10px;
}

.legal-btn:hover {
    background: #003366;
}

/* Image Zoom Effect (เผื่อมีการใส่รูป) */
.legal-img-box {
    overflow: hidden;
    border-radius: 8px;
    margin: 10px 0;
    border: 1px solid #ddd;
}
.legal-img-box img {
    width: 100%;
    transition: transform 0.4s ease;
    display: block;
}
.legal-img-box:hover img {
    transform: scale(1.05);
}
/* ==========================
   MCRU identity-logo
   ========================== */
/* Import Font Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

/* --- Main Container --- */
.mcru-identity-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #333;
    line-height: 1.7;
    max-width: 100%;
}

/* --- Typography & Headings --- */
.mcru-head-title {
    color: #003366; /* น้ำเงินเข้ม */
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
}

.mcru-head-title i, .mcru-head-title .icon {
    color: #3598db; /* ฟ้าสว่าง */
    margin-right: 12px;
    font-size: 1.2rem;
}

.mcru-text-highlight {
    color: #003366;
    font-weight: 500;
}

/* --- Image Zoom Effect --- */
.mcru-img-wrapper {
    display: block;
    margin: 20px auto;
    max-width: 300px; /* จำกัดขนาดรูปไม่ให้ใหญ่เกิน */
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.mcru-img-wrapper img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
    display: block;
}

.mcru-img-wrapper:hover img {
    transform: scale(1.1); /* ขยายใหญ่ขึ้นเมื่อเมาส์ชี้ */
}

/* --- Color Meaning Section (แทนตารางสี) --- */
.color-meaning-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.color-item {
    display: flex;
    align-items: center;
    background: #f9fbfd;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eef2f5;
    transition: transform 0.3s;
}

.color-item:hover {
    transform: translateX(5px);
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.color-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    border: 2px solid #fff;
}

.color-desc strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 3px;
}

/* Color Classes */
.bg-mcru-blue { background-color: #2a3d91; }
.bg-mcru-green { background-color: #34ae3f; }
.bg-mcru-gold { background-color: #e2b70f; }
.bg-mcru-orange { background-color: #f68913; }
.bg-mcru-white { background-color: #FFFFFF; border: 1px solid #ddd; }
.bg-mcru-yellow { background-color: #fbc707; }

/* --- Text Color Helpers --- */
.text-blue { color: #2a3d91; }
.text-green { color: #34ae3f; }
.text-gold { color: #cfa500; }
.text-orange { color: #f68913; }

/* --- Identity Box (Motto, Buddha, Tree) --- */
.identity-box {
    background: #fff;
    border-left: 4px solid #3598db;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-radius: 0 8px 8px 0;
}

/* --- Song List (แทนตารางเพลง) --- */
.song-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.song-item {
    display: flex;
    flex-wrap: wrap; /* รองรับมือถือ */
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    border-radius: 6px;
    transition: background 0.2s;
}

.song-item:hover {
    background-color: #f0f7ff;
}

.song-info {
    flex: 1;
    min-width: 200px; /* พื้นที่ขั้นต่ำของชื่อเพลง */
    font-weight: 500;
    color: #444;
}

.song-number {
    display: inline-block;
    width: 30px;
    color: #aaa;
    font-weight: 300;
}

.song-actions {
    display: flex;
    gap: 10px;
    margin-top: 5px; /* ระยะห่างในมือถือ */
}

/* ปุ่มกด */
.btn-mcru {
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.btn-download {
    background-color: #eef2f5;
    color: #555;
}
.btn-download:hover {
    background-color: #003366;
    color: #fff;
}

.btn-listen {
    background-color: #3598db;
    color: #fff;
}
.btn-listen:hover {
    background-color: #2980b9;
    box-shadow: 0 2px 8px rgba(53, 152, 219, 0.4);
}
.btn-lyrics {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #666;
}
.btn-lyrics:hover {
    border-color: #aaa;
    background-color: #f9f9f9;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .song-actions {
        width: 100%;
        justify-content: flex-end; /* ชิดขวาในมือถือ */
        margin-top: 10px;
    }
    .color-item {
        flex-direction: column;
        text-align: center;
    }
    .color-box {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* ==========================
   MCRU building
   ========================== */
/* Import Font Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

/* --- Main Wrapper --- */
.mcru-facilities-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
}

/* --- Headings --- */
.mcru-section-header {
    background-color: #f0f4f8;
    border-left: 5px solid #003366; /* สีน้ำเงินเข้ม */
    padding: 15px 20px;
    margin-bottom: 25px;
    margin-top: 40px;
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: center;
}

.mcru-section-header h2 {
    color: #003366;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.mcru-section-header .icon {
    margin-right: 15px;
    font-size: 1.5rem;
}

/* --- Card Design --- */
.facility-card {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 25px;
    height: 100%; /* ให้การ์ดสูงเท่ากันในแถว */
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden; /* ป้องกันเนื้อหาล้น */
}

.facility-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.1);
    border-color: #3598db;
}

.facility-card-title {
    color: #003366;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f4f8;
    padding-bottom: 10px;
}

/* --- Lists inside Cards (แทนตาราง) --- */
.info-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* จัดชิดบนกันข้อความยาว */
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.95rem;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 500;
    color: #333;
    padding-right: 10px;
    flex: 1; /* ให้พื้นที่ข้อความยืดหยุ่น */
}

.info-value {
    color: #003366;
    font-weight: 600;
    text-align: right;
    min-width: 100px; /* กันพื้นที่สำหรับตัวเลข */
    white-space: nowrap; /* ป้องกันตัวเลขตัดบรรทัด */
}

/* --- Image Zoom Effect --- */
.facility-img-box {
    width: 100%;
    height: 200px; /* กำหนดความสูงภาพให้เท่ากัน */
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
}

.facility-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* บังคับภาพให้เต็มกรอบ */
    transition: transform 0.5s ease;
}

.facility-card:hover .facility-img-box img {
    transform: scale(1.1); /* ขยายภาพเมื่อชี้ */
}

/* --- Meeting Room Groups --- */
.meeting-group {
    background: #f9fbfd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 3px solid #3598db;
}
.meeting-group-title {
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: block;
}

/* --- Highlight Text --- */
.highlight-blue { color: #3598db; font-weight: 500; }
.highlight-dark { color: #003366; font-weight: 600; }

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .info-item {
        flex-direction: column;
    }
    .info-value {
        text-align: left;
        margin-top: 5px;
        color: #3598db;
    }
    .facility-img-box {
        height: auto;
        aspect-ratio: 16/9;
    }
}
/* ==========================
   MCRU committee
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.committee-wrap {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Accordion Style --- */
.mcru-accordion .accordion-item {
    border: none;
    margin-bottom: 10px;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    border: 1px solid #eef2f5;
}

.mcru-accordion .accordion-button {
    background-color: #fff;
    color: #003366;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 15px 20px;
    transition: all 0.3s;
}

.mcru-accordion .accordion-button:not(.collapsed) {
    background-color: #003366;
    color: #fff;
    box-shadow: none;
}

.mcru-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.mcru-accordion .accordion-body {
    background-color: #fff;
    padding: 20px;
}

/* --- List Item Style --- */
.com-header-box {
    display: flex;
    background-color: #f4f8fb;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
}

.com-item {
    display: flex;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
    align-items: center;
}

.com-item:hover {
    background-color: #f9fbfd;
}

.com-item:last-child { border-bottom: none; }

.c-id {
    width: 60px;
    text-align: center;
    font-weight: 500;
    color: #3598db;
    flex-shrink: 0;
}

.c-name {
    flex: 2;
    font-weight: 500;
    color: #333;
    padding-right: 10px;
}

.c-pos {
    flex: 2;
    color: #666;
    font-size: 0.95rem;
}

/* --- Document Section inside Accordion --- */
.doc-wrapper {
    margin-top: 20px;
    background-color: #f8fbff;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #3598db;
}

.doc-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.doc-list li {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
}

.doc-icon { margin-right: 10px; font-size: 1.1rem; }

.doc-link {
    text-decoration: none;
    color: #3598db;
    transition: color 0.2s;
}

.doc-link:hover { color: #003366; text-decoration: underline; }

.update-date {
    font-size: 0.85rem;
    color: #888;
    text-align: right;
    margin-top: 15px;
    font-style: italic;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .com-header-box { display: none; } /* ซ่อนหัวตารางบนมือถือ */
    .com-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        border: 1px solid #eee;
        margin-bottom: 10px;
        border-radius: 8px;
    }
    .c-id {
        width: 100%;
        text-align: left;
        margin-bottom: 5px;
        font-size: 0.9rem;
        color: #aaa;
    }
    .c-id::before { content: "ลำดับที่ "; }
    .c-name {
        width: 100%;
        font-size: 1.1rem;
        margin-bottom: 5px;
        color: #003366;
    }
    .c-pos { width: 100%; }
}
/* ==========================
   MCRU appointment
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.mcru-doc-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 10px 0;
}

/* --- Document List Container --- */
.mcru-doc-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* ระยะห่างระหว่างแถว */
}

/* --- Individual Document Row --- */
.doc-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #eef2f5;
    border-left: 4px solid #3598db; /* เส้นสีฟ้าด้านซ้าย */
    border-radius: 6px;
    padding: 15px;
    transition: all 0.3s ease;
    text-decoration: none !important;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.doc-item:hover {
    background-color: #f9fbff; /* สีพื้นหลังเมื่อเมาส์ชี้ */
    border-left-color: #003366; /* เปลี่ยนสีเส้นด้านซ้ายเป็นน้ำเงินเข้ม */
    transform: translateY(-3px); /* ลอยขึ้นเล็กน้อย */
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.1);
}

/* --- Icon Styling --- */
.doc-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffebeb; /* พื้นหลังสีแดงจางๆ ให้เข้ากับ PDF */
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.doc-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Effect: Zoom Icon on Hover */
.doc-item:hover .doc-icon img {
    transform: scale(1.2); /* ขยายรูปไอคอน 20% */
}

/* --- Content Styling --- */
.doc-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-right: 15px;
}

.doc-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #003366; /* สีน้ำเงินเข้ม */
    margin-bottom: 4px;
    line-height: 1.4;
    transition: color 0.2s;
}

.doc-item:hover .doc-title {
    color: #3598db; /* เปลี่ยนเป็นสีฟ้าเมื่อชี้ */
}

.doc-date {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
}

.doc-date::before {
    content: '📅'; /* ไอคอนปฏิทิน */
    margin-right: 5px;
    font-size: 0.8rem;
}

/* --- Button Styling (Optional) --- */
.doc-action {
    flex-shrink: 0;
}

.btn-download {
    background-color: #f1f8ff;
    color: #3598db;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #dceeff;
    white-space: nowrap;
    transition: all 0.3s;
}

.doc-item:hover .btn-download {
    background-color: #3598db;
    color: #fff;
    border-color: #3598db;
}

/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
    .doc-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .doc-icon {
        margin-bottom: 10px;
    }
    
    .doc-content {
        width: 100%;
        padding-right: 0;
        margin-bottom: 10px;
    }
    
    .doc-action {
        width: 100%;
        text-align: right;
    }
    
    .btn-download {
        display: block;
        text-align: center;
        width: 100%;
    }
}
/* --- Custom Bootstrap Tabs --- */
.mcru-nav-tabs {
    border-bottom: 2px solid #003366;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    padding: 10px 10px 0 10px;
}

.mcru-nav-tabs .nav-item {
    margin-bottom: -2px;
}

.mcru-nav-tabs .nav-link {
    border: none;
    border-radius: 8px 8px 0 0;
    color: #555;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    padding: 12px 20px;
    background: transparent;
    transition: all 0.3s;
}

.mcru-nav-tabs .nav-link:hover {
    color: #003366;
    background-color: #eef6ff;
}

.mcru-nav-tabs .nav-link.active {
    background-color: #003366;
    color: #fff;
    border: none;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
}

/* Document List CSS (ชุดเดิม) */
.mcru-doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-item { display: flex; align-items: center; background-color: #fff; border: 1px solid #eef2f5; border-left: 4px solid #3598db; border-radius: 6px; padding: 15px; transition: all 0.3s ease; text-decoration: none !important; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.doc-item:hover { background-color: #f9fbff; border-left-color: #003366; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 51, 102, 0.1); }
.doc-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #ffebeb; border-radius: 50%; margin-right: 15px; flex-shrink: 0; }
.doc-icon img { width: 24px; height: 24px; object-fit: contain; }
.doc-content { flex-grow: 1; display: flex; flex-direction: column; padding-right: 15px; }
.doc-title { font-size: 1.05rem; font-weight: 500; color: #003366; margin-bottom: 4px; line-height: 1.4; }
.doc-date { font-size: 0.85rem; color: #888; }
.btn-download { background-color: #f1f8ff; color: #3598db; padding: 5px 15px; border-radius: 20px; font-size: 0.85rem; border: 1px solid #dceeff; transition: all 0.3s; white-space: nowrap;}
.doc-item:hover .btn-download { background-color: #3598db; color: #fff; border-color: #3598db; }

/* Responsive */
@media (max-width: 768px) {
    .doc-item { flex-direction: column; align-items: flex-start; }
    .doc-icon { margin-bottom: 10px; }
    .doc-content { width: 100%; padding-right: 0; margin-bottom: 10px; }
    .doc-action { width: 100%; text-align: right; }
    .btn-download { display: block; text-align: center; width: 100%; }
    .mcru-nav-tabs .nav-link { font-size: 0.9rem; padding: 10px 15px; }
}
/* ==========================
   MCRU appointment เปลี่ยนจาก tab เป็นปุ่ม
   ========================== */
/* --- Button Group Navigation Style --- */
.mcru-btn-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap; /* ให้ปัดลงบรรทัดใหม่เมื่อหน้าจอเล็ก */
    border-bottom: none !important; /* ลบเส้นขอบล่างเดิมของ Tab ทิ้ง */
}

.mcru-btn-nav {
    border: 1px solid #e0e0e0;
    background-color: #fff;
    color: #555;
    padding: 12px 30px;
    border-radius: 50px; /* ปุ่มทรงแคปซูล */
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    outline: none !important;
}

/* สถานะเมื่อเอาเมาส์ชี้ */
.mcru-btn-nav:hover {
    background-color: #f0f7ff;
    color: #003366;
    transform: translateY(-3px);
    border-color: #3598db;
    box-shadow: 0 6px 10px rgba(53, 152, 219, 0.2);
}

/* สถานะเมื่อถูกกดเลือก (Active) */
.mcru-btn-nav.active {
    background: linear-gradient(135deg, #003366 0%, #0055aa 100%);
    color: #fff !important;
    border-color: #003366;
    box-shadow: 0 6px 12px rgba(0, 51, 102, 0.3);
}

.nav-icon { margin-right: 10px; font-size: 1.2rem; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .mcru-btn-group { 
        flex-direction: column; 
        width: 100%; 
        gap: 10px;
    }
    .mcru-btn-nav { 
        width: 100%; 
        justify-content: center; /* จัดตัวหนังสือกลางปุ่ม */
    }
}
/* ==========================
   MCRU government-action-plan
   ========================== */
/* Import Font Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.mcru-strategy-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Title --- */
.strategy-section-title {
    color: #003366; /* สีน้ำเงินเข้ม */
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 25px;
    margin-top: 40px;
    padding-left: 15px;
    border-left: 5px solid #3598db; /* เส้นขอบซ้ายสีฟ้า */
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #f4f8fb 0%, #fff 100%);
    padding: 10px 15px;
    border-radius: 0 8px 8px 0;
}

.strategy-section-title:first-child { margin-top: 0; }

.section-icon {
    font-size: 1.4rem;
    margin-right: 12px;
}

/* --- Card Design --- */
.strategy-card {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 10px;
    padding: 25px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.strategy-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #3598db;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.strategy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.1);
    border-color: #3598db;
}

.strategy-card:hover::after {
    transform: scaleX(1);
}

/* --- Card Content --- */
.st-icon-box {
    width: 50px;
    height: 50px;
    background-color: #f0f7ff;
    color: #003366;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
    transition: background 0.3s;
}

.strategy-card:hover .st-icon-box {
    background-color: #003366;
    color: #fff;
}

.st-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    line-height: 1.4;
}

.st-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* --- Button --- */
.btn-st-view {
    display: block;
    text-align: center;
    background-color: #fff;
    color: #3598db;
    border: 1px solid #3598db;
    padding: 8px 15px;
    border-radius: 25px;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-st-view:hover {
    background-color: #3598db;
    color: #fff;
}

.btn-st-view i, .btn-st-view .icon {
    margin-right: 5px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .strategy-card { margin-bottom: 15px; }
}

/* ==========================
   MCRU tuition-fees
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.tuition-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Main Header Title --- */
.tuition-main-title {
    text-align: center;
    color: #003366; /* สีน้ำเงินเข้ม */
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

.tuition-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #3598db; /* สีฟ้า */
    border-radius: 2px;
}

/* --- Card Design --- */
.tuition-card {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-top: 5px solid #003366; /* แถบสีด้านบน */
    border-radius: 12px;
    padding: 0; /* padding 0 เพื่อให้รูปชิดขอบ */
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.tuition-card:hover {
    transform: translateY(-8px); /* ลอยขึ้นเมื่อเมาส์ชี้ */
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* --- Card Header --- */
.tuition-card-header {
    padding: 20px 25px;
    background: linear-gradient(135deg, #f8fbff 0%, #fff 100%);
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.tuition-icon {
    font-size: 1.8rem;
    color: #3598db;
    margin-right: 15px;
    background: #eef6ff;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.tuition-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #003366;
    margin: 0;
}

/* --- Image Container & Effect --- */
.tuition-img-box {
    width: 100%;
    overflow: hidden; /* ซ่อนส่วนเกินเวลาซูม */
    background-color: #f4f4f4;
    position: relative;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.tuition-img-box img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease; /* ความนุ่มนวลของการซูม */
}

/* Effect: Zoom Image on Hover */
.tuition-card:hover .tuition-img-box img {
    transform: scale(1.08); /* ขยายภาพ 8% */
}

/* --- Badge Overlay (Optional text on image) --- */
.tuition-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(0, 51, 102, 0.85);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 2;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .tuition-card { margin-bottom: 25px; }
    .tuition-main-title { font-size: 1.5rem; }
}
/* ==========================
   MCRU calendar-education
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.academic-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Section Heading --- */
.section-title {
    color: #003366; /* สีน้ำเงินเข้ม */
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 25px;
    margin-top: 30px;
    padding-left: 15px;
    border-left: 5px solid #3598db; /* เส้นขอบซ้ายสีฟ้า */
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #f0f8ff 0%, #ffffff 100%);
    padding: 10px 15px;
    border-radius: 0 8px 8px 0;
}

.section-title:first-child { margin-top: 0; }

.section-icon {
    font-size: 1.5rem;
    margin-right: 12px;
}

/* --- Sub-Section Heading --- */
.sub-title {
    color: #3598db; /* สีฟ้า */
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.sub-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #3598db;
    border-radius: 50%;
    margin-right: 10px;
}

/* --- Document List Container --- */
.doc-list {
    display: grid;
    grid-template-columns: 1fr; /* ค่าเริ่มต้น 1 คอลัมน์ */
    gap: 15px;
    margin-bottom: 30px;
}

/* --- Card Item --- */
.doc-item {
    background-color: #fff;
    border: 1px solid #eef2f5;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.doc-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: #3598db;
    transition: width 0.3s ease;
}

.doc-item:hover {
    transform: translateY(-5px); /* ลอยขึ้นเล็กน้อย */
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.1);
    background-color: #fff;
    border-color: #3598db;
}

.doc-item:hover::before {
    width: 8px; /* เส้นด้านซ้ายหนาขึ้นเมื่อชี้ */
    background-color: #003366;
}

/* --- Content & Icon --- */
.doc-icon-box {
    width: 50px;
    height: 50px;
    background-color: #eaf4ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #003366;
    margin-right: 20px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.doc-item:hover .doc-icon-box {
    transform: scale(1.1);
    background-color: #003366;
    color: #fff;
}

.doc-info {
    flex-grow: 1;
    padding-right: 15px;
}

.doc-name {
    font-size: 1.05rem;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
    margin-bottom: 5px;
}

.doc-meta {
    font-size: 0.85rem;
    color: #888;
}

/* --- Download Button --- */
.btn-download {
    background-color: #f8f9fa;
    color: #3598db;
    border: 1px solid #dee2e6;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s;
    display: flex;
    align-items: center;
}

.btn-download i, .btn-download .icon {
    margin-right: 5px;
}

.doc-item:hover .btn-download {
    background-color: #3598db;
    color: #fff;
    border-color: #3598db;
}

/* --- Responsive Breakpoints --- */
@media (min-width: 768px) {
    .doc-list {
        grid-template-columns: repeat(1, 1fr); /* Tablet: 1 คอลัมน์เต็ม */
    }
}

@media (min-width: 992px) {
    .doc-list {
        grid-template-columns: repeat(2, 1fr); /* PC: 2 คอลัมน์ */
    }
}

@media (max-width: 576px) {
    .doc-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .doc-icon-box {
        margin-bottom: 15px;
    }
    .doc-info {
        width: 100%;
        margin-bottom: 15px;
        padding-right: 0;
    }
    .btn-download {
        width: 100%;
        justify-content: center;
    }
}
/* ==========================
   MCRU curriculum
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.academic-docs-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Section Headers --- */
.ac-header {
    background: linear-gradient(to right, #f0f4f8, #ffffff);
    border-left: 5px solid #003366; /* สีน้ำเงินเข้ม */
    padding: 12px 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
}

.ac-header:first-child { margin-top: 0; }

.ac-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #003366;
    margin: 0;
}

.ac-icon-header {
    font-size: 1.5rem;
    margin-right: 15px;
    background: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #3598db;
}

/* --- Document Item Card --- */
.ac-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #eef2f5;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

.ac-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: #3598db; /* สีฟ้า */
    transition: width 0.3s;
}

.ac-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.1);
    border-color: #3598db;
}

.ac-item:hover::before {
    width: 8px;
    background-color: #003366;
}

/* --- Icon & Content --- */
.ac-file-icon {
    font-size: 2rem;
    margin-right: 20px;
    color: #e74c3c; /* สีแดงสำหรับ PDF */
    flex-shrink: 0;
    transition: transform 0.3s;
}

.ac-item:hover .ac-file-icon {
    transform: scale(1.1);
}

.ac-content {
    flex-grow: 1;
    padding-right: 20px;
}

.ac-name {
    font-size: 1.05rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.5;
}

.ac-meta {
    font-size: 0.85rem;
    color: #777;
}

/* --- Buttons --- */
.ac-action {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
}

.btn-ac-download {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background-color: #f8f9fa;
    color: #3598db;
    border: 1px solid #dee2e6;
    border-radius: 30px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-ac-download:hover {
    background-color: #3598db;
    color: #fff;
    border-color: #3598db;
}

/* --- Google Sheet Style --- */
.sheet-style .ac-file-icon { color: #27ae60; } /* สีเขียว */
.word-style .ac-file-icon { color: #2980b9; } /* สีน้ำเงิน */

/* --- Notice Box --- */
.ac-notice {
    background-color: #fff8e1;
    border-left: 4px solid #ffc107;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
    font-size: 0.95rem;
    color: #555;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .ac-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .ac-file-icon { margin-bottom: 10px; }
    .ac-content { padding-right: 0; margin-bottom: 15px; width: 100%; }
    .ac-action { width: 100%; }
    .btn-ac-download { width: 100%; justify-content: center; }
}
/* ==========================
   MCRU student-handbook
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.handbook-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.handbook-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.handbook-title {
    color: #003366; /* น้ำเงินเข้ม */
    font-size: 2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    position: relative;
    padding-bottom: 15px;
}

.handbook-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #3598db; /* สีฟ้า */
    border-radius: 2px;
}

.header-icon {
    font-size: 2.2rem;
    color: #3598db;
}

/* --- Handbook Card --- */
.handbook-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #eef2f5;
    text-align: center;
    position: relative;
    top: 0;
}

.handbook-card:hover {
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    top: -5px; /* ลอยขึ้นทั้งการ์ด */
    border-color: #b3d7ff;
}

/* --- Image & Zoom Effect --- */
.book-cover {
    width: 100%;
    overflow: hidden; /* บังคับกรอบไม่ให้รูปล้น */
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #f0f0f0;
    aspect-ratio: 3/4; /* บังคับสัดส่วนรูปให้เท่ากัน */
    position: relative;
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* จัดรูปให้เต็มกรอบ */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

/* Effect: ภาพขยายเมื่อชี้ที่การ์ด */
.handbook-card:hover .book-cover img {
    transform: scale(1.1); /* ขยาย 10% */
}

/* --- Text & Button --- */
.book-year {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 15px;
}

.btn-book-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    background-color: #fff;
    color: #3598db;
    border: 1px solid #3598db;
    border-radius: 25px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-book-dl i, .btn-book-dl .icon {
    margin-right: 8px;
}

.handbook-card:hover .btn-book-dl {
    background-color: #003366;
    color: #fff;
    border-color: #003366;
}

/* --- Responsive Adjustments --- */
@media (max-width: 576px) {
    .handbook-card { margin-bottom: 20px; }
    .book-year { font-size: 1rem; }
}
/* ==========================
   MCRU admission
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.admission-wrapper {
    font-family: 'Kanit', sans-serif;
    padding: 30px 0;
    color: #444;
}

/* --- Section Title --- */
.admission-header {
    text-align: center;
    margin-bottom: 40px;
}

.admission-title {
    color: #003366;
    font-size: 2rem;
    font-weight: 600;
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
}

.admission-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #3598db;
    border-radius: 2px;
}

/* --- Card Design --- */
.admission-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eef2f5;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.admission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* --- Image Area --- */
.ad-img-box {
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}

.ad-img-box img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.admission-card:hover .ad-img-box img {
    transform: scale(1.1); /* Zoom Effect */
}

/* --- Content Area --- */
.ad-content {
    padding: 25px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ad-type-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 20px;
}

.ad-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

/* --- Buttons --- */
.btn-group-ad {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.btn-ad {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.3s;
    font-size: 1rem;
}

.btn-apply {
    background-color: #003366; /* สีน้ำเงินเข้ม */
    color: #fff !important;
    border: 2px solid #003366;
}

.btn-apply:hover {
    background-color: #fff;
    color: #003366 !important;
}

.btn-fb {
    background-color: #fff;
    color: #1877f2 !important; /* สี Facebook */
    border: 2px solid #1877f2;
}

.btn-fb:hover {
    background-color: #1877f2;
    color: #fff !important;
}

.btn-icon { margin-right: 8px; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .admission-card { margin-bottom: 30px; }
    .admission-title { font-size: 1.6rem; }
}
/* ==========================
   MCRU course-programs
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.course-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Section Title --- */
.course-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #003366;
    margin: 30px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef2f5;
    display: flex;
    align-items: center;
}

.section-icon { margin-right: 10px; font-size: 1.8rem; }

/* --- Accordion Custom Style --- */
.accordion-button {
    font-weight: 500;
    font-size: 1.1rem;
    color: #003366;
    background-color: #f8fbff;
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #003366;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}
.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

/* --- Grid Layout (ภายใน Accordion) --- */
.course-grid {
    display: grid;
    /* Desktop: 3 คอลัมน์ */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 10px;
}

/* --- Course Card Design --- */
.cc-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.cc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* Decoration Top Line */
.cc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3598db, #003366);
    border-radius: 12px 12px 0 0;
}

/* Icon Box */
.cc-icon-box {
    width: 70px;
    height: 70px;
    background-color: #f0f7ff;
    border-radius: 15px; /* สี่เหลี่ยมมุมมน */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #003366;
    margin-bottom: 15px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cc-card:hover .cc-icon-box {
    transform: scale(1.15); /* Zoom Effect */
    background-color: #003366;
    color: #fff;
}

/* Course Name & Meta */
.cc-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
    width: 100%;
    /* จัดการตัดคำให้สวยงาม */
    word-wrap: break-word; 
}

.cc-meta {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 20px;
    background: #f9f9f9;
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block;
}

/* Button */
.cc-btn {
    margin-top: auto; /* ดันปุ่มลงล่างสุดเสมอ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 25px;
    background-color: #fff;
    color: #3598db;
    border: 1px solid #3598db;
    border-radius: 30px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
    width: 80%;
}

.cc-btn:hover {
    background-color: #3598db;
    color: #fff;
}

.cc-btn i, .btn-icon { margin-right: 5px; }

/* --- Responsive --- */
/* Tablet (2 Columns) */
@media (max-width: 992px) {
    .course-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (1 Column) */
@media (max-width: 576px) {
    .course-grid { grid-template-columns: 1fr; }
}
/* ==========================
   MCRU gov-structure
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.structure-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.structure-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.structure-title {
    color: #003366; /* สีน้ำเงินเข้ม */
    font-size: 2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    position: relative;
    padding-bottom: 15px;
}

.structure-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #3598db; /* สีฟ้า */
    border-radius: 2px;
}

.header-icon {
    font-size: 2.2rem;
    color: #3598db;
}

/* --- Card Design --- */
.org-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eef2f5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.org-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* --- Image Area & Zoom Effect --- */
.org-img-box {
    width: 100%;
    height: 400px; /* กำหนดความสูงให้เท่ากัน เพื่อความสวยงามใน Grid */
    overflow: hidden;
    position: relative;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.org-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ตัดภาพให้พอดีกรอบ */
    object-position: top; /* ให้เห็นส่วนบนของ Chart เสมอ */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

/* Effect: Zoom Image on Hover */
.org-card:hover .org-img-box img {
    transform: scale(1.1);
}

/* Overlay Icon on Hover */
.org-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 51, 102, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.org-card:hover .org-overlay {
    opacity: 1;
}

.view-icon {
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* --- Content Area --- */
.org-content {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.org-name {
    font-size: 1.15rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 15px;
    line-height: 1.4;
}

.btn-view-full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background-color: #fff;
    color: #3598db;
    border: 1px solid #3598db;
    border-radius: 25px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-view-full:hover {
    background-color: #3598db;
    color: #fff;
}

.btn-icon-small { margin-right: 5px; }

/* --- Responsive Layout --- */
/* Mobile (Default): 1 Column via col-12 */
/* Tablet: 2 Columns via col-md-6 */
/* Desktop: 3 Columns via col-lg-4 */

@media (max-width: 768px) {
    .org-card { margin-bottom: 20px; }
    .org-img-box { height: 300px; } /* ลดความสูงภาพในมือถือ */
}
/* ==========================
   MCRU journals
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.journal-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.journal-header {
    text-align: center;
    margin-bottom: 40px;
}

.journal-main-title {
    color: #003366; /* สีน้ำเงินเข้ม */
    font-size: 2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding-bottom: 15px;
}

.journal-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #3598db; /* สีฟ้า */
    border-radius: 2px;
}

/* --- Card Design --- */
.journal-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eef2f5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.journal-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* --- Image Area & Zoom Effect --- */
.journal-img-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* กำหนดเป็นสี่เหลี่ยมจัตุรัส */
    overflow: hidden;
    position: relative;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}

.journal-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

/* Effect: Zoom Image on Hover */
.journal-card:hover .journal-img-box img {
    transform: scale(1.15);
}

/* --- Content Area --- */
.journal-content {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.journal-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #003366;
    margin-bottom: 15px;
    line-height: 1.5;
    min-height: 3.2em; /* จัดความสูงให้เท่ากัน 2 บรรทัด */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Button --- */
.btn-journal-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background-color: #fff;
    color: #3598db;
    border: 1px solid #3598db;
    border-radius: 25px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
    width: 100%;
}

.btn-journal-link:hover {
    background-color: #003366;
    color: #fff;
    border-color: #003366;
}

.btn-icon { margin-right: 5px; }

/* --- Responsive Grid Setting --- */
/* Mobile: col-12 (1 คน) */
/* Tablet: col-md-6 (2 คน) */
/* Desktop: col-lg-4 (3 คน) */

@media (max-width: 768px) {
    .journal-card { margin-bottom: 20px; }
}
/* ==========================
   MCRU pdpa
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.pdpa-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Navigation Pills (Tabs) --- */
.pdpa-nav {
    border-bottom: 2px solid #eef2f5;
    margin-bottom: 30px;
    gap: 10px;
    padding-bottom: 15px;
    justify-content: center; /* จัดกึ่งกลาง */
}

.pdpa-nav .nav-link {
    border-radius: 50px;
    color: #666;
    font-weight: 500;
    padding: 10px 25px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    border: 1px solid #eef2f5;
}

.pdpa-nav .nav-link:hover {
    background-color: #e3f2fd;
    color: #003366;
    transform: translateY(-2px);
}

.pdpa-nav .nav-link.active {
    background-color: #003366; /* สีน้ำเงินเข้ม */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.2);
    border-color: #003366;
}

/* --- Section Headers --- */
.pdpa-section-title {
    color: #003366;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    border-left: 5px solid #3598db;
    padding-left: 15px;
}

.pdpa-icon { font-size: 1.6rem; margin-right: 10px; }

/* --- Contact Card --- */
.contact-card {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    margin-bottom: 20px;
}

.contact-row {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}
.contact-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.c-label {
    width: 35%;
    font-weight: 600;
    color: #003366;
}
.c-value { width: 65%; color: #555; }

/* --- Document List Item --- */
.doc-list-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #eef2f5;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    transition: all 0.3s;
    text-decoration: none !important;
}

.doc-list-item:hover {
    transform: translateX(5px);
    border-left: 5px solid #3598db;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.file-icon {
    font-size: 1.8rem;
    color: #e74c3c; /* สีแดง PDF */
    margin-right: 15px;
}

.file-info { flex-grow: 1; }
.file-name { font-weight: 500; color: #333; font-size: 1.05rem; }
.file-action {
    background: #f0f7ff; color: #3598db;
    padding: 5px 15px; border-radius: 20px; font-size: 0.85rem;
    white-space: nowrap;
}

/* --- Cookie Content --- */
.cookie-box {
    background-color: #fcfcfc;
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.8;
}
.cookie-box h4 { color: #003366; font-weight: 600; margin-top: 20px; }
.cookie-box a { color: #3598db; text-decoration: underline; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .pdpa-nav { flex-direction: column; }
    .pdpa-nav .nav-link { width: 100%; text-align: center; border-radius: 8px; }
    .contact-row { flex-direction: column; }
    .c-label { width: 100%; margin-bottom: 5px; }
    .c-value { width: 100%; }
    .doc-list-item { flex-direction: column; align-items: flex-start; }
    .file-icon { margin-bottom: 10px; }
    .file-action { margin-top: 10px; width: 100%; text-align: center; }
}
/* ==========================
   MCRU laws-regulations
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.legal-portal-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.legal-header {
    text-align: center;
    margin-bottom: 45px;
}

.legal-main-title {
    color: #003366;
    font-size: 2rem;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.legal-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #3598db;
    border-radius: 2px;
}

.legal-subtitle {
    font-size: 1rem;
    color: #777;
    margin-top: 10px;
}

/* --- Card Design --- */
.portal-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #eef2f5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.portal-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* --- Icon Area --- */
.card-icon-wrapper {
    height: 140px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-icon {
    font-size: 4rem;
    color: #003366;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

/* Decorative circle bg */
.card-icon-wrapper::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.5;
    transform: scale(0);
    transition: transform 0.5s ease;
}

.portal-card:hover .card-icon {
    transform: scale(1.2) rotate(-5deg);
    color: #3598db;
}

.portal-card:hover .card-icon-wrapper::before {
    transform: scale(1.5);
}

/* --- Content Area --- */
.card-body-content {
    padding: 25px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    line-height: 1.4;
}

.card-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* --- Button --- */
.btn-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    background-color: #fff;
    color: #3598db;
    border: 2px solid #3598db;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.3s;
    width: 100%;
}

.btn-visit:hover {
    background-color: #3598db;
    color: #fff;
    box-shadow: 0 4px 10px rgba(53, 152, 219, 0.3);
}

.btn-icon { margin-left: 8px; font-size: 1.1rem; }

/* --- Responsive Grid --- */
/* Mobile: col-12 */
/* Tablet: col-md-6 */
/* Desktop: col-lg-4 */

@media (max-width: 768px) {
    .portal-card { margin-bottom: 25px; }
    .card-icon-wrapper { height: 120px; }
    .card-icon { font-size: 3.5rem; }
}
/* ==========================
   MCRU university-regulations-rules
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.regulations-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.reg-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.reg-title {
    color: #003366; /* สีน้ำเงินเข้ม */
    font-size: 2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    position: relative;
    padding-bottom: 15px;
}

.reg-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #3598db, #003366); /* ไล่สีฟ้า-น้ำเงิน */
    border-radius: 2px;
}

.reg-subtitle {
    font-size: 1rem;
    color: #777;
    margin-top: 10px;
}

/* --- Card Design --- */
.reg-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eef2f5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.reg-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* --- Top Color Bar --- */
.reg-card-top {
    height: 6px;
    background: #003366;
    width: 100%;
    transition: height 0.3s;
}

.reg-card:hover .reg-card-top {
    height: 10px;
    background: #3598db;
}

/* --- Icon Section --- */
.reg-icon-box {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fbff;
    position: relative;
    overflow: hidden;
}

.reg-icon {
    font-size: 3.5rem;
    color: #003366;
    transition: transform 0.5s ease;
    z-index: 2;
}

/* Effect: วงกลมพื้นหลังขยายเมื่อ Hover */
.reg-icon-box::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #e3f2fd;
    border-radius: 50%;
    transition: transform 0.5s ease;
    z-index: 1;
}

.reg-card:hover .reg-icon {
    transform: scale(1.2);
    color: #3598db;
}

.reg-card:hover .reg-icon-box::before {
    transform: scale(5); /* ขยายเต็มพื้นที่ */
    background-color: #f0f8ff;
}

/* --- Content Section --- */
.reg-content {
    padding: 25px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.reg-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
}

.reg-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* --- Button --- */
.btn-reg-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    background-color: #fff;
    color: #3598db;
    border: 2px solid #3598db;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.3s;
    width: 100%;
}

.btn-reg-view:hover {
    background-color: #3598db;
    color: #fff;
    box-shadow: 0 4px 10px rgba(53, 152, 219, 0.3);
}

.icon-arrow { margin-left: 8px; transition: transform 0.3s; }
.btn-reg-view:hover .icon-arrow { transform: translateX(5px); }

/* --- Responsive Grid --- */
@media (max-width: 768px) {
    .reg-card { margin-bottom: 20px; }
    .reg-title { font-size: 1.6rem; }
}
/* ==========================
   MCRU ita
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.ita-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Section Header --- */
.ita-main-header {
    text-align: center;
    margin-bottom: 30px;
}

.ita-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 20px;
    border-bottom: 3px solid #3598db;
    display: inline-block;
    padding-bottom: 10px;
}

/* --- Accordion Style --- */
.ita-accordion .accordion-item {
    border: 1px solid #eef2f5;
    margin-bottom: 15px;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.ita-accordion .accordion-button {
    background-color: #f8fbff;
    color: #003366;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 15px 20px;
    border: none;
    box-shadow: none;
}

.ita-accordion .accordion-button:not(.collapsed) {
    background-color: #003366;
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.ita-accordion .accordion-button:not(.collapsed)::after {
    filter: invert(1); /* เปลี่ยนสีลูกศรเป็นขาว */
}

.ita-accordion .accordion-body {
    background-color: #fff;
    padding: 25px;
}

/* --- ITA Card Design --- */
.ita-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    transition: all 0.3s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.ita-card:hover {
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.1);
    transform: translateY(-5px);
    border-color: #3598db;
}

.ita-card-header {
    background: linear-gradient(135deg, #003366 0%, #0055aa 100%);
    color: #fff;
    padding: 15px;
    display: flex;
    align-items: center;
}

.o-badge {
    background: #fff;
    color: #003366;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.o-title {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
}

.ita-card-body {
    padding: 20px;
    flex-grow: 1;
}

.ita-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ita-link-item {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    font-size: 0.95rem;
}

.ita-link-item:last-child { margin-bottom: 0; }

.link-icon {
    margin-right: 10px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ita-link-item a {
    color: #444;
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.5;
}

.ita-link-item a:hover {
    color: #3598db;
    text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .ita-title { font-size: 1.5rem; }
    .o-title { font-size: 1rem; }
}
/* ==========================
   MCRU open-data-edu
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.disclosure-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Section Header --- */
.disclosure-main-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.disclosure-title {
    color: #003366; /* สีน้ำเงินเข้ม มรภ. */
    font-size: 2rem;
    font-weight: 600;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db; /* สีฟ้า */
}

/* --- Tab Content --- */
.tab-content {
    background: #fff;
    padding: 20px;
    border: 1px solid #eef2f5;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

/* --- Accordion Style --- */
.accordion-item {
    border: 1px solid #eef2f5;
    border-radius: 8px !important;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.accordion-button {
    font-size: 1.1rem;
    font-weight: 500;
    color: #003366;
    background-color: #f8fbff;
    padding: 15px 20px;
}

.accordion-button:not(.collapsed) {
    color: #003366;
    background-color: #e3f2fd;
    box-shadow: none;
}

/* --- Data Item List (Card Layout) --- */
.data-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.data-item {
    background-color: #fff;
    border: 1px dashed #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.data-item:hover {
    background-color: #f9f9f9;
    border-color: #3598db;
    transform: translateX(5px);
}

.data-content {
    flex-grow: 1;
    padding-right: 15px;
}

.data-topic {
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
    font-size: 1rem;
}

.data-dept {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
}

.data-dept::before {
    content: '🏢';
    margin-right: 5px;
    font-size: 0.9rem;
}

.data-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 15px;
    background-color: #3598db;
    color: #fff !important;
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: background 0.3s;
    white-space: nowrap;
}

.data-link-btn:hover {
    background-color: #003366;
}

.data-icon { margin-right: 5px; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .data-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .data-link-btn {
        margin-top: 10px;
        width: 100%;
        justify-content: center;
    }
}
/* ==========================
   MCRU contact-information
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.contact-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Tab Design --- */
.contact-nav-tabs {
    border-bottom: 2px solid #003366;
    margin-bottom: 30px;
    gap: 5px;
    justify-content: center;
}

.contact-nav-tabs .nav-link {
    border: none;
    border-radius: 10px 10px 0 0;
    color: #666;
    background-color: #f4f4f4;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 12px 25px;
    transition: all 0.3s;
}

.contact-nav-tabs .nav-link:hover {
    background-color: #e3f2fd;
    color: #003366;
}

.contact-nav-tabs .nav-link.active {
    background-color: #003366 !important;
    color: #ffffff !important;
    border-color: #003366 !important;
}

/* --- Section Headers --- */
.contact-header {
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 3px solid #3598db;
    display: inline-block;
}

.contact-title {
    font-size: 1.5rem;
    color: #003366;
    font-weight: 600;
    margin: 0;
}

/* --- Info List Item --- */
.info-list { list-style: none; padding: 0; margin: 0; }
.info-item { display: flex; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 15px; }
.info-icon { width: 40px; height: 40px; background-color: #eef6ff; color: #003366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-right: 15px; flex-shrink: 0; }
.info-content { flex-grow: 1; }
.info-label { font-weight: 600; color: #003366; display: block; margin-bottom: 3px; }
.info-value { color: #555; }

/* --- Map & Image Cards --- */
.location-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.location-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

.card-media-box {
    position: relative;
    overflow: hidden;
    padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

.card-media-box iframe, 
.card-media-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.location-card:hover .card-media-box img { transform: scale(1.1); }

.card-body {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* จัดปุ่มให้อยู่ล่างสุดเสมอ */
    align-items: center;
}

.loc-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 5px;
    line-height: 1.4;
}

.loc-coords {
    font-size: 0.85rem;
    color: #777;
    background: #f8f9fa;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 15px;
}

/* --- New Buttons Style --- */
.btn-map-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background-color: #fff;
    color: #3598db;
    border: 1px solid #3598db;
    border-radius: 25px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
    margin-top: 5px;
    width: 100%;
    max-width: 200px;
}

.btn-map-action:hover {
    background-color: #3598db;
    color: #fff;
    box-shadow: 0 4px 10px rgba(53, 152, 219, 0.2);
}

.btn-icon-small { margin-right: 5px; }

/* Responsive iframe container (Main Map) */
.map-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.map-responsive iframe {
    left:0; top:0; height:100%; width:100%; position:absolute;
}

/* Responsive Grid Adjustments */
@media (max-width: 768px) {
    .contact-nav-tabs .nav-link { width: 100%; margin-bottom: 5px; border-radius: 8px; }
    .location-card { margin-bottom: 20px; }
}
/* ==========================
   MCRU feedback-complaints
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.complaint-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Navigation Pills (Tabs) --- */
.complaint-nav {
    border-bottom: 2px solid #eef2f5;
    margin-bottom: 30px;
    gap: 10px;
    padding-bottom: 15px;
    justify-content: center;
}

.complaint-nav .nav-link {
    border-radius: 50px;
    color: #666;
    font-weight: 500;
    padding: 10px 25px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    border: 1px solid #eef2f5;
    font-size: 0.95rem;
}

.complaint-nav .nav-link:hover {
    background-color: #e3f2fd;
    color: #003366;
    transform: translateY(-2px);
}

.complaint-nav .nav-link.active {
    background-color: #003366; /* สีน้ำเงินเข้ม */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.2);
    border-color: #003366;
}

/* --- Section Header --- */
.page-intro {
    text-align: center;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.page-title {
    color: #003366;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.page-desc {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

/* --- Contact Channel Card --- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.channel-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.channel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.1);
    border-color: #3598db;
}

.ch-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #3598db;
}

.ch-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
}

.ch-detail {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    flex-grow: 1; /* ดันเนื้อหาให้เต็มการ์ด */
}

.ch-link {
    color: #3598db;
    font-weight: 500;
    text-decoration: none;
}

/* --- System Access Card (แทน Iframe) --- */
.system-access-card {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    border: 2px dashed #3598db;
    border-radius: 15px;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.system-access-card:hover {
    background: #fff;
    border-color: #003366;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.1);
}

.sys-icon {
    font-size: 4rem;
    color: #003366;
    margin-bottom: 20px;
    display: block;
    transition: transform 0.3s;
}

.system-access-card:hover .sys-icon {
    transform: scale(1.1); /* Zoom Icon Effect */
}

.sys-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
}

.sys-desc {
    color: #666;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.btn-launch-system {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    background-color: #003366;
    color: #fff !important;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.3);
}

.btn-launch-system:hover {
    background-color: #3598db;
    transform: scale(1.05);
}

.btn-launch-system span { margin-right: 10px; }

/* --- Form Instruction Card --- */
.instruction-box {
    background-color: #f8fbff;
    border-left: 5px solid #003366;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ins-title {
    color: #003366;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.ins-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ins-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

.ins-num {
    background: #003366;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    font-size: 0.8rem;
    line-height: 24px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* --- Document List --- */
.doc-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.2s;
    text-decoration: none !important;
}

.doc-card:hover {
    background: #f9f9f9;
    border-left: 4px solid #3598db;
    transform: translateX(5px);
}

.doc-icon { font-size: 1.5rem; margin-right: 15px; color: #e74c3c; }
.doc-info { flex-grow: 1; }
.doc-name { font-weight: 500; color: #333; font-size: 1rem; }
.doc-date { font-size: 0.8rem; color: #888; }
.doc-dl-btn {
    background: #eef6ff; color: #3598db;
    padding: 5px 12px; border-radius: 15px; font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .complaint-nav { flex-direction: column; }
    .complaint-nav .nav-link { width: 100%; text-align: center; }
}
/* ==========================
   MCRU phone-directory
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.phone-directory-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Main Header Style --- */
.phone-main-header {
    text-align: center;
    margin-bottom: 40px;
    background: #003366; /* สีพื้นเรียบๆ แทน Gradient */
    color: #fff;
    padding: 30px;
    border-radius: 10px;
}

.phone-main-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.central-contact-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.central-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.central-badge a { color: #fff; text-decoration: none; font-weight: 500; }
.central-badge i, .c-icon { margin-right: 8px; font-size: 1.2rem; }

/* --- Grid System --- */
.phone-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.phone-col {
    padding: 10px;
    width: 100%;
}

/* --- Card Design (ลดเอฟเฟกต์) --- */
.dept-phone-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* เปลี่ยน Transition ให้เร็วและเรียบขึ้น */
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; 
}

/* Hover Effect: แค่ขยับขึ้นนิดเดียวและเปลี่ยนสีขอบ */
.dept-phone-card:hover {
    transform: translateY(-3px); /* ลอยขึ้นนิดเดียว */
    box-shadow: 0 8px 15px rgba(0, 51, 102, 0.08); /* เงาจางๆ */
    border-color: #3598db;
}

/* Top Color Bar (Fixed) */
.dept-phone-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #003366;
}

.dept-phone-card:hover::before {
    background: #3598db; /* เปลี่ยนสีแถบบนเมื่อชี้ */
}

/* Icon Circle (No Rotation) */
.dept-icon-circle {
    width: 50px;
    height: 50px;
    background-color: #f4f6f9;
    color: #003366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
    transition: background-color 0.3s, color 0.3s;
}

.dept-phone-card:hover .dept-icon-circle {
    background-color: #003366;
    color: #fff;
    /* ตัด transform rotate ออก */
}

.dept-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    line-height: 1.4;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dept-number {
    font-size: 1rem;
    color: #555;
    font-weight: 500;
    background: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid #ddd;
    width: 100%;
}

.dept-phone-card:hover .dept-number {
    border-color: #3598db;
    color: #3598db;
}

.dept-number .p-icon { margin-right: 5px; }

/* --- Responsive Breakpoints --- */
@media (min-width: 768px) {
    .phone-col { width: 50%; }
}

@media (min-width: 992px) {
    .phone-col { width: 33.33%; }
}

@media (max-width: 768px) {
    .phone-main-header { padding: 20px; }
    .central-contact-list { flex-direction: column; gap: 10px; }
    .phone-grid { margin: 0; }
    .phone-col { padding: 0 0 15px 0; }
    .dept-phone-card { flex-direction: row; justify-content: space-between; padding: 15px; text-align: left; }
    .dept-icon-circle { margin-bottom: 0; margin-right: 15px; width: 40px; height: 40px; font-size: 1.2rem; }
    .dept-title { margin-bottom: 0; font-size: 1rem; }
    .dept-number { width: auto; border: none; padding: 0; text-align: right; color: #3598db; font-weight: 600; }
    .p-icon { display: none; } /* ซ่อนไอคอนโทรศัพท์ในมือถือเพื่อประหยัดที่ */
    
    /* จัด layout ในการ์ดมือถือใหม่ */
    .dept-phone-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        align-items: center;
    }
}
/* ==========================
   MCRU contact-all
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.internal-contact-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Main Header --- */
.main-contact-header {
    background: linear-gradient(135deg, #003366 0%, #0055aa 100%);
    color: #fff;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.2);
}

.main-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.main-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    font-size: 1rem;
}

.info-pill {
    background: rgba(255,255,255,0.15);
    padding: 8px 15px;
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.info-pill a { color: #fff; text-decoration: none; }
.info-pill i { margin-right: 5px; }

/* --- Section Category Header --- */
.cat-header {
    display: flex;
    align-items: center;
    margin: 30px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 3px solid #3598db;
}

.cat-icon {
    background-color: #003366;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 15px;
}

.cat-title {
    font-size: 1.5rem;
    color: #003366;
    font-weight: 600;
    margin: 0;
}

/* --- Department Card --- */
.dept-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    padding: 25px;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dept-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 51, 102, 0.1);
    border-color: #3598db;
}

/* Decoration Top Bar */
.dept-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #eef2f5;
    transition: background 0.3s;
}

.dept-card:hover::before {
    background: #3598db;
}

.dept-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 15px;
    min-height: 3.5rem; /* จัดความสูงหัวข้อให้เท่ากัน */
    display: flex;
    align-items: center;
}

.dept-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.dept-detail-item {
    display: flex;
    margin-bottom: 8px;
    font-size: 0.95rem;
    word-break: break-word;
}

.icon-label {
    margin-right: 10px;
    font-size: 1.1rem;
    min-width: 25px;
    text-align: center;
}

.dept-link {
    color: #3598db;
    text-decoration: none;
    transition: color 0.2s;
}

.dept-link:hover {
    color: #003366;
    text-decoration: underline;
}

/* --- Social Icons Area --- */
.social-links {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
    display: flex;
    gap: 10px;
}

.social-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none !important;
    font-size: 1rem;
    transition: transform 0.2s;
}

.social-btn:hover { transform: scale(1.1); }
.btn-web { background-color: #3598db; }
.btn-fb { background-color: #1877f2; }
.btn-yt { background-color: #ff0000; }

/* --- Responsive Grid --- */
/* Mobile (Default): col-12 */
/* Tablet: col-md-6 */
/* Desktop: col-lg-4 */

@media (max-width: 768px) {
    .dept-card { margin-bottom: 20px; }
    .main-info { flex-direction: column; gap: 10px; }
}
/* --- ปรับแก้ปุ่ม Social --- */
.social-links {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-size: 1.1rem;
    font-weight: 600; /* เพิ่มความหนาตัวอักษร */
    transition: all 0.3s ease;
}

/* ปุ่ม Website (สีฟ้าทึบ ตัวขาว) */
.btn-web { 
    background-color: #3598db; 
    color: #fff !important; 
    border: 2px solid #3598db;
}
.btn-web:hover { 
    background-color: #003366; 
    border-color: #003366;
    transform: translateY(-3px);
}

/* ปุ่ม Facebook (แก้ไข: พื้นขาว ตัวน้ำเงิน มีขอบ) */
.btn-fb { 
    background-color: #fff; 
    color: #1877f2 !important; /* สีน้ำเงินเฟสบุ๊ค */
    border: 2px solid #1877f2; /* ขอบสีน้ำเงิน */
}

/* Effect เมื่อเอาเมาส์ชี้ Facebook (สลับเป็นพื้นน้ำเงิน ตัวขาว) */
.btn-fb:hover { 
    background-color: #1877f2; 
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(24, 119, 242, 0.3);
    transform: translateY(-3px);
}

/* ปุ่ม YouTube (สีแดง) */
.btn-yt { 
    background-color: #ff0000; 
    color: #fff !important;
    border: 2px solid #ff0000;
}
.btn-yt:hover {
    background-color: #cc0000;
    border-color: #cc0000;
    transform: translateY(-3px);
}
/* --- เพิ่มเติมสำหรับส่วนที่อยู่ --- */
.header-address-box {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* เส้นแบ่งสีขาวจางๆ */
    color: #fff;
    font-size: 1rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.address-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* ปรับมือถือให้ที่อยู่เรียงลงมาสวยงาม */
@media (max-width: 768px) {
    .header-address-box {
        flex-direction: column;
        text-align: center;
        gap: 5px;
   
    }

}
/* ==========================
   MCRU appointment แก้ไขสีตัวอักษร Tab 
   ========================== */
/* --- แก้ไขสีตัวอักษร Tab --- */

/* 1. สถานะปกติ (ยังไม่ถูกเลือก) */
.mcru-nav-tabs .nav-link {
    color: #555555 !important;       /* สีตัวอักษรเทาเข้ม */
    background-color: #f4f4f4 !important; /* สีพื้นหลังเทาอ่อน */
    border: 1px solid #ddd !important;
    font-weight: 500;
}

/* 2. สถานะเมื่อเอาเมาส์ชี้ (Hover) */
.mcru-nav-tabs .nav-link:hover {
    color: #003366 !important;       /* สีตัวอักษรน้ำเงิน */
    background-color: #e9ecef !important; /* สีพื้นหลังเข้มขึ้นนิดนึง */
}

/* 3. สถานะถูกเลือก (Active) */
.mcru-nav-tabs .nav-link.active {
    color: #ffffff !important;       /* สีตัวอักษรขาว (สำคัญ) */
    background-color: #003366 !important; /* สีพื้นหลังน้ำเงินเข้ม */
    border-color: #003366 !important;
}

/* ==========================
   MCRU hr-plan-report
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.hr-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 20px 0;
}

/* --- Section Header --- */
.hr-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.hr-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366; /* สีน้ำเงินเข้ม */
    margin-bottom: 10px;
}

.hr-subtitle {
    font-size: 1rem;
    color: #666;
}

/* --- Tab Styling --- */
.hr-nav-tabs {
    justify-content: center;
    border-bottom: none;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}

.hr-nav-tabs .nav-link {
    border: 1px solid #eef2f5;
    border-radius: 50px;
    color: #666;
    font-weight: 500;
    padding: 10px 30px;
    background-color: #fff;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.hr-nav-tabs .nav-link:hover {
    background-color: #eef6ff;
    color: #003366;
    transform: translateY(-2px);
}

.hr-nav-tabs .nav-link.active {
    background-color: #003366;
    color: #fff;
    border-color: #003366;
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.2);
}

/* --- Document Card Grid --- */
.doc-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

/* Hover Effect: Zoom & Lift */
.doc-card:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* Top Bar Decoration */
.doc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #3598db, #003366);
}

.doc-icon {
    font-size: 3rem;
    color: #003366;
    margin-bottom: 20px;
    background: #f4f8fb;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.doc-card:hover .doc-icon {
    transform: rotate(15deg) scale(1.1);
    background: #e3f2fd;
    color: #3598db;
}

.doc-year {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.doc-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.4;
    flex-grow: 1; /* ดันปุ่มลงล่างสุด */
}

/* Button */
.btn-doc-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    background-color: #fff;
    color: #3598db;
    border: 2px solid #3598db;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.3s;
    width: 100%;
}

.btn-doc-download:hover {
    background-color: #3598db;
    color: #fff;
}

.btn-doc-download i, .btn-icon { margin-right: 8px; }

/* Responsive Settings */
/* Mobile (Default): col-12 */
/* Tablet: col-md-6 (2 columns) */
/* Desktop: col-lg-4 (3 columns) */
@media (max-width: 768px) {
    .hr-nav-tabs .nav-link { width: 100%; text-align: center; }
}
/* --- แก้ไขปุ่มกดให้คลิกได้ (Fix Clickable Issue) --- */

/* 1. ดันปุ่มให้ลอยขึ้นมาอยู่ชั้นบนสุด */
.btn-doc-download {
    position: relative !important;
    z-index: 10 !important; /* ค่าสูงเพื่อให้ลอยเหนือเส้นตกแต่ง */
    cursor: pointer;
}

/* 2. สั่งให้เส้นตกแต่ง หรือเลเยอร์แฝง ไม่ขวางการคลิก */
.doc-card::before,
.doc-card::after,
.doc-icon, 
.doc-year, 
.doc-name {
    pointer-events: none; /* สั่งให้เมาส์คลิกทะลุส่วนประกอบเหล่านี้ */
}

/* 3. ทำให้ตัวการ์ดคลิกทะลุได้ แต่ให้ปุ่มรับคลิกได้ */
/* (ใส่กันเหนียวไว้ กรณีการ์ดมี Link ซ้อน) */
.doc-card {
    /* pointer-events: none;  <-- ห้ามใส่บรรทัดนี้ถ้าต้องการให้ Hover ทำงาน */
    position: relative;
    z-index: 1;
}

/* ==========================
   MCRU plan-report
   ========================== */
/* --- Button Group Navigation Style --- */
.mcru-btn-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.mcru-btn-nav {
    border: 2px solid #e0e0e0;
    background-color: #fff;
    color: #555;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.mcru-btn-nav:hover {
    background-color: #f0f7ff;
    color: #003366;
    transform: translateY(-2px);
    border-color: #3598db;
}

.mcru-btn-nav.active {
    background-color: #003366;
    color: #fff;
    border-color: #003366;
    box-shadow: 0 6px 12px rgba(0, 51, 102, 0.2);
}

.nav-icon { margin-right: 10px; font-size: 1.2rem; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .mcru-btn-group { flex-direction: column; width: 100%; }
    .mcru-btn-nav { width: 100%; justify-content: center; }
}
/* ==========================
   MCRU faculty
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.faculty-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.page-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-title {
    color: #003366;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #3598db, #003366);
    border-radius: 2px;
}

/* --- Grid System --- */
.faculty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
    gap: 30px;
}

/* --- Card Design --- */
.faculty-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    border: 1px solid #eef2f5;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.faculty-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

.card-img-box {
    overflow: hidden;
    position: relative;
    /* Aspect Ratio 4:5 (ตามภาพต้นฉบับ) หรือปรับเป็น 16:9 ถ้าต้องการ */
    padding-top: 125%; 
}

.card-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.faculty-card:hover .card-img-box img {
    transform: scale(1.1); /* Zoom Effect */
}

.card-content {
    padding: 25px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.faculty-name-th {
    font-size: 1.25rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 5px;
    line-height: 1.4;
}

.faculty-name-en {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
    font-weight: 300;
}

/* Button Style */
.btn-read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border: 2px solid #3598db;
    color: #3598db;
    background: transparent;
    border-radius: 30px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s;
    margin-top: auto;
}

.btn-read-more:hover {
    background: #3598db;
    color: #fff;
    box-shadow: 0 5px 15px rgba(53, 152, 219, 0.3);
}

.btn-icon { margin-left: 8px; transition: transform 0.3s; }
.btn-read-more:hover .btn-icon { transform: translateX(5px); }

/* --- Responsive --- */
/* Tablet (2 columns) */
@media (max-width: 992px) {
    .faculty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (1 column) */
@media (max-width: 576px) {
    .faculty-grid {
        grid-template-columns: 1fr;
    }
    .page-title { font-size: 1.6rem; }
}
/* ==========================
   MCRU institution
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.institute-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.main-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.main-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 15px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db;
}

/* --- Category Title --- */
.cat-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #003366;
    margin: 40px 0 20px 0;
    padding-left: 15px;
    border-left: 5px solid #3598db;
    display: flex;
    align-items: center;
}

.cat-icon { margin-right: 10px; font-size: 1.5rem; }

/* --- Grid System --- */
.inst-grid {
    display: grid;
    /* Desktop: 5 Columns */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* --- Card Design --- */
.inst-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 5px 10px rgba(0,0,0,0.02);
}

.inst-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

.card-img-box {
    position: relative;
    overflow: hidden;
    padding-top: 125%; /* Aspect Ratio 4:5 */
}

.card-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.inst-card:hover .card-img-box img {
    transform: scale(1.1); /* Zoom Effect */
}

.card-body {
    padding: 15px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.inst-name-th {
    font-size: 1rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 5px;
    line-height: 1.3;
}

.inst-name-en {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 15px;
    font-weight: 300;
    line-height: 1.2;
}

.btn-visit {
    display: inline-block;
    padding: 6px 15px;
    border: 1px solid #3598db;
    color: #3598db;
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: all 0.3s;
    margin-top: auto;
}

.btn-visit:hover {
    background: #3598db;
    color: #fff;
}

/* --- Responsive --- */
/* Tablet (3 Columns) */
@media (max-width: 992px) {
    .inst-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile (2 Columns) - ปรับเป็น 2 คอลัมน์เพื่อให้ดูง่ายขึ้นบนมือถือ */
@media (max-width: 576px) {
    .inst-grid { grid-template-columns: repeat(2, 1fr); }
    .inst-name-th { font-size: 0.9rem; }
    .inst-name-en { display: none; } /* ซ่อนภาษาอังกฤษในมือถือเพื่อประหยัดที่ */
}
/* ==========================
   MCRU student-service
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.student-service-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.std-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.std-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db;
}

.std-subtitle {
    font-size: 1.1rem;
    color: #666;
    font-weight: 300;
}

/* --- Category Divider --- */
.cat-separator {
    display: flex;
    align-items: center;
    margin: 50px 0 30px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f5;
}

.cat-label {
    background: #003366;
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.cat-label i, .cat-icon { margin-right: 10px; }

/* --- Grid System --- */
.std-grid {
    display: grid;
    /* Desktop: 5 Columns (ตามโจทย์) */
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px;
}

/* --- Service Card Design --- */
.std-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.02);
}

.std-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

.std-img-box {
    position: relative;
    overflow: hidden;
    /* Aspect Ratio สำหรับรูปภาพ */
    padding-top: 100%; 
    background: #f9f9f9;
}

.std-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* เปลี่ยนเป็น cover หากต้องการให้ภาพเต็มกรอบตัดส่วนเกิน */
    padding: 10px; /* เว้นขอบนิดหน่อย */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.std-card:hover .std-img-box img {
    transform: scale(1.15); /* Zoom Effect */
}

.std-card-body {
    padding: 15px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.std-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    line-height: 1.4;
    min-height: 2.8em; /* จัดบรรทัดให้เท่ากัน */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Button Style */
.btn-std-view {
    display: block;
    padding: 6px 0;
    background-color: #f0f7ff;
    color: #3598db;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.btn-std-view:hover {
    background-color: #3598db;
    color: #fff;
}

/* --- Contact Support Section --- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.contact-card {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    border: 1px dashed #3598db;
    transition: all 0.3s;
}

.contact-card:hover {
    background: #f0f7ff;
    border-style: solid;
}

.contact-img {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-img img { width: 100%; height: 100%; object-fit: cover; }

.contact-title { color: #003366; font-weight: 600; margin-bottom: 10px; }
.contact-desc { font-size: 0.9rem; color: #555; }
.contact-desc a { color: #3598db; text-decoration: none; word-break: break-word;}

/* --- Responsive Breakpoints --- */
/* Tablet (3 Columns) */
@media (max-width: 992px) {
    .std-grid { grid-template-columns: repeat(3, 1fr); }
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (2 Columns) */
@media (max-width: 576px) {
    .std-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .std-name { font-size: 0.85rem; min-height: auto; }
    .cat-label { font-size: 1rem; width: 100%; justify-content: center; }
}
/* ==========================
   MCRU staff-service
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.staff-service-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.staff-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.staff-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db;
}

.staff-desc {
    font-size: 1rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* --- Category Label --- */
.cat-separator {
    display: flex;
    align-items: center;
    margin: 50px 0 25px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f5;
}

.cat-label {
    background: linear-gradient(90deg, #003366, #0055aa);
    color: #fff;
    padding: 8px 25px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 51, 102, 0.2);
}

.cat-label i, .cat-icon { margin-right: 10px; }

/* --- Grid System --- */
.staff-grid {
    display: grid;
    /* Desktop: 5 Columns */
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px;
}

/* --- Service Card Design --- */
.staff-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.02);
}

.staff-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

.staff-img-box {
    position: relative;
    overflow: hidden;
    padding-top: 100%; /* สัดส่วนภาพ 1:1 */
    background: #f9f9f9;
}

.staff-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* แสดงภาพเต็มไม่โดนตัด */
    padding: 15px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.staff-card:hover .staff-img-box img {
    transform: scale(1.15); /* Effect Zoom */
}

.staff-card-body {
    padding: 15px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.staff-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    line-height: 1.4;
    min-height: 2.8em; /* จัดความสูงบรรทัดชื่อให้เท่ากัน */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Button */
.btn-staff-view {
    display: block;
    padding: 6px 0;
    background-color: #ffff;
    color: #3598db;
    border: 1px solid #3598db;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s;
}

.btn-staff-view:hover {
    background-color: #3598db;
    color: #fff;
}

/* --- Contact Section --- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns for Contact */
    gap: 30px;
}

.contact-card {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    border: 1px dashed #ccc;
    transition: all 0.3s;
}

.contact-card:hover {
    border-color: #3598db;
    background: #f8fbff;
}

.contact-img {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-img img { width: 100%; height: 100%; object-fit: cover; }

.contact-title { color: #003366; font-weight: 600; margin-bottom: 10px; font-size: 1.1rem;}
.contact-dept { font-weight: 600; color: #333; margin-bottom: 5px; }
.contact-info { font-size: 0.9rem; color: #555; line-height: 1.6; }
.contact-info a { color: #3598db; text-decoration: none; }

/* --- Responsive Breakpoints --- */
/* Tablet (3 Columns) */
@media (max-width: 992px) {
    .staff-grid { grid-template-columns: repeat(3, 1fr); }
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (2 Columns) */
@media (max-width: 576px) {
    .staff-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .staff-name { font-size: 0.85rem; min-height: auto; }
    .cat-label { width: 100%; justify-content: center; font-size: 1rem; }
}
/* ==========================
   MCRU สมัครเรียน Admission
   ========================== */
/* --- CSS ปุ่ม MCRU ฉบับกะทัดรัด (Compact) --- */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500&display=swap');

/* Animation แสงวิบวับ */
@keyframes shine-compact {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* --- ส่วนนี้สำหรับ PC (จอใหญ่) เหมือนเดิม --- */
.mcru-wrapper-compact {
    display: flex;
    justify-content: flex-end; /* ชิดขวา */
    width: 100%;
    padding: 5px 0;
}

/* --- แก้ไขส่วนนี้: สำหรับ Tablet และ Mobile (จอเล็กกว่า 1024px) --- */
@media (max-width: 1024px) {
    .mcru-wrapper-compact {
        justify-content: center;
        width: 100%;
    }

    /* เพิ่มคำสั่งนี้: บังคับให้ปุ่มขยายเต็ม */
    .btn-mcru-compact {
        width: 100% !important;   /* ขยายเต็มพื้นที่ */
        display: flex !important; /* จัดแบบ Flex */
        justify-content: center;  /* เนื้อหาข้างในอยู่ตรงกลาง */
        margin-bottom: 10px;      /* เว้นระยะห่างด้านล่างนิดหน่อย */
    }
}
.btn-mcru-compact {
    min-width: 200px; /* ปรับเลขนี้ถ้าอยากให้ยาวกว่านี้ (เช่น 250px) */
    justify-content: center; /* สั่งให้ไอคอนและข้อความอยู่ตรงกลางเสมอ */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* ลดระยะห่างระหว่างไอคอนกับตัวหนังสือ */
    
    /* สีพื้นหลัง */
    background: linear-gradient(135deg, #002d72 0%, #007bff 100%);
    
    /* ปรับขนาดให้เล็กและกระชับ */
    padding: 8px 15px; 
    border-radius: 30px;
    
    color: #fff !important;
    text-decoration: none !important;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0, 45, 114, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.2);
    
    /* สำคัญ: เพื่อให้ไม่ล้นกรอบ */
    max-width: 100%; 
    box-sizing: border-box;
}

/* แสงวิบวับ */
.btn-mcru-compact::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shine-compact 4s infinite;
}

.mcru-text-box-compact {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.1;
    z-index: 2;
}

.mcru-head-compact {
    font-family: 'Kanit', sans-serif;
    font-size: 1.2rem; /* ลดขนาดหัวข้อ (ประมาณ 15px) */
    font-weight: 500;
}

.mcru-sub-compact {
    font-family: 'Kanit', sans-serif;
    font-size: 0.8rem; /* ลดขนาดตัวรอง */
    font-weight: 300;
    opacity: 0.9;
}

.mcru-svg-compact {
    width: 24px; /* ลดขนาดไอคอน */
    height: 24px;
    fill: #fff;
    z-index: 2;
    transition: transform 0.3s ease;
    flex-shrink: 0; /* ป้องกันไอคอนบี้ */
}

/* Hover Effect */
.btn-mcru-compact:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 80, 180, 0.5);
}

.btn-mcru-compact:hover .mcru-svg-compact {
    transform: rotate(-10deg);
}

/* Responsive มือถือ */
@media (max-width: 576px) {
    .btn-mcru-compact {
        width: 100%; /* มือถือให้เต็มจอ */
        justify-content: center;
        padding: 10px 15px;
    }
}
/* ==========================
   MCRU 5 เมนูู Modern Grid Layout
   ========================== */
/* --- เริ่มต้น CSS เมนู MCRU Grid 5 ปุ่ม (แถวเดียว) --- */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.mcru-grid-container {
    display: grid;
    /* จุดสำคัญ: เปลี่ยนเลข 4 เป็น 5 เพื่อให้เรียง 5 กล่องใน 1 แถว */
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px; /* ระยะห่างระหว่างกล่อง */
    padding: 20px 0;
    font-family: 'Kanit', sans-serif;
    box-sizing: border-box;
    width: 100%;
}

/* ตัวการ์ด (Card) */
.mcru-card-item {
    background: #ffffff;
    border-radius: 15px;
    padding: 25px 10px; /* ลดขอบซ้ายขวาลงนิดหน่อย เพื่อให้ 5 กล่องไม่อึดอัด */
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(0, 45, 114, 0.08);
    border: 1px solid rgba(0, 123, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 220px; /* กำหนดความสูงขั้นต่ำให้เท่ากันสวยงาม */
    justify-content: flex-start; /* จัดเนื้อหาเริ่มจากด้านบน */
}

/* แถบสีด้านบน */
.mcru-card-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #002d72, #007bff);
    opacity: 0;
    transition: opacity 0.3s;
}

/* ไอคอนวงกลม */
.mcru-card-icon {
    width: 60px; /* ปรับขนาดเล็กลงนิดนึงให้สมดุลกับ 5 คอลัมน์ */
    height: 60px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.mcru-svg-main {
    width: 28px;
    height: 28px;
    fill: #002d72;
    transition: all 0.4s ease;
}

/* ข้อความ */
.mcru-card-title {
    font-size: 1.1rem; /* ลดขนาดฟอนต์ลงเล็กน้อยเพื่อไม่ให้ตกบรรทัดบ่อย */
    font-weight: 600;
    color: #002d72;
    margin-bottom: 5px;
    line-height: 1.3;
}

.mcru-card-desc {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 300;
    line-height: 1.4;
}

/* --- Hover Effects --- */
.mcru-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 45, 114, 0.15);
}
.mcru-card-item:hover::before { opacity: 1; }
.mcru-card-item:hover .mcru-card-icon {
    background: linear-gradient(135deg, #002d72 0%, #007bff 100%);
    transform: rotate(-5deg) scale(1.1);
}
.mcru-card-item:hover .mcru-svg-main { fill: #ffffff; }

/* --- Responsive (ปรับการแสดงผลตามหน้าจอ) --- */

/* 1. หน้าจอ Notebook/Laptop เล็ก (กว้างไม่เกิน 1200px) */
/* ถ้าจอเริ่มแคบ ให้ปรับเหลือ 3 คอลัมน์ เพื่อไม่ให้ปุ่มเบียดกันเกินไป */
@media (max-width: 1200px) {
    .mcru-grid-container {
        grid-template-columns: repeat(3, 1fr); /* แถวบน 3, แถวล่าง 2 */
        gap: 15px;
    }
}

/* 2. แท็บเล็ต (Tablet) */
@media (max-width: 992px) {
    .mcru-grid-container {
        grid-template-columns: repeat(2, 1fr); /* แถวละ 2 กล่อง */
    }
}

/* 3. มือถือ (Mobile) */
@media (max-width: 576px) {
    .mcru-grid-container {
        grid-template-columns: 1fr; /* แถวละ 1 กล่องเต็มจอ */
        padding: 10px 0;
    }
    .mcru-card-item {
        flex-direction: row; /* จัดแนวนอนให้ประหยัดที่ */
        text-align: left;
        padding: 15px;
        min-height: auto;
        align-items: center;
    }
    .mcru-card-icon {
        margin-bottom: 0;
        margin-right: 15px;
        width: 50px; height: 50px;
    }
    .mcru-card-title { font-size: 1rem; }
}
/* ==========================
   MCRU บังคับจัดรูปภาพบทความให้อยู่ตรงกลาง (ทั้งรูปหน้าแรกและเนื้อหาใน)
   ========================== */
/* --- บังคับจัดรูปภาพบทความให้อยู่ตรงกลาง (ทั้งรูปหน้าแรกและเนื้อหาใน) --- */

/* 1. จัดการกล่องที่หุ้มรูป (Wrapper) ให้เลิกชิดซ้าย */
.article-intro .intro-image, 
.article-details .article-full-image {
    float: none !important;        /* ยกเลิกคำสั่งลอยซ้าย */
    text-align: center !important; /* จัดของข้างในให้อยู่ตรงกลาง */
    width: 100% !important;        /* ขยายกล่องให้กว้างเต็มจอ */
    margin: 0 0 20px 0 !important; /* จัดระยะห่าง */
    display: block;
}

/* 2. จัดการตัวรูปภาพให้แสดงผลถูกต้อง */
.article-intro .intro-image img, 
.article-details .article-full-image img {
    display: inline-block !important; /* ให้รูปเป็น Block ที่จัดกลางได้ */
    margin: 0 auto !important;        /* จัดกึ่งกลาง */
    max-width: 100%;                  /* บังคับไม่ให้รูปเกินจอ (Responsive) */
    height: auto;
}

/* ==========================
   MCRU ข่าวกิจรรม
   ========================== */
/* กำหนด Font */
.kanit-font {
    font-family: 'Kanit', sans-serif;
}

/* จัดการ Card รูปภาพ */
.news-image-card {
    position: relative;
    cursor: pointer;
    height: 250px; /* กำหนดความสูงให้เท่ากันทุกรูป */
}

/* จัดการรูปภาพและการขยาย (Zoom Effect) */
.news-image-card img.zoom-effect {
    object-fit: cover; /* ตัดภาพให้พอดีกรอบโดยไม่เสียสัดส่วน */
    height: 100%;
    width: 100%;
    transition: transform 0.4s ease, filter 0.4s ease; /* เอฟเฟกต์นุ่มนวล */
}

/* เมื่อเมาส์ชี้ */
.news-image-card:hover img.zoom-effect {
    transform: scale(1.1); /* ขยายภาพ 10% */
    filter: brightness(1.05); /* เพิ่มความสว่างเล็กน้อย */
}

/* ปรับแต่ง Quote คำพูด */
blockquote {
    background-color: #f8f9fa;
    border-left: 5px solid #0d6efd; /* สีน้ำเงิน Theme มหาลัย */
}
/* ==========================
   MCRU ข่าวประชาสัมพันธ์ที่มีรูปประกอบ 1 รูป
   ========================== */
/* ใช้ Font Kanit */
.kanit-font {
    font-family: 'Kanit', sans-serif;
}

/* เอฟเฟกต์รูปภาพ */
.pr-image-wrapper img.hover-zoom {
    transition: transform 0.3s ease;
}

.pr-image-wrapper:hover img.hover-zoom {
    transform: scale(1.03); /* ขยายรูปนิดหน่อยเมื่อเอาเมาส์ชี้ */
}

/* ปรับระยะห่างระหว่างบรรทัดให้อ่านง่าย */
.news-pr-container p, .news-pr-container li {
    line-height: 1.6;
}
/* ==========================
   MCRU footer
   ========================== */
/* แก้ไขสีข้อความในรายการติดต่อ (Contact Info) โดยตรง */
ul.sp-contact-info li,
ul.sp-contact-info span {
    color: #ffffff !important;
    opacity: 1 !important; /* แก้เผื่อกรณีถูกสั่งให้จางลง */
}

/* แก้ไขสีลิงก์ในรายการติดต่อ */
ul.sp-contact-info li a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* แก้ไขสีไอคอนในรายการติดต่อ */
ul.sp-contact-info li i, 
ul.sp-contact-info li .fa {
    color: #ffffff !important;
}
/* ==========================
   MCRU university-council
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.council-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
    background-color: #f9fbfd;
    
    /* --- ป้องกันการเลือก (Selection) ทั้งระบบ --- */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard */
    
    /* --- ป้องกันเมนูแตะค้าง (Long Press Menu) บน iOS/Android --- */
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
}

/* --- Header Section --- */
.council-header {
    text-align: center;
    margin-bottom: 50px;
}

.council-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 15px;
    display: inline-block;
    padding-bottom: 15px;
    border-bottom: 4px solid #3598db;
}

/* --- President Section (นายกสภาฯ) --- */
.president-section {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    padding: 0 15px;
}

.president-card {
    max-width: 350px; /* ขยายการ์ดนายกให้ใหญ่กว่าปกติเล็กน้อย */
    width: 100%;
}

/* --- Grid System (กรรมการท่านอื่น) --- */
.council-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 0 15px;
}

/* --- Card Design --- */
.council-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    position: relative;
    
    /* ป้องกันการแตะที่ตัวการ์ดเพื่อเรียกเมนู */
    -webkit-touch-callout: none !important;
}

.council-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

.council-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #003366, #3598db);
    z-index: 2;
}

/* --- Image Box & Protection --- */
.img-box {
    width: 100%;
    padding-top: 125%; /* Aspect Ratio 4:5 */
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
}

.protected-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    
    /* 1. ทำให้เมาส์/นิ้ว ทะลุผ่านรูปไปเลย (Ghost Image) */
    pointer-events: none !important; 
    
    /* 2. ป้องกันการลากรูป */
    -webkit-user-drag: none;
    user-drag: none;
}

/* 3. แผ่นใส (Shield) รับสัมผัสแทนรูป */
.img-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* สีใส */
    z-index: 20; /* อยู่บนสุด */
    
    /* สำคัญ: ต้องเปิดให้รับสัมผัสได้ เพื่อกันไม่ให้โดนรูป */
    pointer-events: auto !important; 
    
    /* ป้องกันเมนูคลิกขวา/แตะค้างบนแผ่นใส */
    -webkit-touch-callout: none !important;
}

/* Zoom Effect */
.council-card:hover .protected-img {
    transform: scale(1.1); 
}

/* --- Content --- */
.card-content {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* อนุญาตให้เลือกข้อความได้ */
    -webkit-user-select: text;
    user-select: text;
    cursor: auto;
}

.c-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 8px;
    line-height: 1.4;
}

.c-position {
    font-size: 0.95rem;
    color: #3598db;
    font-weight: 500;
    margin-bottom: 15px;
    min-height: 3em;
}

.c-contact {
    font-size: 0.85rem;
    color: #777;
    background: #f8fbff;
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed #dae1e7;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .council-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .council-grid { grid-template-columns: 1fr; }
}
/* ==========================
   MCRU annual-report
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.report-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Main Header --- */
.report-header {
    text-align: center;
    margin-bottom: 30px;
}

.report-main-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db;
}

/* --- Button Navigation (ส่วนที่เพิ่มใหม่) --- */
.report-nav-pills {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.report-btn-tab {
    background-color: #fff;
    color: #003366;
    border: 2px solid #eef2f5;
    padding: 12px 35px;
    border-radius: 50px; /* ปุ่มทรงแคปซูล */
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    outline: none !important;
}

.report-btn-tab:hover {
    border-color: #3598db;
    transform: translateY(-2px);
    color: #3598db;
}

/* สถานะเมื่อปุ่มถูกกดเลือก (Active) */
.report-btn-tab.active {
    background: linear-gradient(90deg, #003366, #0055aa);
    color: #fff;
    border-color: #003366;
    box-shadow: 0 8px 15px rgba(0, 51, 102, 0.2);
}

.btn-icon { margin-right: 8px; font-size: 1.2rem; }

/* --- Grid System --- */
.doc-grid {
    display: grid;
    /* Desktop: 3 Columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* --- Card Design (ดีไซน์เดิม) --- */
.doc-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 25px;
    height: 100%;
    box-shadow: 0 5px 10px rgba(0,0,0,0.02);
    position: relative;
    text-decoration: none !important;
}

.doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

.doc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #3598db;
    transition: height 0.3s;
}

.doc-card:hover::before {
    height: 100%;
    opacity: 0.05;
    background: #003366;
}

.icon-box {
    width: 70px;
    height: 70px;
    background-color: #f4f8fb;
    color: #003366;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 15px;
    transition: transform 0.3s;
    z-index: 2;
}

.doc-card:hover .icon-box {
    transform: scale(1.15);
    background-color: #003366;
    color: #fff;
}

.doc-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    z-index: 2;
    line-height: 1.4;
}

.btn-download {
    padding: 8px 25px;
    border: 1px solid #3598db;
    color: #3598db;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
    z-index: 2;
    margin-top: auto;
}

.doc-card:hover .btn-download {
    background: #3598db;
    color: #fff;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .doc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .doc-grid { grid-template-columns: 1fr; }
    .report-nav-pills { flex-direction: column; width: 100%; }
    .report-btn-tab { width: 100%; text-align: center; }
}
/* ==========================
   MCRU interested
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.admission-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.adm-section-header {
    display: flex;
    align-items: center;
    margin: 40px 0 25px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef2f5;
}

.adm-section-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #003366;
    margin: 0;
}

.adm-icon {
    margin-right: 15px;
    font-size: 1.8rem;
    background: #e6f0fa;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #003366;
}

/* --- Grid System --- */
.adm-grid {
    display: grid;
    /* Desktop: 3 คอลัมน์ */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Grid สำหรับ 2 รายการ (จัดกึ่งกลาง) */
.adm-grid.two-cols {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px; /* จำกัดความกว้างให้ดูสวยงาม */
    margin: 0 auto;
}

/* --- Card Design --- */
.adm-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
}

.adm-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* Image Box (จุดที่แก้ไข) */
.adm-img-box {
    overflow: hidden;
    position: relative;
    /* เปลี่ยนเป็น 100% เพื่อให้เป็นสี่เหลี่ยมจัตุรัสตามรูปต้นฉบับ */
    padding-top: 100%; 
    background-color: #f9f9f9;
}

.adm-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* ขยายภาพให้เต็มกรอบ */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.adm-card:hover .adm-img-box img {
    transform: scale(1.08); /* ซูมเข้าเล็กน้อยเมื่อชี้ */
}

/* Content */
.adm-content {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.adm-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 15px;
    line-height: 1.4;
}

.adm-btn {
    display: inline-block;
    padding: 8px 30px;
    background: #fff;
    color: #3598db;
    border: 1px solid #3598db;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
}

.adm-card:hover .adm-btn {
    background: #3598db;
    color: #fff;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .adm-grid, .adm-grid.two-cols { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}

@media (max-width: 576px) {
    .adm-grid, .adm-grid.two-cols { grid-template-columns: 1fr; }
}
/* ==========================
   MCRU guest-service
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.public-service-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.public-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.public-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db;
}

.public-desc {
    font-size: 1.1rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* --- Category Label --- */
.cat-separator {
    display: flex;
    align-items: center;
    margin: 50px 0 25px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f5;
}

.cat-label {
    background: linear-gradient(90deg, #003366, #0055aa);
    color: #fff;
    padding: 8px 25px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 51, 102, 0.2);
}

.cat-icon { margin-right: 10px; font-size: 1.4rem; }

/* --- Grid System --- */
.public-grid {
    display: grid;
    /* Desktop: 5 Columns */
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px;
}

/* --- Service Card Design --- */
.public-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.02);
}

.public-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

.public-img-box {
    position: relative;
    overflow: hidden;
    padding-top: 100%; /* สัดส่วนภาพ 1:1 */
    background: #f9f9f9;
}

.public-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.public-card:hover .public-img-box img {
    transform: scale(1.15); /* Effect Zoom */
}

.public-card-body {
    padding: 15px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.public-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    line-height: 1.4;
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Button */
.btn-public-view {
    display: block;
    padding: 6px 0;
    background-color: #f8fbff;
    color: #3598db;
    border: 1px solid #3598db;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s;
}

.btn-public-view:hover {
    background-color: #3598db;
    color: #fff;
}

/* --- Contact Grid --- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.contact-card {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    border: 1px dashed #ccc;
    transition: all 0.3s;
}

.contact-card:hover {
    border-color: #3598db;
    background: #f8fbff;
}

.contact-img {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-img img { width: 100%; height: 100%; object-fit: cover; }

.contact-title { color: #003366; font-weight: 600; margin-bottom: 5px; font-size: 1.1rem; }
.contact-dept { font-size: 0.9rem; color: #555; margin-bottom: 5px; }
.contact-info { font-size: 0.9rem; color: #777; }
.contact-info a { color: #3598db; text-decoration: none; }

/* --- Responsive Breakpoints --- */
/* Tablet (3 Columns) */
@media (max-width: 992px) {
    .public-grid { grid-template-columns: repeat(3, 1fr); }
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (2 Columns) */
@media (max-width: 576px) {
    .public-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .public-name { font-size: 0.85rem; min-height: auto; }
    .cat-label { width: 100%; justify-content: center; font-size: 1rem; }
}
/* ==========================
   MCRU การเข้าใช้งานอีเมลมหาวิทยาลัย
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.email-service-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.email-header {
    text-align: center;
    margin-bottom: 40px;
}

.email-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db;
}

.email-desc {
    font-size: 1rem;
    color: #666;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- User Type Title --- */
.user-type-badge {
    background-color: #eef6ff;
    color: #003366;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 1.4rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    margin: 30px 0 20px 0;
    border-left: 5px solid #3598db;
}

.user-icon { margin-right: 10px; font-size: 1.6rem; }

/* --- Card Design --- */
.email-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    position: relative;
}

.email-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* Top Color Bar */
.card-top-bar {
    height: 6px;
    width: 100%;
}

.card-content {
    padding: 30px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Icon Box (แก้ไขใหม่ ใช้รูปภาพแทนข้อความ) */
.service-icon-box {
    width: 90px;
    height: 90px;
    background-color: #f8fbff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    overflow: hidden; 
}

/* บังคับขนาดรูปภาพโลโก้ให้พอดีวงกลม */
.service-icon-box img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    margin: 0 !important;
    border: none !important;
}

.email-card:hover .service-icon-box {
    transform: scale(1.1);
}

.service-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Detail Box */
.detail-box {
    background: #fcfcfc;
    padding: 15px;
    border-radius: 8px;
    width: 100%;
    margin-bottom: 25px;
    text-align: left;
    font-size: 0.95rem;
    color: #555;
    border: 1px dashed #ccc;
}

.detail-row {
    margin-bottom: 10px;
    line-height: 1.6;
    word-break: break-word;
}

.detail-row strong {
    color: #333;
    display: block;
    margin-bottom: 2px;
}

/* --- ส่วนแก้ไขสีข้อความ Username (สำคัญมาก) --- */
/* ใช้ !important เพื่อทับทุกสีที่ติดมา */
.email-fix, 
.email-fix span, 
.email-fix a, 
.email-fix font {
    color: #003366 !important; /* บังคับสีน้ำเงินเข้ม */
    font-weight: 500 !important;
    text-decoration: none !important; /* เอาเส้นขีดใต้ออก */
    border-bottom: none !important;
    pointer-events: none !important; /* ป้องกันไม่ให้คลิกได้ */
    background-color: transparent !important;
}

/* Button */
.btn-login {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    color: #fff;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.3s;
    width: 80%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    color: #fff;
}

.btn-icon { margin-left: 8px; }

/* Contact Footer */
.contact-footer {
    margin-top: 50px;
    background-color: #fff;
    border: 1px solid #eef2f5;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.95rem;
}

.contact-footer a { color: #3598db; text-decoration: none; font-weight: 500; }
.contact-footer a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
    .btn-login { width: 100%; }
}
/* ==========================
   MCRU การเข้าใช้งานอินเทอร์เน็ตมหาวิทยาลัย
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.internet-service-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.internet-header {
    text-align: center;
    margin-bottom: 40px;
}

.internet-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db;
}

.internet-desc {
    font-size: 1rem;
    color: #666;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Warning Box --- */
.internet-alert {
    background-color: #fff3cd;
    border-left: 5px solid #ffc107;
    color: #856404;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
    font-size: 0.95rem;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.alert-icon { font-size: 1.5rem; margin-right: 15px; line-height: 1; }

/* --- Grid System --- */
.internet-grid {
    display: grid;
    /* Desktop: 3 Columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- Card Design --- */
.internet-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    position: relative;
}

.internet-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* Top Color Bar */
.net-card-top {
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #3598db, #003366);
}

.net-card-content {
    padding: 30px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Icon Box */
.net-icon-box {
    width: 80px;
    height: 80px;
    background-color: #f0f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 2.5rem; /* ขนาดไอคอน */
    color: #003366;
    transition: transform 0.3s;
}

.internet-card:hover .net-icon-box {
    transform: scale(1.15) rotate(5deg);
    background-color: #003366;
    color: #fff;
}

.net-service-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 20px;
}

/* Detail Box */
.net-detail-box {
    background: #fcfcfc;
    padding: 15px;
    border-radius: 8px;
    width: 100%;
    margin-bottom: 25px;
    text-align: left;
    font-size: 0.95rem;
    color: #555;
    border: 1px dashed #ccc;
}

.net-detail-row {
    margin-bottom: 10px;
    line-height: 1.6;
}

.net-detail-row strong {
    color: #333;
    display: block;
}

/* Highlight Text */
.net-highlight {
    color: #0056b3;
    font-weight: 500;
}

/* Button */
.btn-net {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    background-color: #fff;
    color: #3598db;
    border: 1px solid #3598db;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.3s;
    width: 80%;
}

.btn-net:hover {
    background-color: #3598db;
    color: #fff;
}

.btn-icon { margin-left: 8px; transition: transform 0.3s; }
.btn-net:hover .btn-icon { transform: translateX(5px); }

/* --- Contact Footer --- */
.net-contact-footer {
    margin-top: 50px;
    background-color: #fff;
    border: 1px solid #eef2f5;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.95rem;
}

.net-contact-footer a { color: #3598db; text-decoration: none; font-weight: 500; }
.net-contact-footer a:hover { text-decoration: underline; }

/* --- Responsive Breakpoints --- */
/* Tablet (2 Columns) */
@media (max-width: 992px) {
    .internet-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (1 Column) */
@media (max-width: 576px) {
    .internet-grid { grid-template-columns: 1fr; }
    .btn-net { width: 100%; }
}
/* ==========================
   MCRU ทุนการศึกษา
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.scholarship-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.sch-header {
    text-align: center;
    margin-bottom: 40px;
}

.sch-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db;
}

.sch-subtitle {
    font-size: 1.1rem;
    color: #666;
}

/* --- Grid System --- */
.sch-grid {
    display: grid;
    /* Desktop: 3 Columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- Card Design --- */
.sch-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    position: relative;
}

.sch-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
    border-color: #3598db;
}

/* Top Decoration Bar */
.sch-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #003366, #3598db);
}

/* Icon Box */
.sch-icon-box {
    background-color: #f4f9ff;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px dashed #e0e0e0;
}

.sch-icon {
    font-size: 3.5rem;
    color: #003366;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}

.sch-card:hover .sch-icon {
    transform: scale(1.2) rotate(-10deg);
    color: #3598db;
}

/* Content */
.sch-content {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sch-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 20px;
    line-height: 1.5;
    min-height: 3.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Buttons Area */
.sch-actions {
    display: flex;
    flex-direction: column;
    gap: 8px; /* ระยะห่างระหว่างปุ่ม */
    margin-top: auto;
}

.btn-sch {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s;
    width: 100%;
    border: 1px solid transparent;
}

/* ปุ่มดาวน์โหลดประกาศ (สีน้ำเงิน) */
.btn-download {
    background-color: #003366;
    color: #fff;
    border-color: #003366;
}
.btn-download:hover {
    background-color: #002244;
    color: #fff;
    transform: translateY(-2px);
}

/* ปุ่มดาวน์โหลดแบบฟอร์ม (สีส้ม) - เพิ่มใหม่ */
.btn-form {
    background-color: #fff;
    color: #e67e22;
    border-color: #e67e22;
}
.btn-form:hover {
    background-color: #e67e22;
    color: #fff;
}

/* ปุ่มอ่านข่าว (สีฟ้า) */
.btn-readmore {
    background-color: #fff;
    color: #3598db;
    border-color: #3598db;
}
.btn-readmore:hover {
    background-color: #f0f7ff;
    color: #003366;
}

/* ปุ่มอยู่ระหว่างปรับปรุง (สีเทา) - เพิ่มใหม่ */
.btn-updating {
    background-color: #f0f0f0;
    color: #999;
    border-color: #e0e0e0;
    cursor: default; /* เมาส์ไม่เปลี่ยนรูป */
    pointer-events: none; /* กดไม่ได้ */
}

.btn-icon { margin-right: 8px; font-size: 1rem; }

/* --- Responsive --- */
@media (max-width: 992px) {
    .sch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .sch-grid { grid-template-columns: 1fr; }
}
/* ==========================
   MCRU คู่มือ มาตรฐานการปฏิบัติงาน/การให้บริการ/เอกสารแบบฟอร์ม
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.manual-wrapper {
    font-family: 'Kanit', sans-serif;
    color: #444;
    padding: 30px 0;
}

/* --- Section Header --- */
.manual-header {
    text-align: center;
    margin-bottom: 40px;
}

.manual-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 4px solid #3598db;
    line-height: 1.4;
}

/* --- Tab Navigation --- */
.manual-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    padding: 0;
    list-style: none;
    border: none;
}

.manual-tab-btn {
    background-color: #f0f7ff;
    color: #003366;
    border: 1px solid #dae1e7;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.manual-tab-btn:hover {
    background-color: #e6f0fa;
    color: #3598db;
    transform: translateY(-2px);
}

.manual-tab-btn.active {
    background: linear-gradient(90deg, #003366, #0055aa);
    color: #fff;
    border-color: #003366;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.2);
}

.tab-icon { margin-right: 8px; font-size: 1.1rem; }

/* --- Grid System --- */
.manual-grid {
    display: grid;
    /* Desktop: 3 Columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* --- Card Design --- */
.manual-card {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

.manual-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.12);
    border-color: #3598db;
}

/* Card Header */
.card-head {
    background: #f8fbff;
    padding: 15px 20px;
    border-bottom: 1px solid #eef2f5;
    display: flex;
    align-items: center;
}

.dept-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #3598db;
    margin-right: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.dept-name {
    font-size: 1rem;
    font-weight: 600;
    color: #003366;
    margin: 0;
    line-height: 1.3;
}

/* Card Body (Links) */
.card-body-list {
    padding: 20px;
    flex-grow: 1;
}

.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.link-item {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

.link-item:last-child { margin-bottom: 0; }

.link-bullet {
    color: #3598db;
    margin-right: 10px;
    font-size: 0.9rem;
    margin-top: 3px;
}

.manual-link {
    color: #555;
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.5;
    transition: color 0.2s;
}

.manual-link:hover {
    color: #003366;
    text-decoration: underline;
}

/* --- Responsive --- */
/* Tablet (2 Columns) */
@media (max-width: 992px) {
    .manual-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (1 Column) */
@media (max-width: 576px) {
    .manual-grid { grid-template-columns: 1fr; }
    .manual-nav { flex-direction: column; }
    .manual-tab-btn { width: 100%; text-align: center; }
}

/* ==========================
   MCRU Module Footer เพิ่ม ไอคอน social
   ========================== */
/* นำเข้าฟอนต์ Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600&display=swap');

/* --- ตั้งค่าธีมสีเทาเข้ม (Dark Gray Theme) --- */
.mcru-footer-dark {
    background-color: #2d2d2d; /* สีพื้นหลังเทาเข้ม */
    color: #cccccc;
    padding-top: 60px;
    padding-bottom: 0;
    font-family: 'Kanit', sans-serif !important;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
}

/* --- หัวข้อ (Headings) --- */
.footer-heading {
    color: #ffffff;
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: 15px;
}

/* เส้นขีดคั่น */
.footer-divider {
    width: 40px;
    height: 3px;
    background-color: #00AEEF; /* สีฟ้า Cyan */
    margin-bottom: 25px;
    border-radius: 2px;
}

/* --- จัดการไอคอน (Alignment) --- */
.icon-wrapper {
    width: 30px;
    min-width: 30px;
    text-align: center;
    margin-right: 10px;
}

.icon-wrapper i, 
.footer-links i {
    color: #00AEEF;
    font-size: 1rem;
}

/* --- ลิงก์เมนู (Links) --- */
.footer-links li {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 8px;
}

.footer-links a {
    color: #cccccc;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.footer-links i {
    margin-right: 8px;
}

.footer-links a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.footer-links a:hover i {
    color: #fff;
}

/* --- Helper Classes สี --- */
.text-white { color: #ffffff !important; }
.text-light-gray { color: #e0e0e0 !important; }

/* --- Social Media Buttons (เพิ่มใหม่) --- */
.social-links {
    margin-top: 20px;
}

.social-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%; /* ทำเป็นวงกลม */
    color: #fff !important;
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.social-btn:hover {
    transform: translateY(-3px); /* ลอยขึ้นเมื่อเอาเมาส์ชี้ */
    color: #fff !important;
}

/* สีประจำของแต่ละแอป */
.social-btn.facebook {
    background-color: #3b5998; /* สี Facebook */
}
.social-btn.facebook:hover {
    background-color: #4c70ba;
    box-shadow: 0 0 15px rgba(59, 89, 152, 0.6);
}

.social-btn.tiktok {
    background-color: #000000; /* สี TikTok */
    border: 1px solid #333;
}
.social-btn.tiktok:hover {
    background-color: #222;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.social-btn.youtube {
    background-color: #FF0000; /* สี YouTube */
}
.social-btn.youtube:hover {
    background-color: #ff3333;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}

/* --- Copyright Bar --- */
.copyright-bar {
    background-color: #1a1a1a;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom-link {
    color: #999;
    text-decoration: none;
    font-size: 0.85rem;
}

.footer-bottom-link:hover {
    color: #00AEEF;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .mcru-footer-dark {
        text-align: left;
    }
}