/* ==========================================================================
   1. Root Variables & Base Overrides
   ========================================================================== */
:root {
    --red-primary: #cf2d1e;
    --gold-primary: #b58f64;
}

strong, b {
    font-family: inherit !important;
    color: inherit !important;
    font-weight: bold;
}

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

.line-break::after {
    content: "\A";
    white-space: pre;
}

/* ==========================================================================
   2. Frame Spacing & Utilities
   ========================================================================== */
.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-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; }

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

.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;
}

.ribbon {
    left: 0;
    top: 0;
    max-width: 150px;
    height: auto;
}

.fb-messenger-link {
    position: fixed;
    top: 90%;
    right: 15px;
    z-index: 10;
    font-size: 150%;
}

.border-headline {
    padding-right: 10%;
    min-width: 70%;
    display: table;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--red-primary);
    padding-bottom: 5px;
}

@-moz-document url-prefix() {
    .border-headline {
        height: 1px;
    }
}

/* ==========================================================================
   3. Content Elements & Image Gallery
   ========================================================================== */
.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,
.ce-center { 
    text-align: center; 
}

.ce-textpic .ce-gallery img, 
.ce-image .ce-gallery img {
    width: auto;
    height: auto;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 8px;
}

.ce-border img {
    border: 10px solid #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

.ce-left .ce-gallery { margin: 0 15px 0 0; }
.ce-right .ce-gallery { margin: 0 15px 0 15px; }

.auto-height figure,
.frame-17 figure, 
.frame-17 .card-img-3col, 
.frame-17 .card-img-4col {
    aspect-ratio: auto;
}

.card-img-top,
.card-img-3col {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
}

.hover-image img, 
.frame-18 img {
    transition: all 0.3s ease;
}

.hover-image img:hover, 
.frame-18 img:hover {
    transition: transform 1s ease, filter 1s ease, box-shadow 1s ease;
    transform: scale(1.05);
    filter: grayscale(0%);
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.shortcut-banner img:hover {
    filter: grayscale(0%);
    transition: transform 1s ease;
    transform: scale(1.05);
    box-shadow: rgba(17, 12, 46, 0.15) 0 48px 100px 0;
}

/* Video Player */
.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);
    will-change: transform, filter;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.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);
}

/* ==========================================================================
   4. Header, Navigation & Menus
   ========================================================================== */
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; }

header .header-primary .head-search-form form button {
    font-size: 2rem;
    top: -0.3rem;
}

.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; }

/* Side Navigation */
.side-menu ul li.active a { color: var(--red-primary); }

.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; }

.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: var(--red-primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px;
}

.tx-srlanguagemenu-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.tx-srlanguagemenu-links div {
    margin: 0;
    padding: 0;
}

.tx-srlanguagemenu-links div a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    background-color: #e9ecef;
    color: #495057;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    border: 1px solid #ced4da;
    border-radius: 0 !important;
    transition: all 0.3s ease;
}

.tx-srlanguagemenu-links div a:hover {
    background-color: #d6d8db;
    color: #212529;
    text-decoration: none;
}

.tx-srlanguagemenu-links div.CUR a,
.tx-srlanguagemenu-links div.CUR a:hover {
    background-color: #8c1515 !important;
    color: #ffffff !important;
    border-color: #8c1515 !important;
    cursor: default;
}

@media (max-width: 576px) {
    .tx-srlanguagemenu-links {
        gap: 4px;
    }

    .tx-srlanguagemenu-links div a {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* Custom Nav Tabs */
.nav-tabs {
    border-bottom: 1px solid #d1d5db;
    gap: 4px;
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active {
    color: #FFFFFF;
    background-color: #2E2F40;
    border: 1px solid #2E2F40 !important;
}

.nav-tabs .nav-link:focus, 
.nav-tabs .nav-link:hover {
    color: #FFFFFF;
    background-color: var(--red-primary);
    border-color: var(--red-primary) !important;
    transition: all 0.3s ease;
}

.nav-link {
    color: #4b5563;
    font-size: 1rem;
    font-family: 'athitimedium', sans-serif;
    background-color: #d1d5db;
    border: 1px solid #d1d5db !important;
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 10px 20px;
    margin-bottom: -1px;
}

.nav-link:focus, 
.nav-link:hover {
    color: #1f2937;
}

/* ==========================================================================
   5. Components & Widgets
   ========================================================================== */

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

/* Pagination Controls */
.f3-widget-paginator {
    float: none;
    margin-bottom: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 14px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 999px;
    list-style: none;
}

.f3-widget-paginator > li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    color: #6c757d;
    font-weight: 500;
}

.f3-widget-paginator > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #495057;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.f3-widget-paginator > li:hover > a {
    background-color: #e9ecef;
    color: #212529;
}

.f3-widget-paginator > li.current {
    padding: 0;
    border: 0;
    font-weight: bold;
}

.f3-widget-paginator > li.current a {
    background: #212529 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.f3-widget-paginator > li.previous a,
.f3-widget-paginator > li.prev a,
.f3-widget-paginator > li.next a {
    width: auto;
    padding: 0 14px;
    border-radius: 999px;
}

.custom-pagination .arrow {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    color: #555;
}

.custom-pagination .arrow a {
    background: #333333;
    color: #FFFFFF;
}

.custom-pagination .arrow a:hover {
    background: var(--red-primary);
}

/* BxSlider Controls */
.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 var(--red-primary);
    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: var(--red-primary); }

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

/* Multi-Column List */
ul.list-two-column {
    column-count: 2;
    column-gap: 50px;
    list-style-type: none;
    margin: 30px 0;
    padding: 0;
}

ul.list-two-column li {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #f1f1f1;
    padding: 14px 10px;
    break-inside: avoid;
    transition: color 0.3s ease;
    color: #444444;
    font-size: 1rem;
    line-height: 1.5;
}

ul.list-two-column li::before {
    content: "";
    width: 8px;
    height: 2px;
    background-color: var(--red-primary);
    margin-right: 15px;
    margin-top: 10px;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

ul.list-two-column li:hover {
    color: var(--red-primary);
    background-color: transparent;
}

ul.list-two-column li:hover::before {
    background-color: var(--red-primary);
}

/* ==========================================================================
   News & Blog Layouts - Option 4: Brand Glow
   Description: Replaces standard black shadows with a colored, glowing aura.
   ========================================================================== */

/* Base Typography Components */
.news.news-single h1 { font-size: 200%; font-weight: bold; }
.news.news-single .news-text-wrap { font-weight: 300; font-size: 90%; }
.news-list-date { color: #646469; font-size: 90%; font-family: 'athitisemibold', sans-serif; }

/* Image Hover Setup */
.news-list-view img {
    border-radius: 0.25rem;
    /* Transparent shadow layout */
    box-shadow: 0 0 0 rgba(13, 110, 253, 0); 
    transition: box-shadow 0.4s ease;
    will-change: box-shadow;
}

/* Hover State */
.news-list-view img:hover {
    /* Wide, soft spread using Bootstrap primary hex value with alpha */
    box-shadow: 0 10px 30px -5px #ae1b1f66; 
}

a.news-title {
    font-size: 1.1rem;
    font-family: 'athitimedium', sans-serif;
}
a.news-title:hover { color: var(--red-primary); }

.news-category { font-family: 'athitiregular', sans-serif; }
.link-news { font-family: "athitimedium", sans-serif; font-size: 1.07em; color: black; }
.link-news a:hover { color: var(--red-primary); }

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-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;
    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: var(--red-primary); cursor: pointer; }
.blog-shortcutmenu ul li:hover a { color: #fff; text-decoration: none; }

.blog-maincontent a { color: #333333; }
.blog-maincontent a:hover { color: var(--red-primary); }

/* ============================================================== 
   VIEW ALL LINK WITH ARROW (.blog-maincontent .view-all)
   Note: Adapted layout from .more-link but isolated as requested 
         for Typo3/Bootstrap modularity.
=================================================================== */

.blog-maincontent .view-all a {
    /* Typography & Theme Colors (Retained original variables) */
    font-family: "athitimedium", sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    background-color: var(--red-primary);
    border: 1px solid var(--red-primary);
    
    /* Layout & Pill Shape (Matches .more-link) */
    border-radius: 100px;
    padding: 6px 16px 6px 14px; /* Accommodate the arrow */
    margin: 10px;
    float: right;
    
    /* Flexbox Alignment for Text and Icon */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    
    /* Interaction & Effects */
    text-decoration: none;
    transition: all 0.2s linear;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

/* CSS Arrow Icon via ::after pseudo-element */
.blog-maincontent .view-all a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ffffff; /* Arrow color matching the text */
    
    /* Clean SVG Right Arrow Mask */
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') no-repeat center / contain;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') no-repeat center / contain;
    
    transition: transform 0.2s linear;
}

/* Hover States */
.blog-maincontent .view-all a:hover {
    color: #ffffff;
    filter: brightness(110%); /* Bootstrap-friendly hover effect */
    text-decoration: none;
}

/* Smooth Arrow Slide Effect on Hover */
.blog-maincontent .view-all a:hover::after {
    transform: translateX(4px);
}

.blog-maincontent .frame-default { font-family: 'Pridi', sans-serif; }
.blog-maincontent span.btn {
    margin-bottom:10px;
}
.blog-maincontent span.btn-primary a,
.blog-maincontent span.btn-info a,
.blog-maincontent span.btn-success a {
    color: #FFFFFF !important;
}

.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%;
}

/* SDG Component */
.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; }

/* Service Boxes */
.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: var(--red-primary);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}

.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;
    align-items: stretch;
}
.frame-22 ul li { border-radius: 20px; display: flex; }
.frame-22 ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    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;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.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;
}

.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;
    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: var(--red-primary);
    color: #fff;
    margin-bottom: 3px;
    display: block;
    border-radius: 5px;
    transition: all .3s;
}
.frame-13 li a:hover { background-color: #a07617; color: #fff; text-decoration: none; padding: 5px 30px; }

.frame-14 h2 {
    position: relative !important;
    border-bottom: 0px none transparent !important;
    border-bottom-width: 0px !important;
    font-size: 36px !important;
    color: #333333 !important;
    padding-bottom: 18px !important;
    margin-bottom: 25px !important;
}

.frame-14 h2::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 10px !important;
    background: linear-gradient(90deg, var(--red-primary) 0%, var(--gold-primary) 100%) !important;
    border-radius: 10px !important;
}

.PageTitle { margin-bottom: 30px; }
.frame-15 h2 { font-size: 2.8rem; font-weight: 300; color: #1f1f27; }

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


/* ==========================================================================
   TYPO3 JPFAQ ACCORDION - MINIMALIST PILL CARD STYLE
   Features:
   - Standalone rounded cards with smooth '+' to 'x' icon toggle
   - Fixed initial state (strictly '+' until actually expanded)
   - Built-in FAQ Question Icon (::before) for clear visual context
   ========================================================================== */

/* 1. Main container */
.tx-jpfaq {
  width: 100%;
  margin: 0 auto 2.5rem auto;
}

/* 2. Accordion list container */
.tx-jpfaq .accordion {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: transparent;
}

/* 3. Individual card styling */
.tx-jpfaq .accordion-item {
  background-color: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 0.875rem !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.tx-jpfaq .accordion-item:hover {
  border-color: #dbe0e6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* 4. Accordion header & button */
.tx-jpfaq .accordion-header {
  margin: 0;
}

.tx-jpfaq .accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.125rem 1.25rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: #111827;
  background-color: #ffffff !important;
  border: none;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Question text flex space */
.tx-jpfaq .accordion-button span,
.tx-jpfaq .accordion-button {
  text-align: left;
}

/* Hover state on question */
.tx-jpfaq .accordion-button:hover {
  color: var(--theme-primary, #ed1c24);
}

/* Active question title color when open */
.tx-jpfaq .accordion-item:has(.accordion-collapse.show) .accordion-button {
  color: var(--theme-primary, #ed1c24);
}

/* WCAG focus-visible accessibility ring */
.tx-jpfaq .accordion-button:focus-visible {
  outline: 2px solid var(--theme-primary, #ed1c24);
  outline-offset: -2px;
  border-radius: 0.875rem;
}

/* ==========================================================================
   5. FAQ Question Icon (Left side ::before)
   ========================================================================== */
.tx-jpfaq .accordion-button::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-right: 0.875rem;
  border-radius: 50%;
  background-color: #f1f5f9;
  /* Vector Question Mark SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.15rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Highlight FAQ icon on hover or when expanded */
.tx-jpfaq .accordion-button:hover::before,
.tx-jpfaq .accordion-item:has(.accordion-collapse.show) .accordion-button::before {
  background-color: rgba(237, 28, 36, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
  transform: scale(1.05);
}

/* ==========================================================================
   6. Plus to 'x' Toggle Icon (Right side ::after)
   ========================================================================== */

/* Default state: ALWAYS '+' (0deg) */
.tx-jpfaq .accordion-button::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto; /* Pushes the toggle icon to the far right */
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: #1f2937;
  background-image: none !important;
  transform-origin: center center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  transform: rotate(0deg) !important; /* Guaranteed '+' on load */
}

/* Rotate '+' into 'x' ONLY when the collapse body is actually open (.show) */
.tx-jpfaq .accordion-item:has(.accordion-collapse.show) .accordion-button::after,
.tx-jpfaq .accordion-item:has(.accordion-collapse.collapsing:not(.collapse)) .accordion-button::after {
  transform: rotate(45deg) !important;
  color: #111827;
}

/* 7. Answer body */
.tx-jpfaq .accordion-body {
  padding: 0 1.25rem 1.25rem calc(1.25rem + 2rem + 0.875rem); /* Aligns with question text */
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #4b5563;
  background-color: #ffffff;
}

.tx-jpfaq .accordion-body p:last-child {
  margin-bottom: 0;
}

/* Links inside answers */
.tx-jpfaq .accordion-body a {
  color: var(--theme-primary, #ed1c24);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
  transition: color 0.2s ease;
}

.tx-jpfaq .accordion-body a:hover {
  color: var(--theme-secondary, #8c1515);
}

/* 8. Responsive styling (Mobile-first -> Desktop) */
@media (min-width: 768px) {
  .tx-jpfaq .accordion {
    gap: 1rem;
  }

  .tx-jpfaq .accordion-item {
    border-radius: 1rem !important;
  }

  .tx-jpfaq .accordion-button {
    font-size: 1.075rem;
    padding: 1.35rem 1.75rem;
  }

  .tx-jpfaq .accordion-button::before {
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 1rem;
    background-size: 1.25rem;
  }

  .tx-jpfaq .accordion-button::after {
    font-size: 1.5rem;
    margin-left: auto;
  }

  .tx-jpfaq .accordion-body {
    padding: 0 1.75rem 1.5rem calc(1.75rem + 2.25rem + 1rem);
    font-size: 1rem;
  }
}


/* Box Link Component */
.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: var(--gold-primary);
    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: var(--red-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px;
}

/* Newsletter & Issue Components */
.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: var(--gold-primary);
    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 var(--gold-primary); }
.tx-mfunewsletter a:hover figure figcaption, .tx-mfuissue a:hover figure figcaption { background: var(--red-primary); }
.tx-mfunewsletter a:hover img, .tx-mfuissue a:hover img { border-top: 5px solid var(--red-primary); }
.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;
}

/* Academic Year Filters */
.academicyear { display: flex; gap: 10px; margin-bottom: 15px; }
.academicyear a { padding: 7px 10px; border: 1px solid #efefef; background-color: var(--red-primary); color: #fff; }
.academicyear a:hover { background-color: #efefef; color: var(--red-primary); }

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

/* Social Box */
.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: var(--gold-primary);
    color: #FFFFFF;
}

/* Statistics Container */
#mfu-statistics-container {
    display: grid;
    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;
    padding: 35px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#mfu-statistics-container .stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--red-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#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;
    line-height: 1;
    color: var(--red-primary);
    margin-bottom: 12px;
    display: block;
    transition: transform 0.3s ease;
}

#mfu-statistics-container .stat-box:hover .stat-value { transform: scale(1.05); }

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

/* Special Layout Reset */
.special-layout *,
.special-layout a {
    color: inherit !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    text-align: inherit !important;
    text-decoration: unset !important;
    text-shadow: none !important;
    white-space: inherit !important;
}

.special-layout a { text-decoration: unset !important; }
.special-layout ul, .special-layout ol { list-style-type: initial !important; }
.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: var(--red-primary) !important; }

/* Empty Paragraph Cleanup */
.more-link p:empty,
.more-link p:contains('&nbsp;') {
    display: none;
}

/* ==========================================================================
   6. Dark Theme Overrides (WCAG 2.1 AA Compliant)
   ========================================================================== */

/* 6.1 Core Body & Background Surfaces */
body.dark-theme {
    background-color: #121212 !important;
    color: #e4e6eb !important;
}

body.dark-theme header,
body.dark-theme .header-primary {
    background-color: #1a1a1a !important;
    border-bottom-color: #2d2d2d !important;
}

body.dark-theme header .header-menu-bar {
    background: #242424 !important;
    border-bottom: 1px solid #333333;
}

/* 6.2 Typography & Headings */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
body.dark-theme .program-title,
body.dark-theme .link-news div[itemprop="headline"],
body.dark-theme .color-body {
    color: #f5f6f7 !important;
}

body.dark-theme p,
body.dark-theme li,
body.dark-theme span:not(.badge) {
    color: #cccccc;
}

body.dark-theme .frame-14 h2 {
    color: #f5f6f7 !important;
    border-bottom: 0px none transparent !important;
}

body.dark-theme .frame-14 h2::after {
    background: linear-gradient(90deg, #ff6b6b 0%, #ffd166 100%) !important;
}

/* 6.3 Card & Content Containers */
body.dark-theme .card,
body.dark-theme .article .card,
body.dark-theme .programme-section,
body.dark-theme .program-card,
body.dark-theme .box-link li a,
body.dark-theme .service-box ul li a {
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e6eb !important;
}

body.dark-theme .article:hover .card {
    border-color: rgba(255, 107, 107, 0.35) !important;
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.5) !important;
}

/* 6.4 Navigation Links & Interactive Controls */
body.dark-theme .menu-list > li > a {
    color: #ffffff !important;
}

/* Submenu Dropdown in Dark Mode */
body.dark-theme header .header-menu-bar .menu-list > li.has-submenu .dropdown-menu {
    background-color: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme header .header-menu-bar .menu-list > li.has-submenu .dropdown-menu li a {
    color: #e4e6eb !important;
    background-color: transparent !important;
}

body.dark-theme header .header-menu-bar .menu-list > li.has-submenu .dropdown-menu li a:hover,
body.dark-theme header .header-menu-bar .menu-list > li.has-submenu .dropdown-menu li:hover > a {
    background-color: #cf2d1e !important;
    color: #ffffff !important;
}

body.dark-theme .head-shortcut-menu li a {
    color: #b0b3b8 !important;
}

body.dark-theme .head-shortcut-menu li a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ff6b6b !important;
}

body.dark-theme .head-shortcut-menu li.star a {
    background: #cf2d1e !important;
    color: #ffffff !important;
}

body.dark-theme .side-menu ul li a:hover {
    background: #2a2a2a !important;
    color: #ff6b6b !important;
}

body.dark-theme .blog-shortcutmenu a {
    color: #e4e6eb !important;
}

body.dark-theme .blog-shortcutmenu ul li:hover {
    background: #2a2a2a !important;
}

body.dark-theme .blog-shortcutmenu ul li:hover a {
    color: #ff6b6b !important;
}

/* 6.5 Buttons & Tabs */
body.dark-theme .btn-primary,
body.dark-theme .view-all a {
    background-color: #cf2d1e !important;
    border-color: #cf2d1e !important;
    color: #ffffff !important;
}

body.dark-theme .btn-primary:hover,
body.dark-theme .view-all a:hover {
    background-color: #b32417 !important;
    color: #ffffff !important;
}

body.dark-theme .nav-tabs .nav-link {
    background-color: #242424 !important;
    color: #b0b3b8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .nav-tabs .nav-link.active {
    background-color: #cf2d1e !important;
    color: #ffffff !important;
    border-color: #cf2d1e !important;
}

body.dark-theme .news-nav-tabs.df-tab nav {
    border-bottom: 1px solid #333333 !important;
}

/* 6.6 Header Controls & Footer */
body.dark-theme header .header-primary .action-menu-list .action-menu-item a.active,
body.dark-theme header .header-primary .action-menu-list .action-menu-item a:hover,
body.dark-theme header .header-primary .action-menu-list .action-menu-item a.primary-link {
    background: transparent !important;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-theme .footer {
    background: #181818 !important;
    border-top: 1px solid #282828;
}

body.dark-theme footer .menu-box-list li a,
body.dark-theme footer .social-media-list ul li a {
    color: #b0b3b8 !important;
}

body.dark-theme footer .menu-box-list li a:hover,
body.dark-theme footer .social-media-list ul li a:hover {
    color: #ffffff !important;
}


/* ==========================================================================
   7. Responsive Media Queries
   ========================================================================== */
@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-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: var(--red-primary); color: #fff; }
    .news-nav-tabs.df-tab .nav-tabs .nav-link.active { font-family:'athitisemibold',sans-serif; }
    .service-box ul { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 991px) {
    .service-box ul { grid-template-columns: repeat(2, 1fr) !important; }
    .ribbon { max-width: 50px; }
    #mfu-statistics-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 15px;
    }
    #mfu-statistics-container .stat-value { font-size: 2.8rem; }
}

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

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

@media (max-width: 767.98px) {
    .line-break::after { content: ""; }
    .hidden-mobile {
        visibility: hidden;
        display: block;
        line-height: 0;
    }
}

@media (max-width: 600px) {
    .mobile-text { text-align: center; }
}

@media (max-width: 576px) {
    .service-box ul, .frame-22 ul { grid-template-columns: 1fr !important; }
    header .xs-head-logo img { width: 100%; max-width: 19rem; }
    .nav-link { font-size: 1rem; padding: 8px 12px; }
    #mfu-statistics-container { grid-template-columns: 1fr; }
    #mfu-statistics-container .stat-box { padding: 25px; }
    #mfu-statistics-container .stat-value { font-size: 2.5rem; }
}

/* ==========================================================================
   Header Accessibility & Theme Controls
   ========================================================================== */

/* Action Menu Layout */
.action-menu-list {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
}

.action-menu-item {
    display: flex;
    align-items: center;
}

/* Font Size Adjustment Buttons (A- / A+) */
.action-menu-list .primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--gold-primary, #b58f64);
    border-radius: 6px;
    background-color: transparent;
    color: #333333;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.action-menu-list .primary-link:hover,
.action-menu-list .primary-link.active {
    background-color: var(--red-primary, #cf2d1e);
    border-color: var(--red-primary, #cf2d1e);
    color: #ffffff;
}

/* Theme Toggle Buttons (Light / Dark Mode) */
.action-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background-color: #ffffff;
    color: #333333;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.action-theme:hover {
    background-color: #f3f4f6;
    color: var(--red-primary, #cf2d1e);
    border-color: var(--red-primary, #cf2d1e);
}

/* Dark Theme Overrides */
.dark-theme .action-menu-list .primary-link {
    border-color: #4b5563;
    color: #e5e7eb;
}

.dark-theme .action-menu-list .primary-link:hover,
.dark-theme .action-menu-list .primary-link.active {
    background-color: var(--red-primary, #cf2d1e);
    border-color: var(--red-primary, #cf2d1e);
    color: #ffffff;
}

.dark-theme .action-theme {
    background-color: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

.dark-theme .action-theme:hover {
    background-color: #374151;
    color: #ffffff;
}

/* Accessibility: Hide skip-link off-screen by default */
.skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
}

/* Reveal skip-link when focused via keyboard navigation */
.skip-link:focus {
  top: 1rem;
  left: 1rem;
}

/* Primary Header Component Styles */
.header-primary {
  /* Search Icon Button */
  #MFUIconsearch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease-in-out;

    /* Base Icon Styling */
    .icomoon-search {
      color: #212529; /* Default icon color */
      line-height: 1;
      transition: color 0.25s ease-in-out;
    }

    /* Hover and Focus-visible States */
    &:hover,
    &:focus-visible {
      background-color: var(--red-primary); /* Highlight background color */
      border-color: var(--red-primary);
      transform: scale(1.08);
      outline: none;

      /* Target icon directly to override inline/bootstrap color utilities */
      .icomoon-search {
        color: #ffffff !important; /* Force icon color change */
      }
    }
  }
}

/* ==========================================================================
   7. MFU Programme Master Bundle & Navigation
   ========================================================================== */
.list-programme {
    padding-top: 20px;
}

.list-programme .frame-type-menu_pages {
    border: none;
    background: transparent;
    padding: 15px;
    margin-bottom: 20px;
}

.list-programme h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #cf2d1e;
    border-bottom: 2px solid #eeeeee;
}

.list-programme ul {
    list-style: none;
    padding: 0;
}

.list-programme ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    color: #333333;
    transition: all 0.2s ease;
}

.list-programme ul li a:hover {
    color: #8e1c12 !important;
}

.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 50px 10px 10px !important;
    background: #f4f4f4;
    border-radius: 18px;
}

.programme-container .nav-link,
.sch-programme .nav-link {
    margin: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

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

.tab-scroll-btn {
    position: absolute;
    right: 15px;
    width: 32px;
    height: 32px;
    background: #8e1c12;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    animation: arrowBounce 2s infinite;
}

/* Fee Table Highlights */
.programme-container .header-total td {
    background: #b58f64 !important;
    color: #ffffff !important;
    padding: 18px 25px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(181, 143, 100, 0.3);
}

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

/* School Programme Tabs */
.sch-programme .nav-tabs {
    border-bottom: none !important;
    background-color: #f5f5f5;
    padding: 6px;
    border-radius: 50px;
    display: inline-flex !important;
    width: 100%;
}

.sch-programme .nav-link.active {
    color: #cf2d1e !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transform: none !important;
}

.sch-programme .ce-tab-pane ul li ul li a:hover {
    background: #fff5f5;
    border-color: #cf2d1e;
    color: #cf2d1e !important;
    padding-left: 30px;
}

/* 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); /* เพิ่มให้น่าสนใจเล็กน้อย */
}

/* Fix empty anchor tags generated by CMS globally */
.more-link a:not([href]) {
    display: none !important;
}

/* ==========================================================================
   08. TCAS ROUNDS & ADMISSION COMPONENTS
   ========================================================================== */

.tcas-wrapper {
    --mfu-red: var(--theme-primary, #8C1515);
    --r1: #2D3C59;
    --r2: #E5BA41;
    --r3: #D1855C;
    --r4: #94A378;
    font-family: 'athitisemibold', sans-serif;
    width: 100%;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 3px solid var(--mfu-red);
}

.tcas-header {
    text-align: center;
    margin-bottom: 2rem;
}

.tcas-header h2 {
    font-weight: 800;
    color: var(--r1);
    margin-bottom: 0.5rem;
}

.tcas-header h2 span {
    color: var(--mfu-red);
}

.tcas-header p {
    color: #555555;
    font-size: 1.1rem;
}

.tcas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

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

@media (min-width: 1024px) {
    .tcas-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tcas-card {
    flex: 1;
    width: 100%;
    min-width: 250px;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    background: #ffffff;
}

.tcas-card:hover {
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.tcas-card-head {
    padding: 1rem;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
}

.tcas-card.round-1 {
    border-color: var(--r1);
}

.tcas-card.round-1 .tcas-card-head {
    background: var(--r1);
}

.tcas-card.round-2 {
    border-color: var(--r2);
}

.tcas-card.round-2 .tcas-card-head {
    background: var(--r2);
}

.tcas-card.round-3 {
    border-color: var(--r3);
}

.tcas-card.round-3 .tcas-card-head {
    background: var(--r3);
}

.tcas-card.round-4 {
    border-color: var(--r4);
}

.tcas-card.round-4 .tcas-card-head {
    background: var(--r4);
}

.tcas-card-body {
    padding: 1.2rem;
    flex-grow: 1;
}

.tcas-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.tcas-label {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 10px;
    min-width: 65px;
    text-align: center;
}

.round-1 .tcas-label {
    background: #eef6ff;
    color: var(--r1);
}

.round-2 .tcas-label {
    background: #fff8ee;
    color: var(--r2);
}

.round-4 .tcas-label {
    background: #f4faee;
    color: var(--r4);
}

.tcas-date {
    color: #444444;
    font-weight: 500;
}

.tcas-card-foot {
    padding: 0.8rem;
    background: #fcfcfc;
    border-top: 1px solid #eeeeee;
    text-align: center;
    font-size: 1rem;
}

.tcas-card-foot a {
    color: #888888;
    text-decoration: none;
}

.tcas-card-foot a:hover {
    color: var(--mfu-red);
    text-decoration: underline;
}