header .header-primary .action-menu-list .action-menu-item a.primary-link {
    background-color: #333333;
    border-color: #333333;
    color: #FFFFFF;
}
header .header-primary .action-menu-list .action-menu-item a.primary-link:hover {
    background-color: #CF2D1E;
    border-color: #CF2D1E;
    color: #FFFFFF;
}

.language-toggle {
  display: flex;
  gap: 4px;
}

.language-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #e9ecef;
  color: #495057;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid #ced4da;
  border-radius: 0; /* Square shape */
  transition: background-color 0.3s, color 0.3s;
}

.language-link:hover {
  background-color: #d6d8db;
  color: #212529;
}

.language-link.active {
  background-color: #8c1515;
  color: white;
  border-color: #8c1515;
}

header .header-menu-bar .menu-list > li > a {
    font-size: 1.15rem;
}

header .header-menu-bar .menu-list  > li.active > a {
    background-color:#b58f64;
}

header .header-menu-bar .menu-list > li.has-submenu .dropdown-menu li a {
    font-size: 1.15rem;
}

header .header-menu-bar .menu-list > li.has-submenu > a {
    padding-right: 1rem;
}

/* @media (min-width: 992px){
  header .header-menu-bar .menu-list > li > a{
    font-size:0.95rem;
  }
  header .header-menu-bar .menu-list > li.has-submenu .dropdown-menu li a{
    font-size:0.85rem;
  }
  header .header-primary .head-shortcut-menu li a{
    font-size:15px;
  }
}
*/

/* * Minimalist Quick Menu Styles 
 * Focus on clean typography and subtle interaction
 * -------------------------------------------
 */

header .header-primary .head-shortcut-menu {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Softer divider */
}

header .header-primary .head-shortcut-menu ul {
  display: flex;
  justify-content: flex-end; /* Align to right for a cleaner look */
  gap: 5px;
  padding: 0;
  margin: 0;
}

header .header-primary .head-shortcut-menu li {
  list-style: none;
}

header .header-primary .head-shortcut-menu li a {
  font-family: "athitimedium", sans-serif; /* Slightly lighter weight for minimal feel */
  padding: 6px 15px;
  font-size: 1.1rem;
  color: #666; /* Neutral color */
  border-radius: 50px; /* Pill shape for modern look */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-block;
}

/* Minimal Hover: Soft background instead of solid dark red */
header .header-primary .head-shortcut-menu li a:hover {
  background: rgba(207, 45, 30, 0.08); /* Faint red tint */
  color: #cf2d1e;
  transform: translateY(-1px);
}

/* --- Mobile View Enhancements --- */
@media (max-width: 991px) {
  .head-shortcut-menu {
    background-color: #ffffff !important; /* Switch to clean white on mobile */
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }

  .head-shortcut-menu ul {
    display: grid !important; /* Use Grid for perfect alignment */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .head-shortcut-menu li {
    width: 100% !important;
    border: none !important; /* Remove messy borders */
  }

  .head-shortcut-menu li a {
    text-align: center;
    color: #333 !important;
    background: #f8f8f8; /* Soft button background */
    padding: 12px;
    border-radius: 12px;
    font-size: 0.95rem !important;
  }
  
  .head-shortcut-menu li a:hover {
    background: #cf2d1e !important;
    color: #ffffff !important;
  }
}

@media (max-width: 1024px) {
    header .header-primary .head-shortcut-menu li a {
      font-size: 0.85rem;
      padding: 5px 10px;
    }
}

/*Campus Button*/
/* 1. Target the row and make it a real grid */
.btn-grid-container {
    display: grid !important;
    /* This creates a 3-column grid (Desktop) and keeps items equal height */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    align-items: stretch;
    gap: 20px;
}

/* 2. Neutralize all TYPO3/CMS wrappers that break the height */
/* This makes the wrappers invisible to the layout so the button can grow */
.btn-grid-container .col,
.btn-grid-container .frame,
.btn-grid-container .ce-textpic,
.btn-grid-container .ce-bodytext,
.btn-grid-container .frame-type-text p,
.btn-grid-container .ce-bodytext p {
    display: contents !important; 
}

/* 3. The Actual Button */
.campus-btn {
    /* Font & Styling */
    font-family: "athitisemibold", sans-serif;
    font-weight: normal;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #2b2c27 !important;
    text-decoration: none !important;

    /* Stretching Logic */
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Box Model */
    min-height: 80px; 
    height: 100%; /* Now it should fill the Grid cell */
    padding: 20px 45px 20px 20px;
    
    background: #F8FAFC;
    border-radius: 12px;
    border: 2px solid #BDB395;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* 4. Arrow Right Icon */
/* Update your CSS in the ::after part */
.campus-btn::after {
    content: '›'; /* Minimalist Chevron */
    position: absolute;
    right: 20px;
    font-size: 1.5rem; /* Larger but thin */
    font-weight: 300; /* Thin weight */
    color: #BDB395;
    line-height: 1;
    transition: transform 0.3s ease, color 0.3s ease;
}

.campus-btn:hover::after {
    transform: translateX(5px) scale(1.1);
    color: #8e1c12;
}

.campus-btn:hover {
    border-color: #8e1c12;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

/* Optimized Grid for Mobile Devices */
@media screen and (max-width: 767px) {
    .btn-grid-container {
        /* Changes to 2 columns on small screens instead of 1 */
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 5px; /* Smaller gap for mobile */
        margin:2px;
    }
    
    .campus-btn {
        font-size: 0.9rem; /* Slightly smaller text for better fit */
        padding: 10px; /* Tighten padding */
        min-height:0px;
    }

    .campus-btn::after {
        display:none;
    }
}


.more-link a{
   font-family: 'athitiregular',sans-serif;
   background:#8c1515;
   color: #FFFFFF;
   padding: 5px 15px;
   border-radius: 10px;
}
.more-link a:hover{
    background:#cf2d1e;
    color:#FFFFFF;
}

/* Heading Styles */
.frame-6{
  display:inline-block;
  background-color:#cf2d1e;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 7px;
  margin-bottom: 10px;
  margin-top:10px;
}
.frame-6 h2{
  color:#FFFFFF;
}

.head-line2{
   border-left: 15px solid #cf2d1e;
   padding-left:5px;
}

.head-line3 {
  overflow: hidden;
  border-bottom:3px solid #cf2d1e;
  margin-bottom: 20px;
}
.head-line3 h2{
  display:inline-block; 
  background-color: #cf2d1e; 
  margin-bottom:0; 
  color:#ffffff; 
  padding: 3px 20px 2px 11px;
  font-size: 1.2em;
}

.head-line4{
  text-transform: capitalize;
  margin-bottom:10px;
  border-bottom:5px solid #cf2d1e;
  width: 100%;
}
.head-line4 h2{
  color:#232931;
  font-size:2rem;
}
.head-line4 h3{
  border-bottom:0px;
    font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: rgba(0, 0, 0, 0.4);
  padding-bottom: 10px;
  margin-bottom:0;
}

/* Frame 21 Landing Button Grid */
.frame-21 ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 15px;
  padding: 0;
  list-style: none;
  margin: 0;
}
.frame-21 ul li {
  border-radius: 20px;
}

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

.frame-21 ul li a:hover {
  background-image: linear-gradient(25deg, #4e1919, #752c2e, #9e4145, #c9575d);
  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;
}
@media (max-width: 991px) and (min-width: 576px) {
  .frame-21 ul{
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .frame-21 ul li a{
    font-size:0.9rem;
  }
}
@media (max-width: 575px) {
  .frame-21 ul{
    grid-template-columns: 1fr !important;
  }
    .frame-21 ul li a{
    font-size:0.9rem;
  }
}

/* Degree Menu Card */
 .container-card {
  position: relative;
  width: 100%;
}

.image-card {
  display: block;
  width: 100%;
  height: auto;
  padding:0;
}

.overlay-card {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-image: linear-gradient(25deg, #701900, #9c2a1b, #cb3d33, #fc504c);
}

.container-card:hover .overlay-card {
  opacity: 90%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}

.text-card {
  color: white;
  font-size: 2em;
  font-family:"athitiregular", sans-serif;
  font-weight:600;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.box-link li {
  font-size:1.1rem;
}

/* Holiday Cards */
 .holiday-card-official {
    border: 1px solid #dee2e6;
    border-radius: 12px;
    background: #ffffff;
    height: 100%;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .holiday-card-official:hover {
    border-color: #cccccc;
    background:#F6F5F2;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  }

  .holiday-card-official h3, 
  .holiday-card-official h4, 
  .holiday-card-official h5 {
    margin-bottom: 8px;
  }

  .bg-highlight-special { background-color: #fffaf0; }
  .bg-highlight-festival { background-color: #f0f7ff; }

/* Styles for past months or expired dates */
.past-event {
  opacity: 0.5;
  filter: grayscale(1);
  pointer-events: none;
  background-color: #f9f9f9 !important;
}

.past-event h3, 
.past-event h4, 
.past-event h5 {
  color: #a0aec0 !important;
}

/* =========================================
   Operation Manual List Styles
   Updated: 2026-01-19 (Enhanced Nested Logic)
   ========================================= */

.list-manual-container,
.list-manual-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Base List Item */
.list-manual-container > li {
    border-bottom: 1px solid #ececec;
    background-color: #ffffff;
}

.list-manual-container li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
}

/* Typography for Org names */
.list-manual-container h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.3px;
}

/* --- Sub-list Logic (Nested) --- */
.list-manual-container li ul li {
    border-top: 1px solid #f5f5f5; /* Thin divider for child levels */
}

.list-manual-container li ul li a {
    padding-left: 40px; /* Indent for prefix icon */
    position: relative;
}

/* Create a ">" prefix icon for child levels */
.list-manual-container li ul li a::before {
    content: '>'; 
    position: absolute;
    left: 22px;
    font-family: monospace;
    font-weight: bold;
    color: #ccc; /* Subtle color to avoid visual noise */
    font-size: 14px;
}

/* PDF Tag Style */
.list-manual-container li a::after {
    content: 'PDF';
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: #d9534f;
    padding: 2px 6px;
    border-radius: 3px;
    opacity: 0;
    transform: translateX(5px);
    transition: all 0.2s ease;
}

/* --- Hover States --- */
.list-manual-container li a:hover {
    background-color: #fcfcfc;
    color: #8e0000;
}

/* Update icon color when link is hovered */
.list-manual-container li ul li a:hover::before {
    color: #8e0000;
}

.list-manual-container li a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .list-manual-container li a {
        padding: 16px 15px;
    }
    .list-manual-container li ul li a {
        padding-left: 35px;
    }
    .list-manual-container li ul li a::before {
        left: 15px;
    }
}

/* Schools and Departments Organization Section */
.mfu-organization {
    list-style: none;
    padding: 0;
    margin: 0;
}

.org-item {
    border-bottom: 1px solid #eeeeee;
    transition: background-color 0.2s ease;
    background-color: #fff;
}

.org-item:hover {
    background-color: #fafafa;
}

.org-item-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 2rem;
}

.org-main-link {
    text-decoration: none;
    flex-grow: 1;
}

.org-details h4 {
    margin: 0;
    color: #8e0000;
    font-size: 1.1rem;
}

.org-details small {
    color: #666;
    font-size: 0.85rem;
}

.org-contact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 300px;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-link {
    text-decoration: none;
    color: #444;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
}

.contact-link i {
    margin-right: 10px;
    color: #8e0000;
}

/* Email Copy Button */
.btn-copy {
    background: transparent;
    border: none;
    color: #bbb;
    cursor: pointer;
    padding: 4px;
    font-size: 0.8rem;
    border-radius: 4px;
    transition: all 0.2s;
    position: relative;
}

.btn-copy:hover {
    color: #8e0000;
    background-color: #f0f0f0;
}

.btn-copy.copied::after {
    content: 'Copied!';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .org-item-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .org-contact {
        min-width: 100%;
    }
}
@media (max-width: 768px) {
    .contact-link[href^="tel:"] {
        padding: 8px 12px;
        background-color: #f8f9fa; /* Subtle background to indicate clickability */
        border-radius: 5px;
        display: inline-block;
        margin-bottom: 5px;
    }
}

/* Reset default ul values for nested sub-groups */
.sub-group {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 30px; /* Left indentation */
    margin-top: -5px;  /* Pull up closer to the parent item to reduce gap */
    margin-bottom: 15px;
}

/* Preserve original org-item design but adjust width/spacing */
.sub-group .org-item {
    margin-bottom: 10px; /* Reduce vertical spacing between sub-items */
}

/* Vertical guide line (Optional - visually connects child items to parent) */
.sub-group {
    border-left: 2px dashed #eee; /* Faint dashed line guiding from parent item */
    margin-left: 20px; /* Position the dashed line */
}

/* Global grayscale filter (Inactive)
html {
    filter: grayscale(0.7) sepia(0) brightness(1);
    -webkit-filter: grayscale(0.7) sepia(0) brightness(1);
}
*/

.blog-maincontent span.btn-info {
	background:#0dcaf0;
	border-color:#0dcaf0;
}

/* list หลักสูตร จาก element page menu */
.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;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

/* รายการหลักสูตร */
.list-programme ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-programme ul li {
    border-bottom: 1px solid #f3f3f3;
}

.list-programme ul li:last-child {
    border-bottom: none;
}

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

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

.list-programme ul li a span::before {
    content: "•";
    margin-right: 8px;
    color: transparent;
    transition: color 0.2s ease;
}

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

.list-programme ul li a::after {
    content: "\203A"; 
    font-size: 1.2rem;
    color: #ccc;
    transition: color 0.2s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Heading Styles */
.frame-6{
  display:inline-block;
  background-color:#cf2d1e;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 7px;
  margin-bottom: 10px;
  margin-top:10px;
}
.frame-6 h2{
  color:#FFFFFF;
}

.head-line2{
   border-left: 15px solid #cf2d1e;
   padding-left:5px;
}

.head-line3 {
  overflow: hidden;
  border-bottom:3px solid #cf2d1e;
  margin-bottom: 20px;
}
.head-line3 h2{
  display:inline-block; 
  background-color: #cf2d1e; 
  margin-bottom:0; 
  color:#ffffff; 
  padding: 3px 20px 2px 11px;
  font-size: 1.2em;
}

.head-line4{
  text-transform: capitalize;
  margin-bottom:10px;
  border-bottom:5px solid #cf2d1e;
  width: 100%;
}
.head-line4 h2{
  color:#232931;
  font-size:2rem;
}
.head-line4 h3{
  border-bottom:0px;
    font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: rgba(0, 0, 0, 0.4);
  padding-bottom: 10px;
  margin-bottom:0;
}

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

.sch-programme .nav-link {
    border: none !important;
    background: transparent !important;
    color: #666666 !important;
    font-family: 'athitimedium', sans-serif;
    font-size: 1.15rem !important;
    padding: 10px 25px !important;
    border-radius: 40px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sch-programme .nav-link.active {
    color: #CF2D1E !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    font-family: 'athitisemibold', sans-serif;
}

.sch-programme .nav-link:hover:not(.active) {
    color: #333333 !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
}

.sch-programme .ce-tab-pane header h3 {
    font-size: 1.6rem;
    color: #232931;
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 5px solid #CF2D1E;
    font-family: 'athitisemibold', sans-serif;
}

.sch-programme .ce-tab-pane ul {
    list-style: none;
    padding: 0;
}

.sch-programme .ce-tab-pane > ul > li {
    margin-bottom: 20px;
}

.sch-programme .ce-tab-pane > ul > li > a {
    display: block;
    padding: 15px 20px;
    background: #fdfdfd;
    color: #CF2D1E;
    font-family: 'athitisemibold', sans-serif;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    transition: all 0.3s ease;
}

.sch-programme .ce-tab-pane ul li ul {
    margin-top: 10px;
    padding-left: 0;
}

.sch-programme .ce-tab-pane ul li ul li {
    margin-bottom: 5px;
}

.sch-programme .ce-tab-pane ul li ul li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: #ffffff;
    color: #333333;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

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

.sch-programme .ce-tab-pane ul li ul li a::before {
    content: "•";
    margin-right: 10px;
    color: #CF2D1E;
    font-weight: bold;
}

@media (max-width: 576px) {
    .sch-programme .tab-navigation {
        text-align: center;
    }
    .sch-programme .nav-tabs {
        display: flex !important;
        width: 100%;
        min-width: unset;
    }
    .sch-programme .nav-link {
        padding: 8px 10px !important;
        font-size: 1rem !important;
        flex: 1;
    }
    .sch-programme .ce-tab-pane ul li ul li a:hover {
        padding-left: 20px;
    }
}

/*
 * MFU Prestigious Navigation Tabs (Scoped to .frame-type-ce_tabs)
 * --------------------------------------------------------------
 */

/* 1. Main Navigation Container */
.frame-type-ce_tabs .nav-tabs {
    border: none;
    gap: 8px; 
    margin-bottom: 2.5rem;
    padding: 10px;
    background: #f8f9fa; 
    border-radius: 60px; /* Fully rounded track for a more modern look */
    display: inline-flex; /* Keep the track wrapped around content */
}

/* 2. Base Tab Link Style */
.frame-type-ce_tabs .nav-link {
    color: #555555;
    font-size: 1.1rem;
    font-family: 'athitimedium', sans-serif;
    padding: 12px 25px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 50px !important; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

/* 3. Active State (The "Premium" Look) */
.frame-type-ce_tabs .nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: #8c1515 !important; 
    box-shadow: 0 10px 20px rgba(140, 21, 21, 0.18); 
    transform: translateY(-2px); 
}

/* 4. Hover State (Sophisticated Interaction) */
.frame-type-ce_tabs .nav-tabs .nav-link:hover:not(.active) {
    color: #CF2D1E !important;
    background-color: rgba(207, 45, 30, 0.08) !important; 
    transform: translateY(-1px);
}

/* 5. Decorative Active Indicator */
.frame-type-ce_tabs .nav-tabs .nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    pointer-events: none;
}

/* 6. Responsive Tuning for Mobile */
@media (max-width: 576px) {
    .frame-type-ce_tabs .nav-tabs {
        display: flex; /* Change to flex for mobile scrolling */
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 5px;
        border-radius: 10px; /* Less rounded on mobile for better space usage */
    }
    .frame-type-ce_tabs .nav-link {
        font-size: 0.95rem;
        padding: 10px 18px !important;
        white-space: nowrap; /* Prevent text wrapping inside scrollable tabs */
    }
}