/*
 * Researcher Table Styles
 * -------------------------------------------
 */
.table.tx_researcher {
    border-bottom: 1px solid #ddd;
}
.tx_researcher tbody tr:hover {
    background-color: #eee;
}
.tx_researcher strong {
    color: #8c1515;
    font-weight: normal;
}
.tx_researcher a:hover {
    cursor: pointer;
}

/*
 * Standard Pagination Widget (f3-widget-paginator) Styles
 * -------------------------------------------
 */
.f3-widget-paginator {
    display: inline-block;
    padding-left: 0;
    margin: 10px 0;
    border-radius: 4px;
    float: right;
}
.f3-widget-paginator>li {
    display: inline;
}
.f3-widget-paginator>li>a, .f3-widget-paginator>li.current {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #8c1515;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.back-to-list a {
    border: 1px solid #ddd;
    padding: 5px 20px;
}
.f3-widget-paginator>li.current {
    font-weight: bold;
}
/* Custom pagination override to disable float and fix alignment/style */
.f3-widget-paginator {float:none;margin-bottom:30px;}
.f3-widget-paginator>li.current {padding: 0;border: 0;}
.f3-widget-paginator>li.current a {background:#8c1515;color:#fff;}

/*
 * Image and Content Element (CE) Styles
 * -------------------------------------------
 */
.frame-layout-1 img.image-embed-item {width:100% !important;height:auto !important;}
.frame-layout-2 img.image-embed-item {width:auto !important;height:auto !important;}
.ce-headline-center {text-align:center;}

.img-shadow{box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;}

/* Frame spacing utility classes (before content) */
.frame-space-before-extra-small{margin-top:5px;}
.frame-space-before-small{margin-top:15px;}
.frame-space-before-medium{margin-top:30px;}
.frame-space-before-large{margin-top:45px;}
.frame-space-before-extra-large{margin-top:60px;}

/* Frame spacing utility classes (after content) */
.frame-space-after-extra-small{margin-bottom:5px;}
.frame-space-after-small{margin-bottom:15px;}
.frame-space-after-medium{margin-bottom:30px;}
.frame-space-after-large{margin-bottom:45px;}
.frame-space-after-extra-large{margin-bottom:60px;}

.ce-textpic .ce-gallery img, .ce-image .ce-gallery img {width:auto;height:auto;overflow:hidden;max-width: 100%;margin-bottom: 8px;}
.ce-center {text-align:center}
.ce-border img {border: 10px solid #FFFFFF;box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;}

/* Image gallery alignment */
.ce-left .ce-gallery {margin: 0 15px 0 0;}
.ce-right .ce-gallery {margin: 0 15px 0 15px;}

/* BxSlider Controls and Pager Styles */
.bx-controls.bx-has-pager {margin:15px 0;}
.bx-controls.bx-has-pager .bx-pager {display: flex;width: 100%;flex-wrap: wrap;justify-content: flex-end;column-gap: 5px;row-gap: 10px;}
.bx-controls.bx-has-pager .bx-pager div {margin: 0;}
.bx-controls.bx-has-pager .bx-pager div a { display: table-cell; width: 15px; height: 15px; border: 1px solid #E10600; background: #fff; color: #fff; border-radius: 50%; text-align: center; vertical-align: middle; font-size:0;}
.bx-controls.bx-has-pager .bx-pager div a.active {background: #E10600;}

/*
 * News Single View & Mobile Menu Styles
 * -------------------------------------------
 */
.news.news-single h1 {font-size: 200%;font-weight: bold;}
.news.news-single .news-text-wrap {font-weight: 300;font-size:90%;}
.shortcutmenu-mobile .action-size-list {padding:0 0 15px 25px;}
.shortcutmenu-mobile .action-size-list div{justify-content: flex-start;}
.navbar-header .shortcutmenu ul.table {margin: 0 0 10px 0;}
.navbar-header .shortcutmenu {position: relative !important; top: 0 !important; right: 0; }
.shortcutmenu a {padding: 0 0 0 8px;}
.navbar-default .navbar-toggle {margin:10px;}

/* * Prestigious Two-Column List Layout 
 * Refined for multi-line text and static hover state
 */

ul.list-two-column {
    column-count: 2;
    column-gap: 50px;           /* Spacious gap for clean look */
    list-style-type: none;
    margin: 30px 0;
    padding: 0;
}

ul.list-two-column li {
    display: flex;
    align-items: flex-start;    /* Fix: Align bullet to the top of the first line */
    border-bottom: 1px solid #f1f1f1; 
    padding: 14px 10px;               
    break-inside: avoid;              
    transition: color 0.3s ease; /* Transition only for color change */
    color: #444444;
    font-size: 1rem;
    line-height: 1.5;           /* Better line spacing for multi-line text */
}

/* 1. Custom Bullet - Positioned to stay with the first line */
ul.list-two-column li::before {
    content: "";
    width: 8px;
    height: 2px;                      
    background-color: #CF2D1E;        
    margin-right: 15px;
    margin-top: 10px;           /* Adjust this to align with the first line of text */
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

/* 2. Hover State - Fixed position with color transition only */
ul.list-two-column li:hover {
    color: #CF2D1E;             /* Change text color to MFU Red */
    background-color: transparent; /* Keep background static for a cleaner look */
}

/* 3. Bullet Hover - Optional: highlight bullet color if needed */
ul.list-two-column li:hover::before {
    background-color: #CF2D1E;
}

/* 4. Responsive View */
@media (max-width: 820px) {
    ul.list-two-column {
        column-count: 1;
        column-gap: 0;
    }
}

/*---Update after 23 November 2023, please add below this section only---*/
strong,b {font-family:inherit!important;color: inherit !important;font-weight: bold;}
/* Header Menu Fixes for submenu links */
header .header-menu-bar .menu-list > li.has-submenu > a.disabled {cursor:pointer;}
header .header-menu-bar .menu-list > li.has-submenu > a { padding-right: 2rem; }
header .header-menu-bar .menu-list > li.has-submenu > a:after { right: 1rem;}

/* SDG (Sustainable Development Goals) Icon Display */
.sdg-type{display:flex}
.sdg-type .sdg-item-headline{width:3rem}
.sdg-type a {color:#fff;}
.sdg-type a:hover {color:#eee;}
.sdg-type .sdg-item a{color:#FFFFFF;}
.sdg-type .sdg-item a:hover{color:#FFE100;}

/* Hover effects */
.shortcut-banner img:hover{filter:grayscale(0%);filter:gray;-webkit-filter:grayscale(0%);filter:none;transition:1s ease;-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.05);box-shadow:rgba(17,12,46,0.15) 0 48px 100px 0}
.news-list-view img:hover{filter:grayscale(100%);-webkit-filter:grayscale(0%);-webkit-transition:all 1s ease;box-shadow:rgba(50,50,93,0.25) 0 50px 100px -20px,rgba(0,0,0,0.3) 0 30px 60px -30px}
.news-list-date{color: #646469; font-size: 90%; font-family: 'athitisemibold', sans-serif;}

/* Blog Shortcut Menu */
.blog-shortcutmenu ul{margin:0;padding:0;list-style:none;display:flex;justify-content:space-between;align-items:stretch;gap:15px}
.blog-shortcutmenu ul li{margin:0;padding:30px 0;flex-basis:100%;border-radius:10px;background:#F2EBDA;color:#544216;text-align:center;text-transform:uppercase;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
.blog-shortcutmenu a{margin:auto;color:#544216;font-size:1.25rem;font-weight:700}
.blog-shortcutmenu ul li:hover{color:#fff;background:#8c1515;cursor:pointer}
.blog-shortcutmenu ul li:hover a{color:#fff;text-decoration:none}
.side-menu ul li.active a {color:#cf2d1e;}

/* Fix for .card-img-top to maintain 16:9 aspect ratio on all screen sizes */
.card-img-top,
.card-img-3col {
    width: 100%;
    /* Set height based on 16:9 aspect ratio to scale with width */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover; /* Ensures the image fills the area without distortion */
    object-position: top;
}

/* Slick Slider Dot Styles */
.slick-autoplay-toggle-button {display:none;}
.slick-slider .slick-dots li button {width: 1.5rem;height: 1.5rem;}

/* Header Search Button Icon Size/Position */
header .header-primary .head-search-form form button{font-size: 2rem;top: -0.3rem;}

/*
 * Responsive and Header Styles
 * -------------------------------------------
 */
@media (min-width: 320px) {
    header .xs-head-logo img {
        width: 100%;
        max-width: 30rem;
    }
    header.header{
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    }
}
@media (min-width: 992px) {
    /* News Tabs on Desktop */
	.news-nav-tabs.df-tab nav {border-bottom:1px solid #efefef;}
	.news-nav-tabs.df-tab .nav-tabs .nav-link {border-radius: 15px 15px 0 0;}
	.news-nav-tabs.df-tab .nav-tabs .nav-link:hover {background-color:#cf2d1e;color:#fff;}
	.news-nav-tabs.df-tab .nav-tabs .nav-link.active {font-weight:bold;}
}

/* News Tags List */
ul.news-tags, ul.news-tags li { list-style:none;padding:0;margin:0; }
ul.news-tags { display:flex; flex-wrap:wrap; justify-content: flex-start;gap:5px; }
ul.news-tags li{ padding: 5px; border: 1px solid #efefef; border-radius: 5px;}

/* Blog Main Content Link Styles */
.blog-maincontent a {color:#333333;}
.blog-maincontent a:hover {color:#cf2d1e;}
.blog-maincontent .view-all {font-family:'athitimedium',sans-serif;display: block;text-align: right;}
.blog-maincontent .view-all a{background-color: #cf2d1e;border-color: #cf2d1e;color: #fff;padding: 5px 15px;border-radius: 0.25rem;}
.blog-maincontent .view-all a:hover {filter: brightness(110%); color:#ffffff;}
.blog-maincontent .frame-default {font-family: 'Pridi', sans-serif;}

/* Image Hover Effect (Scale and Shadow) */
.hover-image img{filter:grayscale(100%);-webkit-filter:grayscale(0%);-webkit-transition:all 1s ease;box-shadow:rgba(50,50,93,0.25) 0 50px 100px -20px,rgba(0,0,0,0.3) 0 30px 60px -30px}
.hover-image img:hover{filter:grayscale(0%);filter:gray;-webkit-filter:grayscale(0%);filter:none;transition:1s ease;-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.05);box-shadow:rgba(17,12,46,0.15) 0 48px 100px 0}

.service-box {
  font-family: "athitisemibold", sans-serif;
  font-weight: normal;
  width: 100%;
  margin: 30px 0;
}

.service-box ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: 1fr;
  gap: 15px;
  padding: 0;
  list-style: none;
  margin: 0;
}

.service-box ul li {
  display: flex;
  width: 100%;
}

.service-box ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 25px 20px;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  color: #544216;
  background-color: #F2EBDA;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.service-box ul li a:hover {
  background: #cf2d1e;
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) {
  .service-box ul {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575px) {
  .service-box ul {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

/* Service Box 2 (Usually used for main program/course pages) */
.frame-22 {
    font-family: "athitisemibold", sans-serif;
    width: 100%;
    margin: 30px 0;
    transition-duration: 0.4s;
    cursor: pointer;
}

.frame-22 ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px;
    padding: 0;
    list-style: none;
    margin: 0;
}

.frame-22 ul li {
    border-radius: 20px;
}

.frame-22 ul li a {
    display: block;
    padding: 20px;
    font-size: 1.2rem;
    text-align: center;
    color: #FFFFFF;
    background-image: linear-gradient(25deg, #310024, #69002b, #a40132, #e30637);
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.frame-22 ul li a:hover {
    background-image: linear-gradient(25deg, #310024, #69002b, #a40132, #e30637);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/*
 * Responsive Grid Layout for Service Boxes
 * -------------------------------------------
 */
@media (min-width: 992px) {
    /* Desktop: 4 columns */
	.service-box ul {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}
@media (max-width: 991px) and (min-width: 576px) {
    /* Tablet: 2 columns */
	.service-box ul ,.frame-22 ul{
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 575px) {
    /* Mobile: 1 column */
	.service-box ul, .frame-22 ul{
		grid-template-columns: 1fr !important;
	}
    header .xs-head-logo img {
		width: 100%;
		max-width: 19rem;
	}
}

/*
 * Various Frame/Component Styles
 * -------------------------------------------
 */
.auto-height figure,.frame-17 figure, .frame-17 .card-img-3col, .frame-17 .card-img-4col{aspect-ratio: auto;}
.side-link{position:relative}
.side-link .toggle{font-size:20px;position:absolute;right:15px;top:-2px;z-index:1;cursor:pointer}
.side-link .toggle:hover{color:#fff}
.frame-12 ul,.frame-13 ul{list-style:none;margin:0;padding:0}
.frame-12 li a{border:1px solid #544216;padding:5px 15px;background-color:#fff;color:#544216;margin-bottom:3px;display:block;border-radius:5px;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
.frame-12 li a:hover{background-color:#544216;color:#fff;text-decoration:none}
.frame-13 li a{font-size:20px;padding:5px 15px;background-color:#8c1515;color:#fff;margin-bottom:3px;display:block;border-radius:5px;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
.frame-13 li a:hover{background-color:#a07617;color:#fff;text-decoration:none;padding:5px 30px}
.frame-14 h2{font-size:36px;color:#333;border-bottom:10px solid #E10600;padding-bottom:10px;margin-bottom:20px}
.PageTitle{margin-bottom:30px;}
.frame-15 h2{font-size: 2.8rem;font-weight:300;color:#1f1f27;}

/* Accordion Styles */
.accordion-button.collapsed,
.accordion-button:not(.collapsed) {color: #fff;background-color: #252a33;font-size: 80%;}
.accordion-button.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");}
.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");}


/*---- DARK THEME Overrides ----*/
.dark-theme .blog-shortcutmenu a,
.dark-theme .blog-shortcutmenu ul li:hover a {color:#555;}
.dark-theme .blog-shortcutmenu ul li:hover {background: #eee;}
.dark-theme .frame-14 h2 {border-bottom: 10px solid #eee;}
.dark-theme .view-all a,
.dark-theme .btn-primary,.dark-theme .btn-primary:hover,
.dark-theme footer .menu-box-list li a,
.dark-theme footer .social-media-list ul li a,
.dark-theme header .header-menu-bar,
.dark-theme header .header-primary .action-menu-list .action-menu-item a.active,
.dark-theme header .header-primary .action-menu-list .action-menu-item a:hover,
.dark-theme header .header-primary .action-menu-list .action-menu-item a.primary-link {background:transparent;background-color:#333;}
.dark-theme .title-red-line { border-bottom: solid 0.625rem #fff; }
body.dark-theme .service-box ul li a, body.dark-theme .box-link li a, body.dark-theme .footer{ background:#333333; }
body.dark-theme .side-menu ul li a:hover{background:#333333;}
body.dark-theme .menu-list > li a{color:#ffffff;}

/* Modernized Box Link */
.box-link ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

.box-link li {
    width: 100%;
    margin-bottom: 10px;
	font-family: "athitimedium", sans-serif;
}

.box-link li a {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-decoration: none;
    color: #ffffff;
    background: #b58f64;
    border-radius: 10px;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
    text-align: center;
}

.box-link li a:hover {
    background-color: #ae1b1f;
    color: white;
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px;
}

/*
 * Newsletter/Issue Component (tx-mfunewsletter, tx-mfuissue)
 * -------------------------------------------
 */
.tx-mfunewsletter article , .tx-mfuissue article{
    min-height: 380px;
}
.tx-mfunewsletter figure , .tx-mfuissue figure{
    clear: both;
}
.tx-mfunewsletter figure figcaption , .tx-mfuissue figure figcaption{
    background: #C6A969;
    padding: 10px 5px;
    display: block;
    color: #fff;
}
.tx-mfunewsletter h1 , .tx-mfuissue h1{
    color: #fff;
    display: block;
    text-decoration: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 120%;
    line-height: 20px;
}
.tx-mfunewsletter p , .tx-mfuissue p{
    margin: 0;
    font-size: 75%;
    font-family: 'athitimedium', sans-serif;
}
.tx-mfunewsletter img, .tx-mfuissue img{
    border-top: 5px solid #C6A969;
}
.tx-mfunewsletter a:hover figure figcaption , .tx-mfuissue a:hover figure figcaption{
    background: #CF2D1E
}
.tx-mfunewsletter a:hover img , .tx-mfuissue a:hover img{
    border-top: 5px solid #CF2D1E;
}
.tx-mfunewsletter a, .tx-mfunewsletter a:hover h1, .tx-mfunewsletter a:hover p , .tx-mfuissue a, .tx-mfuissue a:hover h1, .tx-mfuissue a:hover p{
    display: block;
    text-decoration: none;
    color: #fff;
}
.tx-mfunewsletter a , .tx-mfuissue a{
    margin-bottom: 30px;
}
.tx-mfunewsletter .issue-pdf , .tx-mfuissue .issue-pdf{
    display: block;
    text-align: center;
    padding: 5px 20px;
    background: #555;
    color: #fff;
}
.tx-mfunewsletter .issue-pdf a , .tx-mfuissue .issue-pdf a{
    margin: 0 !important;
    padding: 0 !important;
}
.tx-mfunewsletter.ebook figure figcaption , .tx-mfuissue.ebook figure figcaption{
    background: #eee;
    color: #333;
}
.tx-mfunewsletter.ebook img, .tx-mfunewsletter.ebook a:hover img , .tx-mfuissue.ebook img, .tx-mfuissue.ebook a:hover img{
    border-top: 0;
    padding: 10px;
}
.tx-mfunewsletter.ebook h1, .tx-mfunewsletter.ebook p, .tx-mfunewsletter.ebook a, .tx-mfunewsletter.ebook a:hover p , .tx-mfuissue.ebook h1, .tx-mfuissue.ebook p, .tx-mfuissue ebook a, .tx-mfuissue.ebook a:hover p{
    color: #333;
    text-decoration: none;
    text-align: center;
}
.tx-mfunewsletter.ebook p , .tx-mfuissue.ebook p{
    margin: 0 0 10px 0;
    font-size: 100%;
    font-family: 'athitimedium', serif;
}

/*
 * Language Menu (tx-srlanguagemenu-links)
 * -------------------------------------------
 */
.tx-srlanguagemenu-links {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    column-gap:5px;
}
.tx-srlanguagemenu-links div a {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    border: 0.0625rem solid #cf2d1e;
    padding: 5px 10px;
    background: #efefef;
}
.tx-srlanguagemenu-links div.CUR a {
    background: #333;
    color:#efefef;
}

/* Custom Pagination Arrows */
.custom-pagination .arrow{
    display:flex;
    display: -webkit-flex;
    justify-content: end;
    -webkit-justify-content: end;
    gap: 15px;
    color:#555;
}
.custom-pagination .arrow a {background: #333333;color: #FFFFFF;}
.custom-pagination .arrow a:hover {background:#cf2d1e;}

/* ==========================================================================
   Responsive Video Iframes (Shared Styles)
   ========================================================================== */

/* Group selectors to share the same responsive video core styles */
.responsive-iframe-video, 
.responsive-iframe-video-169 {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    
    /* Hardware acceleration and smooth transition for both hover-in and hover-out */
    will-change: transform, filter;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effects applied to both elements */
.responsive-iframe-video:hover, 
.responsive-iframe-video-169:hover {
    filter: brightness(1.05);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Slightly deeper shadow when lifted */
}

/* News List Link Styles */
.link-news{
    font-family: "athitimedium", sans-serif;
    font-size: 1.07em;
    color:black;
}
.link-news a:hover{
    color:red;
}

/* Academic Year Filter/Links */
.academicyear {display:flex;gap: 10px;margin-bottom: 15px;}
.academicyear a {padding: 7px 10px; border:1px solid #efefef; background-color: #cf2d1e; color:#fff;}
.academicyear a:hover { background-color: #efefef; color:#cf2d1e;}

/* Fixed Facebook Messenger Link */
.fb-messenger-link {position:fixed; top:90%; right:15px; z-index:10; font-size:150%; }

/* Red Headline Border */
.border-headline {
    padding-right: 10%;
    min-width: 70%;
    display: table;
    margin-bottom: 15px;
    border-bottom: 2px solid #8c1515;
    padding-bottom: 5px;
}
/* Firefox Fix for Border-Headline */
@-moz-document url-prefix() {
    .border-headline {
      height:1px;
    }
}

/* Mobile Text Alignment */
@media (max-device-width: 600px) {
    .mobile-text {
      text-align: center;
    }
}

/* Document List Last Update (tx_mfudocu) */
.tx_mfudocu .mfudocu-last-update {
    font-size:80%;
    color:#B7B7B7;
    font-style: italic;
}

.news .accordion-button{
    padding:3%;
    font-size:1rem;
}

/* Image Hover Effects */
.hover-image img , .frame-18 img{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.hover-image img:hover , .frame-18 img:hover {
    transition: 1s ease;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.05);
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

/* Column Shadow Effect */
.column-shadow01 div{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

/* Social Box List */
.social-box ul{
    font-family: "athitimedium", sans-serif;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.social-box ul li{
    font-size:1rem;
}
.social-box ul li a{
    float:left;
    background-color: #EEEEEE;
    margin:5px;
    padding:5px 10px;
    border-radius: 10px;
}
.social-box ul li a:hover{
    background-color: #B58F64;
    color:#FFFFFF;
}

/*
 * Custom Tab/Navigation Styles (nav-tabs)
 * -------------------------------------------
 */
.nav-tabs {
    border-bottom: 1px solid #000000;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #CF2D1E;
    background-color: #fff;
    border-bottom: 5px solid #CF2D1E;
    border-color: #ffffff #ffffff #CF2D1E#ffffff;
}
.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover {
    border-color:#ffffff #ffffff #333333 #ffffff;
    border-bottom: 5px solid #ae1b1f;
}
.nav-tabs .nav-link:hover {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.nav-link{
    color:#333333;
    font-size:1.2rem;
    font-family: 'athitimedium', sans-serif;
}
.nav-link:focus,.nav-link:hover {
    color: #ae1b1f;
}
@media (max-width: 576px){
    .nav-link{
        font-size:1rem;
    }
}

/* * Statistics Component - Modern Floating Edition
 * -------------------------------------------
 * Features: Grid layout, soft shadows, and subtle micro-interactions.
 */

#mfu-statistics-container {
    display: grid;
    /* Uses CSS Grid for perfect alignment and consistent spacing */
    grid-template-columns: repeat(4, 1fr); 
    gap: 24px;
    padding: 30px 0;
    max-width: 1200px;
    margin: 0 auto;
}

#mfu-statistics-container .stat-box {
    background: #ffffff;
    border-radius: 16px; /* Smooth rounded corners */
    padding: 35px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle border */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03); /* Soft, elegant shadow */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Professional motion curve */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Red accent bar that appears on hover */
#mfu-statistics-container .stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    /*background: linear-gradient(90deg, #CF2D1E, #8c1515);*/ /* MFU Brand Gradient */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Interaction: Lift effect and shadow depth on hover */
#mfu-statistics-container .stat-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(207, 45, 30, 0.12);
    border-color: rgba(207, 45, 30, 0.2);
}

#mfu-statistics-container .stat-box:hover::before {
    opacity: 1;
}

#mfu-statistics-container .stat-value {
    font-family: "athitibold", sans-serif;
    font-size: 3.5rem; /* Large, clear numbers */
    line-height: 1;
    color: #CF2D1E; /* Primary MFU Red */
    margin-bottom: 12px;
    display: block;
    transition: transform 0.3s ease;
}

#mfu-statistics-container .stat-box:hover .stat-value {
    transform: scale(1.05); /* Slight "pulse" on hover */
}

#mfu-statistics-container .stat-title {
    font-family: "athitimedium", sans-serif;
    font-size: 1.1rem;
	background:#dddddd3b;
	border-radius:10px;
    color: #4A4A4A; /* Neutral dark grey for readability */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* --- Responsive Adjustments --- */

/* Tablet View: 2 columns */
@media (max-width: 991px) {
    #mfu-statistics-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 15px;
    }
    #mfu-statistics-container .stat-value {
        font-size: 2.8rem;
    }
}

/* Mobile View: 1 column for focus */
@media (max-width: 576px) {
    #mfu-statistics-container {
        grid-template-columns: 1fr;
    }
    #mfu-statistics-container .stat-box {
        padding: 25px;
    }
    #mfu-statistics-container .stat-value {
        font-size: 2.5rem;
    }
}

/* Line break behavior for desktop */
.line-break::after {
    content: "\A";
    white-space: pre;
}

/* Disable line break on mobile */
@media (max-width: 767.98px) {
    .line-break::after {
        content: "";
    }
}

/* Hidden element on mobile */
@media (max-width: 767.98px) {
    .hidden-mobile {
        visibility: hidden;
        display: block;
        line-height: 0;
    }
}

.text-justify {
    text-align: justify;
}

/* Video List Component */
.blog-video-list .title-video{
    color: yellow;
    font-family: 'athitisemibold', sans-serif;
    font-size: 180%;
    text-align: center;
}
.blog-video-list .detail-video{
    font-family: 'athitisemibold', sans-serif;
    font-size: 130%;
    padding: 0% 6%;
}

/* News Title Style */
a.news-title {
    font-size: 1.1rem;
    font-family: 'athitimedium',sans-serif;
}
a.news-title:hover{
    color: #ae1b1f;
}

.news-category{
    font-family: 'athitiregular',sans-serif;
}

/* Modern Sidemenu Styles */
.sidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.sidemenu li {
    width: 100%;
    margin-bottom: 10px;
}
.sidemenu li a {
    display: block;
    width: 100%;
    padding: 8px 13px;
    font-family: 'athitiregular', sans-serif;
    font-size: 1rem;
    text-decoration: none;
    color: #000000;
    background: #eeeeee;
    border:2px solid #DCDCDC;
    border-radius: 10px;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
}
.sidemenu li a:hover {
    background-color: #ae1b1f;
    color: white;
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px;
}


/* Ribbon/Badge Image Position */
.ribbon {left:0;top:0;max-width:150px;height:auto;}
@media (max-width: 991px){
	.ribbon{
		max-width:50px;
	}
}

.tx-jpfaq h2.accordion-header {
  font-size: 130%;
}

/* Set white color for links within (.btn) buttons inside .blog-maincontent only */
.blog-maincontent span.btn-primary a,.blog-maincontent span.btn-info a,.blog-maincontent span.btn-success a {
    color: #FFFFFF !important; 
}

/* ---------------------------------------------------------------------- */
/* CSS Reset: Resets specific text styles within .special-layout only    */
/* ---------------------------------------------------------------------- */

.special-layout *,
.special-layout a {
    /* --- 1. Colors and Background Reset to Default/Inherit --- */
    color: inherit !important;          /* Force inherited font color */
    background: transparent !important; /* Reset background to prevent color bars */
    
    /* --- 2. Font Styles Reset to Default/Inherit --- */
    font-family: inherit !important;     /* Use website's primary font */
    font-size: inherit !important;       /* Use website's primary font size */
    font-weight: inherit !important;     /* Use website's primary font weight */
    font-style: inherit !important;      /* Use website's primary font style */
    line-height: inherit !important;     /* Use website's primary line height */
    text-align: inherit !important;      /* Use website's primary text alignment */
    
    /* --- 3. Text Decoration Reset --- */
    text-decoration: unset !important;   /* Clear underlines and other decorations */
    text-shadow: none !important;        /* Clear text shadows */
    white-space: inherit !important;     /* Ensure default white-space behavior */
    
    /* Layout properties (margin, padding, border, display) remain unchanged */
}

/* Restore styles for Links (A tags) */
.special-layout a {
    text-decoration: unset !important;   /* Reset underlines potentially from inline styles */
}

/* Restore styles for Lists (UL, OL) */
.special-layout ul,
.special-layout ol {
    list-style-type: initial !important; /* Restore default list bullet symbols */
}

.special-layout .teaser {
	padding:15px;
}
.special-layout h5,.special-layout h3{
	font-family: "athitisemibold", sans-serif !important;
	font-size:3rem !important;
}
.special-layout h5 a:hover{
	color:#ae1b1f !important;
}

/*More Link*/
/* ซ่อน p ที่ไม่มีข้อความหรือมีแค่ช่องว่างเพื่อป้องกันจุดโผล่ */
.more-link p:empty, 
.more-link p:contains(' ') {
    display: none;
}

/* ปรับแท็ก a ที่ใช้ทำ anchor เปล่าๆ ไม่ให้มีพื้นที่ */
.more-link a:not([href]) {
    display: none;
}

/* ============================================================
   MFU PROGRAMME PAGE MASTER BUNDLE (Original + Col-8 Fix)
   ============================================================ */

/* --- 1. TAB NAVIGATION (FIXED FOR CLICKABLE) --- */
.programme-container .tab-navigation {
    position: relative;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    width: 100%;
}

.programme-container .nav-tabs {
    width: 100%;
    border-bottom: none !important;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding: 10px;
    background: #f4f4f4;
    border-radius: 18px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* เพิ่ม Padding ขวาเพื่อไม่ให้ปุ่มบังเมนูสุดท้าย */
    padding-right: 50px !important;
}

.programme-container .nav-tabs::-webkit-scrollbar { display: none; }

.programme-container .nav-link {
    white-space: nowrap;
    border: none !important;
    background: transparent !important;
    color: #666 !important;
    font-family: 'athitimedium', sans-serif;
    font-size: 1rem;
    padding: 12px 24px;
    border-radius: 14px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    flex: 0 0 auto;
}

.programme-container .nav-link.active {
    background: #cf2d1e !important;
    color: #ffffff !important;
    box-shadow: 0 8px 16px rgba(142, 28, 18, 0.25);
    font-family: 'athitibold', sans-serif;
    transform: scale(1.02);
}

/* แก้ไขจุดนี้: เปลี่ยนจาก ::after เป็น Class ปุ่มเพื่อให้กดได้ */
.tab-scroll-btn {
    position: absolute;
    right: 15px;
    width: 32px;
    height: 32px;
    background: #8e1c12;
    color: white;
    border: none;
    border-radius: 50%;
    display: none; /* จะแสดงผลผ่าน JS เมื่อเมนูล้น */
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    animation: arrowBounce 2s infinite;
    transition: all 0.3s ease;
}

/* --- 2. FLAT DESIGN APPLY BUTTON (สไตล์เดิม) --- */
.apply-now-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    background: #cf2d1e !important;
    color: #FFFFFF !important;
    font-family: 'athitimedium', sans-serif;
    font-size: 1.1rem;
    text-decoration: none !important;
    border-radius: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(142, 28, 18, 0.25);
}

.apply-now-btn:hover {
    background: #8c1515 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(179, 139, 64, 0.3);
}

/* --- 3. PREMIUM COURSE & FEE TABLE (สไตล์เดิมครบถ้วน) --- */
.programme-container .course-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    margin: 10px 0;
}

.programme-container .course-table tr { transition: all 0.3s ease; }

.programme-container .header-total td {
    background: #b58f64 !important;
    color: #ffffff !important;
    padding: 18px 25px;
    font-family: 'athitisemibold', sans-serif;
    font-size: 1.2rem;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(181, 143, 100, 0.3);
    border: none;
}

.programme-container .course-table td {
    padding: 15px 20px;
    background: #ffffff;
    border: none;
}

.programme-container .row-l1 td {
    font-family: 'athitisemibold', sans-serif;
    font-size: 1.1rem;
    color: #333;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.programme-container .row-l1 td:first-child { border-radius: 12px 0 0 12px; border-left: 1px solid #f0f0f0; }
.programme-container .row-l1 td:last-child { border-radius: 0 12px 12px 0; border-right: 1px solid #f0f0f0; }

.programme-container .row-l2 td {
    font-family: 'athitimedium', sans-serif;
    color: #666;
    font-size: 1rem;
    background: #fdfdfd;
}

.programme-container .row-l2 td:first-child {
    padding-left: 45px;
    position: relative;
}

.programme-container .row-l2 td:first-child::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #8e1c12;
    border-radius: 50%;
    opacity: 0.5;
}

.programme-container .td-credits {
    text-align: right;
    font-family: 'athitibold', sans-serif;
    color: #8e1c12;
    width: 140px;
}

.programme-container tr:hover:not(.header-total) td {
    background: #fffafa !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* --- 4. UNIVERSAL CARD LIST (สไตล์เดิม) --- */
.programme-container .custom-card-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.programme-container .custom-card-list li {
    background: #ffffff;
    border-left: 5px solid #8e1c12;
    margin-bottom: 15px;
    padding: 20px 25px;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    line-height: 1.7;
    color: #333;
    transition: all 0.3s ease;
}

.programme-container .custom-card-list li strong {
    color: #8e1c12 !important;
    font-family: 'athitisemibold', sans-serif !important;
    font-weight: normal;
    font-size: 1.3rem;
}

/* --- ANIMATIONS --- */
@keyframes arrowBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(0); }
    40% { transform: translateX(-5px); }
    60% { transform: translateX(-2px); }
}

@media (max-width: 1024px) {
    .programme-container .nav-link { font-size: 0.95rem; padding: 10px 18px; }
}

/* --- 1. TAB NAVIGATION (FIXED WITH LEFT/RIGHT BUTTONS) --- */
.programme-container .tab-navigation {
    position: relative;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    width: 100%;
}

.programme-container .nav-tabs {
    width: 100%;
    border-bottom: none !important;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding: 10px 45px; /* เว้นที่ว่างซ้าย-ขวาให้ปุ่ม */
    background: #f4f4f4;
    border-radius: 18px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.programme-container .nav-tabs::-webkit-scrollbar { display: none; }

/* สไตล์ปุ่มกด (ใช้ร่วมกันทั้งซ้ายและขวา) */
.tab-scroll-btn {
    position: absolute;
    width: 32px;
    height: 32px;
    background: #8e1c12;
    color: white;
    border: none;
    border-radius: 50%;
    display: none; /* โชว์ผ่าน JS */
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.tab-scroll-btn.btn-left { left: 10px; }
.tab-scroll-btn.btn-right { right: 10px; }

.tab-scroll-btn:hover { background: #cf2d1e; transform: scale(1.1); }

/* Animation เดิมของคุณ */
@keyframes arrowBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-3px); }
}

/* Container - Remove list bullets */
.frame-25 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* ผลักรายการ Li ทั้งหมดไปทางขวา */
    margin-bottom:20px;
}

/* Button Base Style */
.apply-now-btn, 
.frame-25 li a { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    background: #cf2d1e !important;
    color: #FFFFFF !important;
    font-family: 'athitimedium', sans-serif;
    font-size: 1.1rem;
    text-decoration: none !important;
    border-radius: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(142, 28, 18, 0.25);
    /* กรณีไม่อยากแก้ที่ ul ให้เปิดใช้บรรทัดล่างนี้ครับ */
    /* margin-left: auto; */ 
}

/* Hover State */
.apply-now-btn:hover, 
.frame-25 li a:hover {
    background: #8c1515 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(179, 139, 64, 0.3);
    transform: translateY(-2px); /* เพิ่มให้น่าสนใจเล็กน้อย */
}

/* 20260501 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #1a2a3a;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  border-radius: 0 0 4px 0;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
}

/** Override Menu List Styles */
header .header-primary .action-menu-list .action-menu-item button {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    border: 0.0625rem solid #cf2d1e;
    background: none;
    color: #cf2d1e;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -ms-transition: all .3s;
}

header .header-primary .action-menu-list .action-menu-item button.active, 
header .header-primary .action-menu-list .action-menu-item button:hover {
    background-color: #cf2d1e;
    color: #fff;
}


header .header-primary .action-menu-list .action-menu-item button.theme-light:hover,
header .header-primary .action-menu-list .action-menu-item button.primary-link:hover  {
    background-color: rgba(0, 0, 0, 0);
    border-color: #cf2d1e;
    color: #cf2d1e;
}

header .header-primary .action-menu-list .action-menu-item button.primary-link {
    background-color: #cf2d1e;
    color: #fff;
}