/* ==========================================================================
   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.
   ========================================================================== */
.layout-99 .news-category{
    display:none !important;
}


/* 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: 1.1rem;
    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 BOX: REFINED DIGNIFIED IVORY & DEEP WINE (Mobile-First)
   Subtle, executive cream aesthetic with deep burgundy hover transition.
   ========================================================================== */

.service-box {
    font-family: "athitisemibold", "Prompt", sans-serif;
    width: 100%;
    margin: 2rem 0;
}

/* Responsive Grid (Mobile-First) */
.service-box ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .service-box ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (min-width: 992px) {
    .service-box ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

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

/* Executive Card Link */
.service-box ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 80px;
    padding: 18px 20px;
    background-color: #f7f5f0;
    border: 1px solid #e5dfd3;
    border-radius: 8px;
    color: #382e20;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: background-color 0.25s ease, 
                border-color 0.25s ease, 
                color 0.25s ease, 
                transform 0.25s ease, 
                box-shadow 0.25s ease;
}

/* Hover: Deep Burgundy Wine (Restrained & Prestigious) */
.service-box ul li a:hover {
    background-color: #4a1417;
    border-color: #3b0f12;
    color: #fbf9f5;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(35, 15, 17, 0.2);
}

/* Accessibility Focus State */
.service-box ul li a:focus-visible {
    outline: 2px solid #8c1515;
    outline-offset: 2px;
}

/* ==========================================================================
   DARK THEME COMPATIBILITY
   ========================================================================== */
body.dark-theme .service-box ul li a,
[data-theme="dark"] .service-box ul li a {
    background-color: #232830;
    border-color: #343c48;
    color: #e5e7eb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.dark-theme .service-box ul li a:hover,
[data-theme="dark"] .service-box ul li a:hover {
    background-color: #5c181c;
    border-color: #7a2025;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-theme) .service-box ul li a {
        background-color: #232830;
        border-color: #343c48;
        color: #e5e7eb;
    }
    body:not(.light-theme) .service-box ul li a:hover {
        background-color: #5c181c;
        border-color: #7a2025;
        color: #ffffff;
    }
}

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

/* Fluid responsive typography: scales smoothly from 1.75rem (mobile) to 3rem (desktop) */
.frame-15 h2 { 
    font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem); 
    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;
}

/* ==========================================================================
   10. SITEMAP (.frame-type-menu_sitemap)
   Universal Masonry Columns Layout for TYPO3 CMS (Neutral & Theme-Adaptive)
   ========================================================================== */
.frame-type-menu_sitemap {
    margin: 2rem 0;
}

/* Multi-column Grid (Mobile-first) */
.frame-type-menu_sitemap > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 1;
    column-gap: 1.5rem;
}

@media (min-width: 768px) {
    .frame-type-menu_sitemap > ul {
        column-count: 2;
    }
}

@media (min-width: 1200px) {
    .frame-type-menu_sitemap > ul {
        column-count: 3;
    }
}

/* Level 1: Masonry Section Panel (Neutral Card) */
.frame-type-menu_sitemap > ul > li {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--theme-primary, #475569);
    border-radius: 6px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-left-width 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.frame-type-menu_sitemap > ul > li:hover {
    border-left-width: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Level 1: Category Headline */
.frame-type-menu_sitemap > ul > li > a {
    display: block;
    font-family: inherit;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--theme-secondary, #1e293b);
    text-decoration: none;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    transition: color 0.2s ease;
}

.frame-type-menu_sitemap > ul > li > a:hover,
.frame-type-menu_sitemap > ul > li > a:focus-visible {
    color: var(--theme-primary, #0f172a);
}

/* Sub-list Structure */
.frame-type-menu_sitemap ul ul {
    list-style: none;
    padding-left: 0.75rem;
    margin: 0;
}

.frame-type-menu_sitemap ul ul li {
    position: relative;
    padding: 0.35rem 0;
}

/* Nested Links (Universal Neutral Text) */
.frame-type-menu_sitemap ul ul li a {
    color: #475569;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Bullet Point (Pure CSS Circle - 100% Encoding Glitch Free) */
.frame-type-menu_sitemap ul ul li a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--theme-primary, #64748b);
    margin-right: 8px;
    flex-shrink: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.frame-type-menu_sitemap ul ul li a:hover,
.frame-type-menu_sitemap ul ul li a:focus-visible {
    color: var(--theme-primary, #0f172a);
    transform: translateX(4px);
}

.frame-type-menu_sitemap ul ul li a:hover::before {
    background-color: var(--theme-primary, #0f172a);
    transform: scale(1.2);
}

/* ==========================================================================
   UNIVERSAL MFU MICROSITE BRAND HEADER (Mobile-First)
   Description: Standardized typographic header replacing static image banners.
   Compatible with TYPO3 CMS, Bootstrap 4/5, Light/Dark theme and WCAG AA/AAA.
   ========================================================================== */

/* Outer Containers */
.head-logo,
.xs-head-logo {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
}

/* Master Brand Link Wrapper */
.brand-header {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none !important;
    transition: opacity 0.25s ease-in-out;
}

.brand-header:hover {
    opacity: 0.9;
}

.brand-header:focus-visible {
    outline: 2px solid var(--theme-primary, #981c21);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Royal / University Emblem */
.brand-header .brand-emblem {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.brand-header .brand-emblem img {
    height: 48px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* MFU Royal Ribbon Vertical Divider */
.brand-header .brand-divider {
    width: 2px;
    align-self: stretch;
    min-height: 44px;
    background: linear-gradient(180deg, #cf2d1e 0%, #d4af37 60%, #b8860b 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Typography Container */
.brand-header .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
}

/* Level 1: Main Department / Faculty Title (H1) */
.brand-header .brand-title {
    font-family: 'athitisemibold', 'Prompt', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-primary, #981c21);
    letter-spacing: 0.2px;
    margin: 0;
    line-height: 1.2;
    transition: color 0.3s ease;
}

/* Level 2: University Affiliation */
.brand-header .brand-affiliation {
    font-family: 'athitisemibold', 'Prompt', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-primary, #981c21);
    margin: 0.1rem 0;
    line-height: 1.2;
    transition: color 0.3s ease;
}

/* Level 3: English Subtitle */
.brand-header .brand-subtitle {
    font-family: 'athitisemibold', 'Prompt', sans-serif;
    font-size: 0.6rem;
    color: var(--theme-secondary, #1b355a);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.25;
    transition: color 0.3s ease;
}

/* ==========================================================================
   DARK THEME OVERRIDES (WCAG AA/AAA Compliant)
   ========================================================================== */
body.dark-theme .brand-header:focus-visible,
[data-theme="dark"] .brand-header:focus-visible {
    outline-color: #d4af37;
}

body.dark-theme .brand-header .brand-title,
[data-theme="dark"] .brand-header .brand-title {
    color: #ffffff;
}

body.dark-theme .brand-header .brand-affiliation,
[data-theme="dark"] .brand-header .brand-affiliation {
    color: #e5e7eb;
}

body.dark-theme .brand-header .brand-subtitle,
[data-theme="dark"] .brand-header .brand-subtitle {
    color: #94a3b8;
}

/*@media (prefers-color-scheme: dark) {
    body:not(.light-theme) .brand-header:focus-visible {
        outline-color: #d4af37;
    }
    body:not(.light-theme) .brand-header .brand-title {
        color: #ffffff;
    }
    body:not(.light-theme) .brand-header .brand-affiliation {
        color: #e5e7eb;
    }
    body:not(.light-theme) .brand-header .brand-subtitle {
        color: #94a3b8;
    }
}*/

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Mobile-First Architecture)
   ========================================================================== */

/* Tablet Breakpoint (min-width: 768px) */
@media (min-width: 768px) {
    .brand-header {
        gap: 0.85rem;
    }

    .brand-header .brand-emblem img {
        height: 60px;
    }

    .brand-header .brand-title {
        font-size: 1.25rem;
    }

    .brand-header .brand-affiliation {
        font-size: 0.95rem;
    }

    .brand-header .brand-subtitle {
        font-size: 0.72rem;
    }
}

/* Desktop Breakpoint (min-width: 992px) */
@media (min-width: 992px) {
    .head-logo {
        padding: 0.5rem 0;
    }

    .brand-header {
        gap: 1.25rem;
    }

    .brand-header .brand-emblem img {
        height: 82px;
    }

    .brand-header .brand-divider {
        width: 3px;
    }

    .brand-header .brand-title {
        font-size: 2rem;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .brand-header .brand-affiliation {
        font-size: 1.35rem;
        margin: 0.25rem 0;
    }

    .brand-header .brand-subtitle {
        font-size: 1.1rem;
        letter-spacing: 0.6px;
    }
}

/* ==========================================================================
   Document Downloads Component (.tx_mfudocu) - Clean List Style
   ========================================================================== */

/* Container wrap */
.tx_mfudocu {
    max-width: 100%;
    font-family: 'Sarabun', sans-serif;
}

/* Document Item Row - Compact & Clean */
.tx_mfudocu .link-news {
    background: #ffffff;
    border-bottom: 1px solid #edf2f7; /* Single line separator */
    margin-bottom: 0 !important; /* Remove gap between items */
    transition: background-color 0.2s ease;
}

/* Item Hover - Subtle Background change */
.tx_mfudocu .link-news:hover {
    background: #f1f5f9;
}

/* Link Style - Responsive Padding */
.tx_mfudocu .link-news a {
    text-decoration: none !important;
    display: block;
    padding: 12px 15px; /* Compact padding */
}

/* Title Styling - Flexible & Clear */
.tx_mfudocu .mfudocu-title {
    color: #1A3263 !important; /* MFU Navy Blue */
    font-size: 1.2rem !important; /* Modest size */
    font-weight: 500 !important;
    line-height: 1.5;
    display: flex;
    align-items: flex-start; /* Align icon with first line */
    position: relative;
    padding-left: 30px; /* Space for the file icon */
}

/* File Icon (FontAwesome File) */
.tx_mfudocu .mfudocu-title::before {
    content: "\f15b"; /* FontAwesome File Icon code */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px; /* Fine-tune vertical position */
    color: var(--theme-primary, #5E0006); /* MFU Crimson / Theme Primary */
    font-size: 1rem;
    opacity: 0.85;
}

/* Update Date Styling - Metadata */
.tx_mfudocu .mfudocu-last-update {
    display: block;
    font-size: 0.8rem !important;
    color: #94a3b8 !important; /* Subtle gray */
    font-weight: 400;
    margin-top: 4px;
    padding-left: 30px; /* Aligned with text column */
}

/* Small upload icon in metadata */
.tx_mfudocu .mfudocu-last-update i {
    margin-right: 5px;
    color: #cbd5e1;
    font-size: 0.75rem;
}

/* ==========================================================================
   Dark Theme Compatibility (Rule 10)
   ========================================================================== */
body.dark-theme .tx_mfudocu .link-news,
.dark-theme .tx_mfudocu .link-news {
    background: #1e293b;
    border-bottom-color: #334155;
}

body.dark-theme .tx_mfudocu .link-news:hover,
.dark-theme .tx_mfudocu .link-news:hover {
    background: #283548;
}

body.dark-theme .tx_mfudocu .mfudocu-title,
.dark-theme .tx_mfudocu .mfudocu-title {
    color: #f1f5f9 !important;
}

body.dark-theme .tx_mfudocu .mfudocu-title::before,
.dark-theme .tx_mfudocu .mfudocu-title::before {
    color: var(--theme-secondary, #e2878b);
    opacity: 0.9;
}

body.dark-theme .tx_mfudocu .mfudocu-last-update,
.dark-theme .tx_mfudocu .mfudocu-last-update {
    color: #94a3b8 !important;
}

body.dark-theme .tx_mfudocu .mfudocu-last-update i,
.dark-theme .tx_mfudocu .mfudocu-last-update i {
    color: #64748b;
}
/* ==========================================================================
   TYPO3 NEWS: TOP NEWS HIGHLIGHT (Scoped to .news-list-item.layout-default)
   Displays SVG star badge and highlight border only on default layout lists.
   ========================================================================== */

/* Top News Card Container */
.news-list-item.layout-default .article.topnews {
    position: relative;
    background-color: #fdfaf6;
    border: 1px solid #f1e5d6;
    border-left: 5px solid var(--theme-primary, #981c21);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 2px 8px rgba(152, 28, 33, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Hover Interaction: Subtle Card Lift */
.news-list-item.layout-default .article.topnews:hover {
    transform: translateY(-2px);
    background-color: #ffffff;
    border-color: #e2d1bd;
    box-shadow: 0 8px 18px rgba(152, 28, 33, 0.12);
}

/* Pure Vector SVG Gold Star Circle Badge (No Text) */
.news-list-item.layout-default .article.topnews .news-list-date::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: var(--theme-primary, #981c21);
    /* 100% Crisp Vector SVG Gold Star */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffd700'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 1px 4px rgba(152, 28, 33, 0.3);
    flex-shrink: 0;
}

/* Date Styling */
.news-list-item.layout-default .article.topnews .news-list-date {
    font-weight: 600;
    color: #8c6d32;
    display: inline-flex;
    align-items: center;
}

/* Headline Styling */
.news-list-item.layout-default .article.topnews .link-news {
    font-weight: 600;
    font-size: 1.05rem;
    color: #1e293b;
    line-height: 1.45;
    margin-top: 5px;
    transition: color 0.2s ease;
}

.news-list-item.layout-default .article.topnews:hover .link-news {
    color: var(--theme-primary, #981c21);
}

/* ==========================================================================
   DARK THEME COMPATIBILITY (body.dark-theme)
   ========================================================================== */
body.dark-theme .news-list-item.layout-default .article.topnews,
[data-theme="dark"] .news-list-item.layout-default .article.topnews {
    background-color: #262124;
    border-color: #4a2b33;
    border-left-color: #d4af37;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-theme .news-list-item.layout-default .article.topnews:hover,
[data-theme="dark"] .news-list-item.layout-default .article.topnews:hover {
    background-color: #2e262a;
    border-color: #5c343e;
}

body.dark-theme .news-list-item.layout-default .article.topnews .link-news,
[data-theme="dark"] .news-list-item.layout-default .article.topnews .link-news {
    color: #f8fafc;
}

body.dark-theme .news-list-item.layout-default .article.topnews:hover .link-news,
[data-theme="dark"] .news-list-item.layout-default .article.topnews:hover .link-news {
    color: #e5a73e;
}

body.dark-theme .news-list-item.layout-default .article.topnews .news-list-date,
[data-theme="dark"] .news-list-item.layout-default .article.topnews .news-list-date {
    color: #d4af37;
}

body.dark-theme .news-list-item.layout-default .article.topnews .news-list-date::before,
[data-theme="dark"] .news-list-item.layout-default .article.topnews .news-list-date::before {
    background-color: #3d1c23;
    border: 1px solid #732332;
}