@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&display=swap');

/* =================================== */
/* ===== 1. VARIABLES (ตัวแปร) ====== */
/* =================================== */
:root {

  /* =================================
     BRAND COLORS
     ================================= */

  /* สีหลัก */
  --brand-orange: #C92A0A;

  /* Hover */
  --brand-orange-dark: #BF0E0A;

  /* พื้นหลัง */
  --brand-orange-light: #FFF0E2;

  /* แดงส้มสด - Accent */
  --brand-navy: #A42106;

  /* แดงเข้ม - Footer / Hover */
  --brand-navy-2: #B91F0C;


  /* =================================
     TEXT
     ================================= */

  --text-dark: #252525;
  --text-muted: #6B7280;


  /* =================================
     BACKGROUND
     ================================= */

  --bg-soft: #FFFBF8;


  /* =================================
     UI
     ================================= */

  --radius: 14px;
}

/* =================================== */
/* ===== 2. BASE (พื้นฐาน) ========== */
/* =================================== */
* { 
  font-family: 'Noto Sans Thai', sans-serif; 
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body {
  color: var(--text-dark);
  background-color: #fff;
  overflow-x: hidden;
}

a { text-decoration: none; }

.container {
  max-width: 100% !important;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* =================================== */
/* ===== 3. COMPONENTS (ส่วนประกอบ) == */
/* =================================== */

/* --- Buttons --- */
.btn-primary-brand {
  background: var(--brand-orange);
  color: #fff !important;
  font-weight: 600;
  border: none;
  transition: background-color 0.2s ease;
}
.btn-primary-brand:hover, 
.btn-primary-brand:active { 
  background: var(--brand-orange-dark); 
  color: #fff; 
}

.btn-primary-brand.brand-active {
  background: var(--brand-orange-dark);
}

.btn-dark-brand {
  background: var(--brand-navy);
  color: #fff !important;
  font-weight: 600;
  border: none;
}
.btn-dark-brand:hover { background: var(--brand-navy-2); color: #fff; }

.btn-icon-brand {
  width: 40px; height: 40px;
  background: var(--bg-soft);
  color: var(--text-dark);
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
}
.btn-icon-brand:hover { background: var(--brand-orange-light); color: var(--brand-orange); }

.btn-brand {
  background-color: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #ffffff;
  font-weight: 500;
}
.btn-brand:hover {
  background-color: var(--brand-navy-2);
  border-color: var(--brand-navy-2);
  color: #ffffff;
}

/* --- Navbar & Offcanvas --- */
.top-bar { background: var(--brand-orange-dark); color: #f0d9d2; }

.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}
.navbar > .container,
.navbar > .container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  flex-grow: 1;
  max-width: 100%;
  color: var(--text-dark);
  padding: 0;
  margin: 0;
}
.brand-logo {
  width: 60px; height: 60px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 10px;
}
.brand-logo-footer { background: var(--brand-orange); }
.navbar-brand .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.navbar-brand .fw-bold {
  font-size: clamp(0.85rem, 4.2vw, 1.05rem);
  font-weight: 800;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar-brand .small.text-muted {
  font-size: clamp(0.65rem, 3vw, 0.74rem) !important;
  line-height: 1.25;
}
.navbar-brand .lh-sm { min-width: 0; flex: 1 1 auto; }

.navbar .nav-link {
  color: var(--text-dark) !important;
  font-weight: 500;
  position: relative;
  display: inline-flex !important;
}
.navbar .nav-link.active-link,
.navbar .nav-link.active {
  color: var(--brand-orange) !important;
  font-weight: 700;
  background: transparent !important; /* ลบพื้นหลังสี่เหลี่ยมออก */
  border: none !important;            /* ลบกรอบสี่เหลี่ยมออก */
  box-shadow: none !important;        /* ลบเงาที่อาจจะทำให้ดูเหมือนมีกล่องออก */
}
.navbar .nav-link.active-link::after,
.navbar .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 3px;
  background: var(--brand-orange);
  border-radius: 3px;
}
.navbar .nav-link:hover { color: var(--brand-orange) !important; }

.offcanvas { background-color: #ffffff; border-left: 1px solid var(--brand-orange-light) !important; }
.offcanvas-header { background: var(--brand-navy); color: #ffffff; border-bottom: 1px solid var(--brand-navy-2); }
.offcanvas-title { font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }/* --- Navbar & Offcanvas --- */
.top-bar { 
  background: var(--brand-navy); 
  color: #f0d9d2;
  position: relative;
  z-index: 1031; /* บังคับให้แถบบนสุดอยู่เหนือภาพ Hero */
}

.navbar {
  position: relative;
  z-index: 1030; /* บังคับให้เมนูอยู่เหนือภาพ Hero */
  background: #fff;
  display: flex;
  flex-wrap: nowrap; /* บังคับไม่ให้ตัดบรรทัด */
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}
.navbar > .container,
.navbar > .container-fluid {
  display: flex;
  flex-wrap: nowrap; /* บังคับไม่ให้เมนูตกบรรทัด */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0; /* ป้องกันไม่ให้โลโก้ถูกบีบ แต่ไม่ขยายจนดันเมนูหาย */
  max-width: 100%;
  color: var(--text-dark);
  padding: 0;
  margin: 0;
}
.brand-logo {
  width: 80px; height: 80px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 10px;
}
.brand-logo-footer { background: var(--brand-orange); }
.navbar-brand .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.navbar-brand .fw-bold {
  font-size: clamp(0.85rem, 4.2vw, 1.05rem);
  font-weight: 800;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar-brand .small.text-muted {
  font-size: clamp(0.65rem, 3vw, 0.74rem) !important;
  line-height: 1.25;
}
.navbar-brand .lh-sm { min-width: 0; flex: 1 1 auto; }

/* บังคับเมนู "หน้าแรก" และปุ่มสีแดง ให้ชิดขวาและไม่หายไป */
.navbar-nav {
  flex-direction: row;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0; /* ห้ามบีบเมนูนี้ให้หายไป */
  gap: 0.5rem;
}
.navbar .nav-link {
  color: var(--text-dark) !important;
  font-weight: 500;
  position: relative;
  display: inline-flex !important;
  white-space: nowrap; /* ห้ามตัดคำในเมนู */
}
.navbar .nav-link.active-link,
.navbar .nav-link.active {
  color: var(--brand-orange) !important;
  font-weight: 700;
  background: transparent !important; /* ลบพื้นหลังสี่เหลี่ยมออก */
}
.navbar .nav-link.active-link::after,
.navbar .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 3px;
  background: var(--brand-orange);
  border-radius: 3px;
}
.navbar .nav-link:hover { color: var(--brand-orange) !important; }

.offcanvas { background-color: #ffffff; border-left: 1px solid var(--brand-orange-light) !important; }
.offcanvas-header { background: var(--brand-navy); color: #ffffff; border-bottom: 1px solid var(--brand-navy-2); }
.offcanvas-title { font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.9; }
.offcanvas .nav-link {
  display: block !important;
  color: var(--text-dark) !important;
  font-weight: 600; font-size: 1.05rem;
  padding: 0.9rem 1rem !important;
  border-bottom: 1px solid #f0f1f4;
  border-radius: 8px;
  margin-bottom: 0.25rem;
}
.offcanvas .nav-link.active-link, 
.offcanvas .nav-link.active {
  color: var(--brand-orange) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 700;
}
.offcanvas .nav-link:hover { background-color: var(--brand-orange-light); color: var(--brand-orange-dark) !important; padding-left: 1.25rem !important; }
.offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.9; }
.offcanvas .nav-link {
  display: block !important;
  color: var(--text-dark) !important;
  font-weight: 600; font-size: 1.05rem;
  padding: 0.9rem 1rem !important;
  border-bottom: 1px solid #f0f1f4;
  border-radius: 8px;
  margin-bottom: 0.25rem;
}



/* --- Section Titles --- */
.section-title { font-weight: 800; color: var(--brand-navy); margin-bottom: 0; font-size: 1.25rem; }
.section-title .bar {
  display: inline-block;
  width: 6px; height: 24px;
  background: var(--brand-orange);
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: -4px;
}
.section-link { color: var(--brand-orange); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.section-description { margin-top: 0; margin-left: 24px; font-size: 14px; color: #777; }

/* --- Badges --- */
.badge-year { background: var(--brand-orange-light); color: var(--brand-orange-dark); font-weight: 700; border-radius: 999px; padding: .35rem .9rem; }
.badge-new { background: var(--brand-orange-dark); }
.badge-important { background: var(--brand-orange); }

/* --- Generic Cards --- */
.date-card {
  background: #fff; border: 1px solid #eef0f4; border-radius: 12px;
  text-align: center; padding: 1rem .5rem;
  box-shadow: 0 6px 16px rgba(120,20,15,.05); height: 100%;
}
.date-card .cal-icon { color: var(--brand-orange); font-size: 1.3rem; margin-bottom: 4px; }
.date-card .day-num { font-size: 1.2rem; line-height: 1.4; color: #343a40; font-weight: 800; }
.date-card .month-year { font-size: 0.85rem; color: var(--brand-orange); font-weight: 700; margin-top: 2px; }
.date-card .event-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; font-weight: 600; }
.date-card .event-desc { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; line-height: 1.3; font-weight: 700; }

.doc-card {
  background: #fff; border: 1px solid #eef0f4; border-radius: 12px;
  padding: 1rem; display: flex; align-items: center; gap: .8rem; height: 100%;
  box-shadow: 0 6px 16px rgba(120,20,15,.05);
}
.doc-card .doc-icon { font-size: 1.8rem; color: #dc3545; }
.doc-card .doc-icon.docx { color: var(--brand-navy); }
.doc-card .doc-title { font-size: .85rem; font-weight: 600; line-height: 1.3; }
.doc-card .doc-dl { color: var(--brand-orange); font-weight: 700; font-size: .8rem; }

/* --- Empty State --- */
.empty-state-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 320px; text-align: center; padding: 2rem;
  color: #8a92a6; background-color: #f9fafb;
  border: 2px dashed #e3e6ed; border-radius: 16px; margin-top: 1.5rem;
}
.empty-state-box .empty-icon {
  width: 80px; height: 80px; background-color: #ffffff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; box-shadow: 0 6px 16px rgba(0,0,0,0.05); color: var(--brand-orange);
}
.empty-state-box p { font-size: 1.1rem; font-weight: 500; color: #5a6478; margin: 0; }

/* --- Video Cards & Modal --- */
.video-card {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  overflow: hidden; cursor: pointer; height: 100%; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.video-card:hover, .video-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -8px rgba(168, 12, 36, .25);
  border-color: rgba(168, 12, 36, .2);
}
.video-thumb { position: relative; aspect-ratio: 16 / 9; background: #e9ecef; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-thumb-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 48%, rgba(0,0,0,0) 78%);
}
.video-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0); opacity: 0; transition: opacity .25s ease;
}
.video-card:hover .video-play-overlay { opacity: 1; background: rgba(0,0,0,.25); }
.video-thumb-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 10px;
  color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); z-index: 2;
}
.play-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--brand-orange);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: transform .25s ease;
}
.video-card:hover .play-btn { transform: scale(1.1); background: var(--brand-orange); color: #fff; }
.video-duration { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.75); color: #fff; font-size: .65rem; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.video-badge-featured { position: absolute; left: 6px; top: 6px; background: var(--brand-orange); color: #fff; font-size: .6rem; padding: 2px 6px; border-radius: 999px; font-weight: 600; }
.video-info { padding: 8px 10px 10px; }
.video-category { font-size: .65rem; color: #888; background: #f1f1f1; padding: 2px 6px; border-radius: 4px; }

#videoModal .modal-content { background:#000; border: none; }
#imgZoomModal .modal-content { background: #111; border: none; }
#imgZoomModal .modal-header { border: none; padding: .75rem 1rem; }
#imgZoomModal .modal-title { color: #fff; font-size: .95rem; }
#imgZoomModal .modal-body { padding: 0 1rem 1rem; }

/* =================================== */
/* ===== 4. PAGE SPECIFIC ============ */
/* =================================== */

/* --- Page Hero (Shared) --- */
.page-hero { background: var(--brand-navy); color: #fff; padding: 3rem 0; }
.page-hero h1 { 
  font-weight: 800; 
  font-size: clamp(1.25rem, 5vw, 1.75rem); 
  line-height: 1.4; 
}
.page-hero h1 .hero-year-badge { font-size: 0.7em; }
.page-hero-desc { font-size: .85rem; opacity: .85; margin-top: 0.25rem; }
.breadcrumb-custom a { color: #f0d9d2; }
.breadcrumb-custom .active { color: var(--brand-orange); }

/* --- Homepage: Hero --- */

.hero-full {
  position: relative; background-size: cover; background-position: center center;
  overflow: hidden; min-height: 375px; display: flex; align-items: center;
}
.hero-full-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  z-index: 1;
}
.hero-full > .position-relative { z-index: 2; width: 100%; }
.hero-content { min-height: 375px; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.hero-copy { position: relative; z-index: 2; }
.hero-title {
  margin-bottom: 1.2rem !important; font-weight: 800; line-height: 1.15; letter-spacing: -.5px;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem); color: var(--text-dark);
  text-shadow: 0 2px 14px rgba(255,255,255,.55);
  font-family: 'Playfair Display', 'Noto Sans Thai', serif;
}
.hero-title .accent {
  display: inline-block; margin-top: .2rem; font-size: 0.72em;
  background: linear-gradient(90deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; padding-bottom: .35rem;
}
.hero-title .accent::after {
  content: ''; position: absolute; left: 2px; bottom: 0;
  width: 60px; height: 3px; background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-dark));
  border-radius: 4px;
}
.hero-subtitle { color: var(--text-muted); max-width: 460px; font-size: .92rem; line-height: 1.6; }
.hero-badge {
  display: inline-flex; align-items: center; background: var(--brand-orange); color: #fff;
  font-weight: 700; padding: .55rem 1.15rem; border-radius: 999px; font-size: .9rem;
  box-shadow: 0 5px 14px rgba(212,67,19,.18);
}
.hero-year-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45);
  border-radius: 30px; font-size: .55em; font-weight: 700; padding: .35em 1em; margin-left: .5rem;
}

/* --- Homepage: News Panel --- */
.news-panel {
  position: relative; z-index: 3; background: #fff; border-radius: var(--radius);
  box-shadow: 0 18px 45px rgba(120,20,15,.18); border: 1px solid rgba(238,240,244,.9);
  overflow: hidden; max-height: 360px;
}
.news-panel .panel-header { background: var(--brand-orange); color: #fff; border-radius: var(--radius) var(--radius) 0 0; font-weight: 700; padding: .8rem 1.1rem; min-height: 44px; }
.news-panel .panel-header a { color: #fff !important; font-weight: 600; }
.news-panel-body { background: #fff; }
.news-list-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .72rem 1.1rem; border-bottom: 1px solid #f0f1f4; font-size: .9rem; }
.news-list-item:last-child { border-bottom: none; }
.news-link { min-width: 0; color: var(--text-dark); font-weight: 500; }
.news-link:hover { color: var(--brand-orange); }
.news-title { overflow-wrap: anywhere; }
.news-list-item .news-date { white-space: nowrap; flex: none; font-size: .76rem; color: var(--text-muted); }
.news-panel .flex-grow-1 { overflow-y: auto; }

/* --- Homepage: Countdown --- */
.ceremony-countdown-section { margin-top: -110px; margin-bottom: 4.5rem !important; position: relative; z-index: 3; }
.countdown-banner {
  background: #fff; border-radius: 24px; max-width: 640px; margin: 0 auto;
  padding: 2rem 2rem 1.75rem; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .5rem; color: var(--brand-navy);
  /*box-shadow: 0 20px 45px rgba(120,20,15,.18);*/

  border: 2px solid var(--brand-orange);
  box-shadow: 0 12px 32px rgba(120, 30, 10, .12);

}
.countdown-label { font-weight: 700; font-size: 2rem; color: var(--brand-orange); line-height: 1.5; }
.countdown-banner .countdown-label h2 { font-size: 1.25rem; font-weight: 700; margin: 0; display: inline; }
.countdown-date { font-size: 2.2rem; font-weight: 800; margin: 15px 0 20px 0; line-height: 1.3; color:var(--brand-orange-dark)}
.countdown-date i { font-size: 1.8rem; vertical-align: middle; }
.countdown-date .small { opacity: 0.85; font-weight: 400; }
.countdown-timer { display: flex; justify-content: center; gap: .75rem; margin-top: .75rem; }
.countdown-unit { background: var(--brand-navy); border-radius: 12px; min-width: 68px; padding: .6rem .5rem; text-align: center; }
.countdown-num { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.countdown-text { display: block; font-size: .72rem; opacity: .85; margin-top: .25rem; color: #fff; }
.countdown-arrived { font-weight: 700; font-size: 1.1rem; color: var(--brand-navy); }
.countdown-location {
  display: flex; align-items: center; gap: .6rem; background: var(--bg-soft); border-radius: 999px;
  padding: .6rem 1.1rem; font-size: .85rem; color: var(--text-muted); max-width: 100%; margin-top: 1rem;
}
.countdown-location .location-icon { flex: none; width: 32px; height: 32px; background: var(--brand-orange-light); color: var(--brand-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.countdown-location .location-text { text-align: left; line-height: 1.4; }

/* --- Homepage: Quick Links & Photo Banner --- */
.quick-link-strip { background: #fff; border: 1px solid var(--brand-orange-light); border-radius: var(--radius); box-shadow: 0 10px 25px rgba(120,20,15,.05); }
.quick-link { text-align: center; padding: 1.2rem .5rem; color: var(--text-dark); font-weight: 600; font-size: .92rem; }
.quick-link .qicon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--brand-orange-light); color: var(--brand-orange);
  display: flex; align-items: center; justify-content: center; margin: 0 auto .6rem; font-size: 1.4rem; transition: all .2s ease;
}
.quick-link:hover .qicon { background: var(--brand-orange); color: #fff; transform: translateY(-3px); }
.quick-link:hover { color: var(--brand-orange); }

.photo-banner {
  background: var(--brand-navy); color: #fff; border-radius: var(--radius);
  padding: 1.3rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.text-light-50 { color: #d6ada4; }

/* --- Homepage: Steps --- */
.steps-list { list-style: none; padding: 0; margin: 0; }
.steps-list li { display: flex; gap: 1rem; padding: .85rem 0; border-bottom: 1px dashed #e7e9ee; }
.steps-list li:last-child { border-bottom: none; }
.step-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-orange); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.step-title { font-weight: 600; color: var(--text-dark); }
.step-desc { font-size: .85rem; color: var(--text-muted); }

/* --- FAQ --- */
.faq-item .accordion-button { font-weight: 600; color: var(--brand-navy); }
.faq-item .accordion-button:not(.collapsed) { background: var(--brand-orange-light); color: var(--brand-orange-dark); }
.accordion-button:focus { box-shadow: none; }

/* --- Contact --- */
.contact-card { background: #fff; border: 1px solid #eef0f4; border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 10px 25px rgba(120,20,15,.05); }
.qr-box { width: 90px; height: 90px; background: var(--bg-soft); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.qr-box img.qr-img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }

/* =================================== */
/* ===== SCHEDULE PAGE STYLES ======== */
/* =================================== */

.overview-card { 
  border: 1px solid #eef0f4; border-radius: 14px; padding: 1.5rem; 
  height: 100%; background: var(--bg-soft); position: relative; overflow: hidden; 
  transition: transform .2s, box-shadow .2s; 
}
.overview-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.overview-card .ov-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; background: var(--ov-icon-bg, var(--brand-orange)); margin-bottom: .9rem; }
.overview-card .ov-title { font-weight: 700; color: var(--ov-title-color, var(--brand-orange)); margin-bottom: .35rem; font-size: 1.02rem; }
.overview-card .ov-date { font-weight: 700; color: var(--brand-navy); font-size: 1.05rem; margin-bottom: .35rem; }
.overview-card .ov-desc { color: var(--text-muted); font-size: .85rem; margin-bottom: 1rem; }
.overview-card .ov-btn { border: none; background: transparent; color: var(--ov-title-color, var(--brand-orange)); font-weight: 600; padding: 0; display: inline-flex; align-items: center; gap: .35rem; }
.overview-card.ov-minor    { --ov-icon-bg: var(--brand-orange); --ov-title-color: var(--brand-orange); }
.overview-card.ov-major    { --ov-icon-bg: var(--brand-orange-dark); --ov-title-color: var(--brand-orange-dark); }
.overview-card.ov-ceremony { --ov-icon-bg: var(--brand-navy); --ov-title-color: var(--brand-navy); }
.overview-card.ov-photo    { --ov-icon-bg: var(--brand-navy-2); --ov-title-color: var(--brand-navy-2); }

.box-tabs { border-bottom: 2px solid #eef0f4; padding-bottom: 10px; }
.box-tabs .nav-link { border: 1px solid #dee2e6; border-radius: 8px; color: var(--text-dark); background: #fff; font-weight: 600; padding: 0.6rem 1.5rem; margin-right: 0.5rem; transition: all 0.2s; }
.box-tabs .nav-link:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.box-tabs .nav-link.active { background: var(--brand-orange); color: #fff; border-color: var(--brand-orange); box-shadow: 0 4px 12px rgba(212, 67, 19, 0.2); }
.box-tabs .nav-link.highlight-tab { background: var(--brand-orange); color: #fff; border: 1px solid var(--brand-orange); font-weight: 700; box-shadow: 0 4px 10px rgba(212, 67, 19, 0.25); position: relative; }
.box-tabs .nav-link.highlight-tab::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; background: #ffc107; border-radius: 50%; border: 2px solid #fff; }

.section-heading { font-weight: 700; color: var(--brand-navy); margin-bottom: 1rem; }
.date-pill { border: 1px solid #dee2e6; background: #fff; color: var(--text-dark); border-radius: 8px; padding: 0.45rem 1.1rem; font-weight: 600; font-size: .9rem; transition: all .15s; cursor: pointer; }
.date-pill:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.date-pill.active { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.time-badge { border-radius: 8px; padding: 0.45rem 1rem; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.badge-morning   { background: var(--brand-orange-light); color: var(--brand-orange-dark); }
.badge-afternoon { background: #FBD9C7; color: var(--brand-navy-2); }
.badge-photo-time { background: var(--brand-navy-2); color: #fff; }

.minor-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.minor-filter-bar .date-pill { cursor: pointer; }

.schedule-table { 
  border-collapse: separate; 
  border-spacing: 0; 
  width: 100%; 
  overflow: hidden; 
  border-radius: 10px; 
  box-shadow: 0 4px 14px rgba(0,0,0,.04); 
  border: 1px solid #c4c9d0; 
}
.schedule-table thead th { 
  background: var(--brand-navy); 
  color: #fff; 
  font-weight: 600; 
  padding: 0.9rem 1rem; 
  border-bottom: 1px solid #4a1416;
  border-right: 1px solid rgba(255,255,255,.18); 
  white-space: nowrap; 
}
.schedule-table thead th:last-child { border-right: none; }
.schedule-table tbody td { 
    padding: 0.9rem 1rem; 
    vertical-align: middle; 
    border-bottom: 1px solid #d4d4d4; 
    border-right: 1px solid #d4d4d4; 
    background: #fff; 
}
.schedule-table tbody td:last-child { border-right: none; }
.schedule-table tbody tr:last-child td { border-bottom: none; }
.schedule-table .loc-line { font-size: .82rem; color: #555; display: flex; align-items: flex-start; gap: .3rem; padding-bottom: .35rem; margin-bottom: .35rem; border-bottom: 1px dashed #cfd2d6; }
.schedule-table .loc-line:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.schedule-table .loc-line i { color: var(--brand-orange); margin-top: .15rem; }
.schedule-table .loc-tag { font-weight: 600; color: var(--brand-navy); margin-right: .15rem; }
.schedule-table .date-cell-day { font-weight: 700; color: var(--brand-navy); }
.schedule-table .date-cell-num { font-weight: 800; font-size: 1.3rem; color: var(--brand-orange); line-height: 1; }
.schedule-table .cell-list { margin: 0; padding-left: 1.1rem; font-size: .88rem; }
.schedule-table .cell-list li { margin-bottom: .2rem; }
.schedule-table .cell-empty { color:#adb1ba; }


.th-width-sm { width: 10%; }
.th-width-md { width: 15%; }
.th-width-lg { width: 25%; }
.faculty-item-table { border: none; padding: 0; background: transparent; }

.campus-table-block { margin-bottom: 2.25rem; }
.campus-table-heading { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--brand-navy); background: var(--bg-soft); border: 1px solid #eef0f4; border-bottom: none; border-radius: 10px 10px 0 0; padding: .75rem 1.1rem; font-size: 1.02rem; }
.campus-table-heading i { color: var(--brand-orange); font-size: 1.1rem; }
.campus-table-block .schedule-table { border-radius: 0 0 10px 10px; border-top: none; }
.campus-table-block .schedule-table thead th:first-child { border-top-left-radius: 0; }
.campus-table-block .schedule-table thead th:last-child { border-top-right-radius: 0; }

.day-grid { border: 1px solid #c4c9d0; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.day-grid-header { display: grid; grid-template-columns: 14% 1fr 1fr 18% 11%; background: var(--brand-navy); color: #fff; font-weight: 600; }
.day-grid-header > div { padding: 0.9rem 1rem; border-right: 1px solid rgba(255,255,255,.18); white-space: nowrap; }
.day-grid-header > div:last-child { border-right: none; }
.day-grid-row { display: grid; grid-template-columns: 14% 1fr 1fr 18% 11%; border-top: 1px solid #d4d4d4; }
.day-grid-row > div { padding: 0.9rem 1rem; border-right: 1px solid #d4d4d4; background: #fff; vertical-align: middle; }
.day-grid-row > div:last-child { border-right: none; }
.day-cell-date-text { font-weight: 700; color: var(--brand-navy); white-space: nowrap; }
.day-cell-session-label { display: none; }

.detail-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; padding: 1rem 1.25rem; background:#fff; border-bottom:1px solid #f0f0f3; }
.detail-footer { display:flex; gap:.6rem; flex-wrap:wrap; padding: 1rem 1.25rem; background:#fafafc; }
.detail-footer.footer-center { justify-content: center; }
.detail-title { font-size: 1.1rem; color: var(--brand-navy); font-weight: 700; }
.detail-title.lg { font-size: 1.2rem; }

.major-card-body { padding: 2rem; background: #fbf7f3; }
.major-columns { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

.session-col { background: #fff; border: 1px solid #f0e4d8; border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(212,67,19,.06); transition: transform .25s ease, box-shadow .25s ease; }
.session-col:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(212,67,19,.12); }
.session-col-head { text-align: center; padding: 1.25rem 1.25rem 1.5rem; color: #fff; position: relative; }
.session-col.session-morning .session-col-head { background: var(--brand-orange); }
.session-col.session-afternoon .session-col-head { background: var(--brand-navy); }
.session-col-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin: 0 auto .6rem; }
.session-col-head .session-label { font-weight: 700; font-size: 1.05rem; }
.session-col-head .session-time { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); border-radius: 30px; padding: .35rem 1rem; font-weight: 600; font-size: .85rem; margin-top: .6rem; }
.session-col-body { padding: 1.5rem; flex: 1; background: #fffaf6; }
.session-col-count { text-align: center; font-size: .8rem; font-weight: 700; color: var(--brand-orange-dark); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .3px; }
.session-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.session-list .faculty-item { background: #fff; border: 1px solid #f0e4d8; border-radius: 10px; padding: .6rem .9rem; font-size: .9rem; color: var(--text-dark); display: flex; align-items: center; gap: .6rem; transition: background .15s, border-color .15s, transform .15s; }
.session-list .faculty-item:hover { background: var(--brand-orange-light); border-color: var(--brand-orange); transform: translateX(3px); }
.session-list .faculty-item::before { content: '\F287'; font-family: "bootstrap-icons"; flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--brand-orange-light); color: var(--brand-orange-dark); border-radius: 50%; font-size: .8rem; }
.session-empty { text-align: center; color: #adb1ba; font-size: .88rem; padding: 2rem 0; margin: 0; }

.ceremony-card-body { padding: 2.5rem 2rem 2rem; background: #fbf7f3; }
.ceremony-columns { display: grid; grid-template-columns: 1fr; gap: 2rem; position: relative; }
.ceremony-day-item { display: flex; }
.ceremony-col { width: 100%; background: #fff; border: 1px solid #f0e4d8; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(212,67,19,.07); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; }
.ceremony-col:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(212,67,19,.14); }
.ceremony-col-top-d1 { background: var(--brand-orange); color: #fff; padding: 1.5rem 1.5rem 1.75rem; text-align: center; border-radius: 16px 16px 0 0; }
.ceremony-col-top-d2 { background: var(--brand-navy); color: #fff; padding: 1.5rem 1.5rem 1.75rem; text-align: center; border-radius: 16px 16px 0 0; }
.ceremony-col-eyebrow { display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .5px; padding: .25rem .9rem; margin-bottom: .7rem; }
.ceremony-col-head { font-size: 1.15rem; font-weight: 700; margin-bottom: .8rem; line-height: 1.3; }
.ceremony-col-time { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); border-radius: 30px; padding: .45rem 1.2rem; font-weight: 700; font-size: .92rem; }
.ceremony-col-time-loc { background: rgba(255,255,255,.2); margin-top: .5rem; }
.ceremony-col-body { padding: 1.5rem; flex: 1; background: #fffaf6; }
.ceremony-col-count { text-align: center; font-size: .8rem; font-weight: 700; color: var(--brand-orange-dark); margin-bottom: 1.1rem; text-transform: uppercase; letter-spacing: .3px; }
.ceremony-col .session-list li.faculty-item { padding: .65rem 1rem; font-size: .92rem; gap: .65rem; }
.ceremony-col .session-list li.faculty-item::before { width: 28px; height: 28px; font-size: .85rem; }

.info-card { border-left: 5px solid var(--brand-orange) !important; }
.info-img { max-width: 100%; border: 1px solid #eef0f4; border-radius: .25rem; }

/* =================================== */
/* ===== GRADUATE SEATING STYLES ===== */
/* =================================== */

.filter-form-label { color: var(--brand-navy); font-size: .875rem; font-weight: 600; margin-right: 0.5rem; }

.faculty-columns { 
  display: grid; 
  grid-template-columns: 1fr; /* เริ่มต้นที่ 1 คอลัมน์ (มือถือ) */
  gap: 1.25rem; 
}
/* บังคับให้ปุ่มและชื่อคณะขึ้นบรรทัดใหม่ได้ เพื่อไม่ให้ดันขนาดการ์ด */
.faculty-card { min-width: 0; }
.faculty-card-name { word-break: break-word; padding: 0 0.5rem; }
.faculty-card-btn { white-space: normal; }
.faculty-card {
  background: #fff; border: 1px solid #f0e4d8; border-radius: 16px; overflow: hidden;
  height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2rem 1.25rem; box-shadow: 0 6px 20px rgba(212,67,19,.06); transition: transform .2s, box-shadow .2s;
}
.faculty-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(212,67,19,.14); }
.faculty-card-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid #f0e4d8;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--brand-orange); margin-bottom: 1rem;
}
.faculty-card-name { font-weight: 700; color: var(--brand-navy); margin-bottom: 1.25rem; flex: 1; display: flex; align-items: center; text-align: center; }
.faculty-card-updated { font-size: .75rem; color: var(--text-muted); margin-top: .5rem; }
.faculty-empty { text-align: center; color: #adb1ba; font-size: .9rem; padding: 3.5rem 0; }
/*.faculty-card-btn { padding: .75rem 1rem; font-weight: 600; border-radius: 10px; }*/

/* =================================== */
/* ===== 5. UTILITIES ================ */
/* =================================== */
.rounded-brand { border-radius: var(--radius); }
.bg-soft { background: var(--bg-soft); }
.text-brand { color: var(--brand-orange); }
.text-navy { color: var(--brand-navy); }
.text-afternoon { color: #198754; }

/* =================================== */
/* ===== 6. MEDIA QUERIES (จอตอบสนอง) = */
/* =================================== */

/* --- จอใหญ่ (Desktop) --- */
@media (min-width: 992px) {
  .container { padding-left: 3rem; padding-right: 3rem; }
  .container { padding-left: 3rem; padding-right: 3rem; }
  .container { padding-left: 3rem; padding-right: 3rem; }
}

@media (min-width: 768px) {
  .major-columns { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .ceremony-columns { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .ceremony-columns::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed #e6c9b2; transform: translateX(-50%); }
  .faculty-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 576px) {
  .faculty-columns { grid-template-columns: repeat(4, 1fr); } /* คอมพิวเตอร์ 4 คอลัมน์ */
}


/* --- แท็บเล็ต (Tablet 992px ลงไป) --- */
@media (max-width: 991.98px) {
  .navbar > .container, .navbar > .container-fluid { flex-wrap: nowrap; align-items: flex-start; }
  .navbar-brand { max-width: calc(100% - 60px); }
  .navbar-toggler { margin-left: auto; }
  
  .hero-full { min-height: unset; }
  .hero-content { min-height: unset; }
  .hero-full-overlay { background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 35%, rgba(255,255,255,.78) 70%, rgba(255,255,255,.62) 100%); }
  .hero-copy { padding-top: 0; }
  .news-panel { margin-top: .25rem; }
  
  .ceremony-countdown-section { margin-top: -40px; margin-bottom: 3rem !important; }
  
  .section-description { display: none; }
}

/* --- มือถือ (Mobile 767px ลงไป) --- */
@media (max-width: 767.98px) {
  .box-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; overflow: visible; padding-bottom: 0; border-bottom: none; }
  .box-tabs .nav-item { width: 100%; }
  .box-tabs .nav-link { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; padding: 0.5rem 0.5rem; font-size: .85rem; margin-right: 0; white-space: nowrap; }

  #type-photo .schedule-table thead { display: none; }
  #type-photo .schedule-table, #type-photo .schedule-table tbody, #type-photo .schedule-table tr, #type-photo .schedule-table td { display: block; width: 100%; }
  #type-photo .schedule-table tr { margin-bottom: 1rem; border: 1px solid #eef0f4; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.04); }
  #type-photo .schedule-table td { border-right: none; border-bottom: 1px solid #f0f0f3; padding: .75rem 1rem; }
  #type-photo .schedule-table td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700; color: var(--brand-orange); margin-bottom: .3rem; }

  .day-grid-header { display: none; }
  .day-grid-row { display: flex; flex-direction: column; border: 1px solid #eef0f4; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.04); margin-bottom: 1rem; }
  .day-grid-row > div { display: block; width: 100%; border-right: none; border-bottom: 1px solid #f0f0f3; padding: .9rem 1rem; }
  .day-grid-row > div:last-child { border-bottom: none; }
  .day-cell-date { background: var(--bg-soft); }
  .day-cell-session-label { display: inline-flex; align-items: center; gap: .35rem; color: #fff; font-weight: 700; font-size: .8rem; padding: .3rem .85rem; border-radius: 20px; margin-bottom: .65rem; }
  .day-cell-session-label.label-morning { background: var(--brand-orange); }
  .day-cell-session-label.label-afternoon { background: var(--brand-navy); }
  .day-cell-session-label.label-location { background: var(--brand-navy-2); }
  .day-cell-footer { display: flex; justify-content: center; background: #fafafc; }
  
  .minor-filter-bar { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .minor-filter-bar .date-pill { width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 0.45rem 0.5rem; font-size: 0.82rem; white-space: nowrap; }
  .minor-filter-bar .date-pill[data-filter="all"], .minor-filter-bar .time-badge { grid-column: 1 / -1; justify-content: center; text-align: center; }

  .major-card-body { padding: 1.5rem .9rem; }
  .session-col-head { padding: 1.1rem 1rem 1.3rem; }
  .session-col-head .session-label { font-size: .98rem; }
  .session-col-body { padding: 1.1rem .9rem; }
  .session-list .faculty-item { font-size: .86rem; padding: .55rem .8rem; }

  .ceremony-columns { gap: 1.25rem; }
  .ceremony-card-body { padding: 2rem .75rem 1.25rem; }
  .ceremony-col-top-d1, .ceremony-col-top-d2 { padding: 1.25rem 1rem 1.5rem; }
  .ceremony-col-head { font-size: 1.02rem; }
  .ceremony-col-time { font-size: .85rem; padding: .4rem 1rem; }
  .ceremony-col-eyebrow { font-size: .68rem; padding: .2rem .75rem; }
  .ceremony-col-body { padding: 1.1rem .9rem; }

  .dress-tabs { display: grid; grid-template-columns: repeat(2, 1fr); flex-wrap: unset; overflow-x: visible; gap: .5rem; padding-bottom: 0; }
  .dress-tabs .nav-item:last-child { grid-column: 1 / -1; }
  .dress-tabs.nav-pills .nav-link { width: 100%; box-sizing: border-box; white-space: normal; text-align: center; justify-content: center; font-size: .82rem; padding: .55rem .6rem; }

  .dress-doc-card { max-width: 100%; padding: .85rem .95rem; gap: .7rem; }
}

/* --- มือถือเล็ก (Small Mobile 575px ลงไป) --- */
@media (max-width: 575.98px) {
  .navbar-brand { max-width: calc(100% - 80px); white-space: normal; word-break: break-word; line-height: 1.2; padding-right: 10px; }
  .navbar-brand.gap-3 { gap: 0.5rem !important; }
  .navbar-brand .brand-logo { width: 38px; height: 38px; }
  .navbar-brand .fw-bold { font-size: .95rem; }
  .navbar-brand .small.text-muted { font-size: .7rem !important; }
  
  .hero-full { background-position: center top; }
  .hero-content { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .hero-title { font-size: 2.15rem; line-height: 1.1; letter-spacing: -.4px; }
  .hero-subtitle { font-size: .85rem; }
  .hero-badge { font-size: .82rem; padding: .5rem 1rem; }
  .hero-year-badge { display: inline-flex; width: fit-content; margin-left: 0; margin-top: .5rem; }
  
  .news-list-item { align-items: flex-start; }
  .news-list-item .news-date { font-size: .72rem; }
  
  .countdown-banner { padding: 1.5rem 1.25rem; border-radius: 20px; }
  .countdown-unit { min-width: 56px; padding: .5rem .35rem; }
  .countdown-num { font-size: 1.4rem; }
  .countdown-date { font-size: 1rem; }
  .countdown-location { font-size: .78rem; padding: .5rem .9rem; }
  
  .ceremony-countdown-section { margin-top: 1.5rem; margin-bottom: 2.5rem !important; }
}

@media (max-width: 400px) {
  .navbar-brand .fw-bold { font-size: 0.8rem; }
  .navbar-brand .small.text-muted { font-size: 0.66rem !important; }
}

/* =================================== */
/* ===== FOOTER ======================= */
/* =================================== */
.site-footer {
  background: var(--brand-navy);
  color: #f0d9d2;
}

.site-footer h6 {
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
}

.site-footer .brand-logo {
  background: #fff;
  padding: 3px;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links li {
  margin-bottom: .6rem;
}
.footer-links li:last-child {
  margin-bottom: 0;
}
.footer-links a {
  color: #d6ada4;
  text-decoration: none;
  font-size: .9rem;
  transition: color .15s ease;
}
.footer-links a:hover {
  color: var(--brand-orange);
  text-decoration: none;
}

.social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background .2s ease, color .2s ease;
}
.social-btn:hover {
  background: var(--brand-orange);
  color: #fff;
}

.footer-bottom {
  background: var(--brand-navy-2);
  border-top: 1px solid rgba(255,255,255,.12);
}

/* ===== จัดรูปแบบวันที่ 3 บรรทัด ===== */
.day-cell-date-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    line-height: 1.3;
}
.date-row-day {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.date-row-num {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--brand-orange);
    line-height: 1.1;
    margin-bottom: 4px;
}
.date-row-my {
    font-size: 1rem;
    font-weight: 500;
    color: #6c757d;
}

/* ===== เส้นปราคั่นเช้า-บ่าย (สีเทา) ===== */
.day-cell-morning {
    border-right: 2px dashed #ccc !important; /* เปลี่ยนเป็นสีเทา */
    padding-right: 15px !important;
}
.day-cell-afternoon {
    padding-left: 15px !important;
}

/* ===== เส้นปราคั่นในช่องสถานที่ (เช้า-บ่าย) ===== */
.day-cell-location .loc-line {
    border-bottom: 2px dashed #ccc !important; /* เพิ่มเส้นปราสีเทาด้านล่าง */
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}
/* ยกเลิกเส้นปราสำหรับแถวสถานที่สุดท้าย (เพื่อไม่ให้มีเส้นลอยอยู่ด้านล่างสุด) */
.day-cell-location .loc-line:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* จอมือถือ ให้เส้นปราเป็นแนวนอน */
@media (max-width: 991.98px) {
    .day-cell-morning {
        border-right: none !important;
        border-bottom: 2px dashed #ccc !important; /* เปลี่ยนเป็นสีเทา */
        padding-right: 12px !important;
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
    }
    .day-cell-afternoon {
        padding-left: 12px !important;
        padding-top: 15px !important;
    }
}
/* =================================== */
/* ===== DRESS PAGE (การแต่งกาย) ===== */
/* วางต่อท้ายไฟล์ style.css          */
/* =================================== */
 
/* --- แท็บเลือกประเภทการแต่งกาย ---
   หมายเหตุ: ไม่ตั้งค่า display / padding-bottom ของ .dress-tabs ไว้ที่นี่
   เพื่อไม่ให้ไปทับกริด 2 คอลัมน์บนมือถือที่มีอยู่แล้วใน media query */
.dress-tabs { gap: .5rem; }
 
.dress-tabs.nav-pills .nav-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #fff;
  color: var(--text-dark);
  font-weight: 600;
  transition: border-color .2s, color .2s, background-color .2s, box-shadow .2s;
}
.dress-tabs.nav-pills .nav-link i { color: var(--brand-orange); transition: color .2s; }
.dress-tabs.nav-pills .nav-link:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.dress-tabs.nav-pills .nav-link:focus-visible { outline: 3px solid rgba(212,67,19,.3); outline-offset: 2px; }
.dress-tabs.nav-pills .nav-link.active {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
  box-shadow: 0 4px 12px rgba(212,67,19,.25);
}
.dress-tabs.nav-pills .nav-link.active i { color: #fff; }
 
@media (min-width: 768px) {
  .dress-tabs.nav-pills .nav-link { padding: .65rem 1.4rem; }
}
 
/* --- กล่องเนื้อหา --- */
.dress-tab-content {
  background: #fff;
  border: 1px solid #f0e4d8;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(120,20,15,.07);
  overflow: hidden;
}
 
.dress-panel-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem 1.5rem;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--brand-navy);
  background: linear-gradient(90deg, var(--brand-orange-light) 0%, #fff 100%);
  border-bottom: 1px solid #f0e4d8;
}
.dress-panel-header .icon-badge {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-orange);
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 4px 10px rgba(212,67,19,.3);
}
 
.dress-panel-body {
  padding: 2rem 1.5rem 2.25rem;
  background: #fbf7f3;
}
 
/* เล่นแอนิเมชันสั้นๆ ทุกครั้งที่สลับแท็บ */
@keyframes dressFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.dress-tab-content .tab-pane.active .dress-panel-body { animation: dressFadeUp .45s ease both; }
@media (prefers-reduced-motion: reduce) {
  .dress-tab-content .tab-pane.active .dress-panel-body { animation: none; }
}
 
/* --- ภาพที่คลิกเพื่อขยายได้ --- */
.zoomable-img-wrap {
  position: relative;
  display: inline-block;
  max-width: 820px;
  cursor: zoom-in;
  border-radius: var(--radius);
  line-height: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.dress-panel-body .zoomable-img-wrap { margin-bottom: 1.25rem; }
.dress-panel-body .zoomable-img-wrap:last-child { margin-bottom: 0; }
.zoomable-img-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 0 !important;
}
.zoomable-img-wrap:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(212,67,19,.2); }
 
/* ไอคอนแว่นขยายมุมขวาบน บอกว่าคลิกได้ */
.zoomable-img-wrap::after {
  content: '\F52D';
  font-family: 'bootstrap-icons';
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-orange); color: #fff;
  font-size: 1rem; line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  pointer-events: none;
}
/* ป้ายข้อความ: เดสก์ท็อปโผล่ตอน hover / มือถือแสดงตลอด */
.zoomable-img-wrap::before {
  content: 'แตะเพื่อขยายภาพ';
  position: absolute; left: 50%; bottom: 14px;
  transform: translate(-50%, 6px);
  background: rgba(0,0,0,.65); color: #fff;
  font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  padding: .4rem .9rem; border-radius: 999px;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; z-index: 2;
}
.zoomable-img-wrap:hover::before { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) {
  .zoomable-img-wrap::before { opacity: 1; transform: translate(-50%, 0); }
}
 
/* --- การ์ดดาวน์โหลดเอกสาร PDF --- */
.dress-doc-card {
  align-items: center;
  gap: .9rem;
  max-width: 380px;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(120,20,15,.06);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dress-doc-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 22px rgba(212,67,19,.14);
}
.dress-doc-card .doc-icon { flex-shrink: 0; font-size: 2rem; color: #dc3545; }
.dress-doc-card .doc-title { font-size: .92rem; font-weight: 700; line-height: 1.35; color: var(--brand-navy); margin-bottom: .25rem; }
.dress-doc-card .doc-dl { font-size: .8rem; font-weight: 700; color: var(--brand-orange); }
.dress-panel-body .doc-card { text-align: left; }
 
/* --- Modal ขยายภาพ (ซูมเข้า/ออก) --- */
.img-zoom-wrap {
  overflow: auto;
  max-height: 82vh;
  border-radius: 8px;
  cursor: zoom-in;
  touch-action: pan-x pan-y;
}
.img-zoom-wrap img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transition: width .2s ease;
}
.img-zoom-wrap.zoomed { cursor: grab; }
.img-zoom-wrap.zoomed img { width: 220%; }
 
.img-zoom-btn {
  position: absolute; right: 1.75rem; bottom: 1.75rem; z-index: 5;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-orange); color: #fff; font-size: 1.15rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.img-zoom-btn:hover { filter: brightness(1.08); }
 
/* --- ลากเพื่อเลื่อนภาพตอนซูม (ใช้คู่กับ assets/js/drag-pan.js) ---
   ใช้ !important เพราะหน้าผังที่นั่งมี CSS เคอร์เซอร์ของตัวเองแบบ #id ซึ่งแรงกว่า */
.img-zoom-wrap.zoomed,
.seat-chart-zoom-wrap.zoomed { cursor: grab !important; }
.img-zoom-wrap.dragging,
.seat-chart-zoom-wrap.dragging { cursor: grabbing !important; }
.img-zoom-wrap.zoomed img,
.seat-chart-zoom-wrap.zoomed img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
 
/* --- มือถือ --- */
@media (max-width: 767.98px) {
  .dress-panel-header { padding: .9rem 1rem; font-size: 1rem; gap: .7rem; }
  .dress-panel-header .icon-badge { width: 36px; height: 36px; font-size: 1rem; }
  .dress-panel-body { padding: 1.25rem .9rem 1.5rem; }
  .dress-tab-content { border-radius: 14px; }
  .zoomable-img-wrap::after { top: 8px; right: 8px; width: 34px; height: 34px; }
  .dress-doc-card { max-width: 100%; width: 100%; }
}
 #imgZoomWrap {
  overflow: auto !important;
  max-height: 82vh;
  cursor: zoom-in;
  touch-action: pan-x pan-y;
  border-radius: 8px;
}
#imgZoomWrap img {
  display: block;
  width: 100%;
  max-width: none !important;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
#imgZoomWrap.zoomed { cursor: grab !important; }
#imgZoomWrap.zoomed img { width: 220%; }
#imgZoomWrap.dragging { cursor: grabbing !important; }

.hero-year-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45);
  border-radius: 30px; font-size: .55em; font-weight: 700; vertical-align: middle;
  padding: .35em 1em; margin-left: .5rem;
}

.badge-year {
  border: 1px solid #dee2e6; background: #fff; color: var(--text-dark);
  border-radius: 30px; padding: 0.5rem 1.2rem; font-weight: 600; font-size: .88rem;
  transition: all .15s; text-decoration: none; display: inline-block;
}
.badge-year:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.badge-year.active-year { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }

.box-tabs { border-bottom: 2px solid #eef0f4; padding-bottom: 10px; }
.box-tabs .nav-link { border: 1px solid #dee2e6; border-radius: 8px; color: var(--text-dark); background: #fff; font-weight: 600; padding: 0.6rem 1.5rem; margin-right: 0.5rem; transition: all 0.2s; }
.box-tabs .nav-link:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.box-tabs .nav-link.active { background: var(--brand-orange); color: #fff; border-color: var(--brand-orange); box-shadow: 0 4px 12px rgba(212, 67, 19, 0.2); }

.major-columns { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .major-columns { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.session-col {
  background: #fff; border: 1px solid #f0e4d8; border-radius: 16px; overflow: hidden;
  height: 100%; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(212,67,19,.06);
}
.session-col-head { text-align: center; padding: 1.25rem 1.25rem 1.5rem; color: #fff; }
.session-col.session-morning .session-col-head { background: var(--brand-orange); }
.session-col.session-afternoon .session-col-head { background: var(--brand-navy); }
.session-col-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin: 0 auto .6rem;
}
.session-col-head .session-label { font-weight: 700; font-size: 1.05rem; }
.session-col-head .session-time {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4);
  border-radius: 30px; padding: .35rem 1rem; font-weight: 600; font-size: .85rem; margin-top: .6rem;
}
.session-col-head .session-loc { font-size: .8rem; opacity: .9; margin-top: .3rem; }
.session-col-body { padding: 1.5rem; flex: 1; background: #fffaf6; }

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

.seat-chart-thumb {
  position: relative;
  background: #fff; border: 1px solid #f0e4d8; border-radius: 14px; overflow: hidden;
  cursor: pointer; transition: transform .2s, box-shadow .2s; display: block; text-decoration: none;
}
.seat-chart-thumb:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(212,67,19,.18); }

/* ภาพเต็มการ์ด มองเห็นผังที่นั่งครบ ไม่ครอปทิ้ง */
.seat-chart-thumb img {
  width: 100%;
  height: auto;
  max-height: 520px;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  display: block;
  background: #fff;
}

/* caption overlay ทับมุมล่างของภาพ แทนที่จะแยกเป็นแถบใต้ภาพ */
.seat-chart-thumb-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  color: #fff; font-size: .82rem; font-weight: 600;
  padding: 2rem .75rem .65rem;
  display: flex; align-items: center; gap: .4rem;
}

/* ไอคอนขยายกลางภาพตอน hover เพื่อบอกว่าคลิกเพื่อซูมได้ */
.seat-chart-thumb::after {
  content: '\f52d'; /* bootstrap-icons zoom-in glyph */
  font-family: 'bootstrap-icons';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.seat-chart-thumb:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }


.seat-chart-empty { text-align: center; color: #adb1ba; font-size: .9rem; padding: 2.5rem 0; }


.seat-chart-zoom-wrap {
  overflow: auto;
  max-height: 82vh;
  cursor: zoom-in;
  touch-action: pan-x pan-y;
}
.seat-chart-zoom-wrap img {
  width: 100%; height: auto; max-height: none; object-fit: contain;
  transition: transform .2s ease;
  transform-origin: 0 0;
}
.seat-chart-zoom-wrap.zoomed { cursor: zoom-out; }
.seat-chart-zoom-wrap.zoomed img { width: 220%; }

.seat-chart-zoom-btn {
  position: absolute; right: 1.25rem; bottom: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--brand-orange); color: #fff; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.35); z-index: 5;
}
.seat-chart-zoom-btn:hover { filter: brightness(1.08); }

.venue-block { margin-bottom: 2.5rem; }
.venue-block-heading {
  display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--brand-navy);
  background: var(--bg-soft, #fdf5ec); border: 1px solid #eef0f4; border-radius: 10px;
  padding: .75rem 1.1rem; margin-bottom: 1.25rem; font-size: 1.02rem;
}
.venue-block-heading i { color: var(--brand-orange); font-size: 1.1rem; }
.venue-block-heading .venue-sub { font-weight: 400; font-size: .82rem; color: var(--text-muted); margin-left: .3rem; }

#seatChartModal .modal-content { background: #111; border: none; }

#seatChartModal .seat-chart-zoom-wrap {
  overflow: auto !important;
  max-height: 82vh;
  cursor: zoom-in;
  touch-action: pan-x pan-y;
}
#seatChartModal .seat-chart-zoom-wrap img {
  display: block;
  width: 100%;
  max-width: none !important;
  height: auto;
  max-height: none;
  object-fit: contain;
  transition: transform .2s ease;
  transform-origin: 0 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* ซูมอยู่ = เคอร์เซอร์เป็นรูปมือ ลากเพื่อเลื่อนดูได้ */
#seatChartModal .seat-chart-zoom-wrap.zoomed {
  cursor: grab !important;
}
#seatChartModal .seat-chart-zoom-wrap.zoomed img {
  width: 220%;
}
#seatChartModal .seat-chart-zoom-wrap.dragging {
  cursor: grabbing !important;
}

#seatChartModal .modal-body { position: relative; }

.seat-chart-zoom-btn {
  position: absolute; right: 1.25rem; bottom: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--brand-orange); color: #fff; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.35); z-index: 5;
}
.seat-chart-zoom-btn:hover { filter: brightness(1.08); }

/* =====================================================================
   theme-override.css  —  วางต่อท้าย style.css (โหลดหลังสุด)
   แนวคิด: "แดงเต็มพื้น" เหลือเฉพาะ top-bar / ปุ่มหลัก / footer
   ส่วนอื่นใช้พื้นขาว-ครีม + เส้นบาง + ตัวอักษรแดงเข้ม
   ไม่แก้ไฟล์เดิม ลบไฟล์นี้ออกก็กลับเป็นเหมือนเดิม
   ===================================================================== */

/* ---------- 1. TOKENS เพิ่มเติม (ใช้แทนค่าที่ hard-code กระจายอยู่) ---------- */
:root {
  --brand-hover: #A42106;          /* hover ที่เห็นต่างจากสีหลักจริง (เดิม #BF0E0A แทบไม่ต่าง) */
  --line:        #F0E6DF;          /* เส้นขอบทั้งเว็บ แทน #eef0f4 / #f0e4d8 / #dee2e6 / #d4d4d4 */
  --surface-alt: #FFFBF8;          /* พื้นครีมอ่อน แทน #fbf7f3 / #fffaf6 / #fafafc */
  /*--surface-alt: #F1F3F5;*/
  --shadow-sm:   0 1px 3px rgba(120, 30, 10, .06);
  --shadow-md:   0 12px 32px rgba(120, 30, 10, .10);
}

/* ---------- 2. BASE ---------- */
/* เดิมใช้ * { font-family } ซึ่งบังคับทุก element (รวม input/ไอคอน) → ใช้ inherit แทน */
body { font-family: 'Noto Sans Thai', sans-serif; line-height: 1.65; background: #fff; }
* { font-family: inherit; }

:focus-visible { outline: 3px solid rgba(201, 42, 10, .35); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 3. BUTTONS ---------- */
.btn-primary-brand:hover,
.btn-primary-brand:active,
.btn-primary-brand.brand-active { background: var(--brand-hover); }
.btn-dark-brand,
.btn-brand { background: var(--brand-orange); border-color: var(--brand-orange); }
.btn-dark-brand:hover,
.btn-brand:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* ---------- 4. NAVBAR / OFFCANVAS ---------- */
.navbar { border-bottom: 1px solid var(--line); }
.top-bar { background: var(--brand-navy); }

/* หัว offcanvas เปลี่ยนจากแดงเต็มเป็นขาว */
.offcanvas-header { background: #fff; color: var(--text-dark); border-bottom: 1px solid var(--line); }
.offcanvas .btn-close { filter: none; opacity: .6; }
.offcanvas .nav-link.active-link,
.offcanvas .nav-link.active {
  background: var(--brand-orange-light);
  color: var(--brand-navy) !important;
  box-shadow: none;
}

/* ---------- 5. PAGE HERO (หน้าใน) ---------- */
.page-hero { background: var(--bg-soft); color: var(--text-dark); border-bottom: 1px solid var(--line); padding: 2.5rem 0; }
.page-hero h1,
.page-hero .text-white { color: var(--text-dark) !important; }
.page-hero-desc { color: var(--text-muted); opacity: 1; }
.breadcrumb-custom a { color: var(--text-muted); }
.page-hero .hero-year-badge { background: var(--brand-orange-light); border-color: var(--line); color: var(--brand-navy); }

/* ---------- 6. HOME: HERO / NEWS / COUNTDOWN ---------- */
.hero-title .accent {
  background: none; -webkit-text-fill-color: currentColor; color: var(--brand-orange);
}
.hero-title .accent::after { background: var(--brand-orange); }

.hero-badge {
  background: var(--brand-orange-light); color: var(--brand-navy);
  border: 1px solid var(--line); box-shadow: none;
}

/* การ์ดข่าว: หัวขาว + เส้นแดงบาง */
.news-panel { border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.news-panel .panel-header {
  background: #fff; color: var(--brand-navy);
  border-top: 3px solid var(--brand-orange); border-bottom: 1px solid var(--line);
}
.news-panel .panel-header a { color: var(--brand-orange) !important; }
.news-list-item { border-bottom-color: var(--line); }

.countdown-banner { box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.countdown-label { font-size: 1.15rem; color: var(--text-muted); }
.countdown-date { color: var(--brand-navy); }
.countdown-unit { background: var(--brand-orange-light); border: 1px solid var(--line); }
.countdown-num { color: var(--brand-orange); }
.countdown-text { color: var(--text-muted); opacity: 1; }

.quick-link-strip { border-color: var(--line); box-shadow: var(--shadow-sm); }
.photo-banner { background: var(--brand-orange-light); color: var(--text-dark); border: 1px solid var(--line); }
.text-light-50 { color: var(--text-muted); }

.step-num { background: var(--brand-orange-light); color: var(--brand-navy); }
.steps-list li { border-bottom-color: var(--line); }

/* ---------- 7. CARDS: เส้นเดียว เงาเดียว ไม่ลอยทุกใบ ---------- */
.date-card, .doc-card, .dress-doc-card, .contact-card, .overview-card,
.session-col, .ceremony-col, .faculty-card, .seat-chart-thumb, .video-card,
.dress-tab-content {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.overview-card { background: var(--surface-alt); }
.overview-card:hover, .session-col:hover, .ceremony-col:hover,
.faculty-card:hover, .seat-chart-thumb:hover, .video-card:hover,
.dress-doc-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--brand-orange);
}
.empty-state-box { border-color: var(--line); background: var(--surface-alt); }

/* ---------- 8. TABS / PILLS: ตัวที่เลือก = แดงเต็มตัวเดียวพอ ---------- */
.box-tabs, .box-tabs .nav-link { border-color: var(--line); }
.box-tabs .nav-link.active,
.date-pill.active,
.badge-year.active-year,
.dress-tabs.nav-pills .nav-link.active { box-shadow: none; }
.box-tabs .nav-link.highlight-tab { background: #fff; color: var(--brand-orange); box-shadow: none; }
.box-tabs .nav-link.highlight-tab::after { display: none; }
.date-pill, .badge-year { border-color: var(--line); }

/* ---------- 9. หัวการ์ด/ตาราง: จากแดงเต็มเป็นพื้นอ่อน + เส้นแดงด้านบน ---------- */
.session-col.session-morning .session-col-head,
.session-col.session-afternoon .session-col-head,
.ceremony-col-top-d1,
.ceremony-col-top-d2 {
  background: var(--brand-orange-light);
  color: var(--brand-navy);
  border-bottom: 1px solid var(--line);
}
.session-col.session-morning .session-col-head,
.ceremony-col-top-d1 { border-top: 3px solid var(--brand-orange); }
.session-col.session-afternoon .session-col-head,
.ceremony-col-top-d2 { border-top: 3px solid var(--brand-navy); }

.session-col-icon { background: var(--brand-orange); border: none; color: #fff; }
.session-col-head .session-time,
.ceremony-col-time,
.ceremony-col-time-loc,
.ceremony-col-eyebrow { background: #fff; border: 1px solid var(--line); color: var(--brand-navy); }

.session-col-body, .ceremony-col-body, .major-card-body, .ceremony-card-body,
.dress-panel-body { background: var(--surface-alt); }

.schedule-table { border-color: var(--line); box-shadow: none; }
.schedule-table thead th,
.day-grid-header {
  background: var(--brand-orange-light); color: var(--brand-navy);
  border-bottom: 2px solid var(--brand-orange); border-right-color: var(--line);
}
.day-grid-header > div { border-right-color: var(--line); }
.schedule-table tbody td,
.day-grid-row,
.day-grid-row > div { border-color: var(--line); }
.day-grid { border-color: var(--line); box-shadow: none; }
.campus-table-heading, .venue-block-heading { border-color: var(--line); background: var(--surface-alt); }

.session-list .faculty-item { border-color: var(--line); }
.session-list .faculty-item:hover { transform: none; }

/* ป้ายเช้า/บ่าย/ถ่ายภาพ: พื้นอ่อนทั้งหมด (เดิมมีเทาเขียว/ส้มอ่อนปนกัน) */
.badge-afternoon { background: #fff; color: var(--brand-navy); border: 1px solid var(--line); }
.badge-photo-time { background: var(--brand-orange-light); color: var(--brand-navy); }
.day-cell-session-label.label-morning,
.day-cell-session-label.label-afternoon,
.day-cell-session-label.label-location { background: var(--brand-orange-light); color: var(--brand-navy); }

/* ---------- 10. สีที่ hard-code หลุดโทน → ดึงกลับเข้าระบบ ---------- */
.date-row-day { color: var(--text-dark); }        /* เดิม #6b4226 */
.date-row-num { color: var(--brand-orange); }     /* เดิม #d4501e */
.text-afternoon { color: var(--brand-navy); }     /* เดิมเขียว #198754 */
.doc-card .doc-icon,
.dress-doc-card .doc-icon { color: var(--brand-orange); } /* เดิมแดง Bootstrap #dc3545 */
.dress-panel-header { background: var(--brand-orange-light); border-bottom-color: var(--line); }

/* ---------- 11. FOOTER: hover ต้องมองเห็นบนพื้นแดง ---------- */
.footer-links a:hover { color: #fff; text-decoration: underline; }
.social-btn:hover { background: rgba(255, 255, 255, .25); color: #fff; }

/* 1. หัวข้อ: ตัวอักษรเข้มอ่านชัด + แถบแดงสด (เดิมตัวหนังสือแดงน้ำตาลดูทึบ) */
.section-title { color: var(--text-dark); }
.section-title .bar { background: var(--brand-orange); }
.section-link { color: var(--brand-orange); }
 
/* 2. นับถอยหลัง: กล่องแดงสดตัวเลขขาว (สดกว่าแบบพื้นพีช) */
.countdown-label { color: var(--brand-orange); font-weight: 700; }
.countdown-date { color: var(--text-dark); }
.countdown-unit { background: var(--brand-orange); border: none; }
.countdown-num { color: #fff; }
.countdown-text { color: rgba(255, 255, 255, .85); }
 
/* 3. ป้ายปีการศึกษา: แดงเต็ม (จุดสีเด่นของ hero) */
.hero-badge { background: var(--brand-orange); color: #fff; border: none; box-shadow: 0 4px 12px rgba(201, 42, 10, .22); }
 
/* 4. ขั้นตอน: เลขวงกลมแดงสด */
.step-num { background: var(--brand-orange); color: #fff; }
 
/* 5. การ์ดวันที่: แถบแดงด้านบนให้ดูมีชีวิต */
.date-card { border-top: 3px solid var(--brand-orange); }
.date-card .day-num { color: var(--text-dark); }
 
/* 6. แถบถ่ายภาพหมู่: เป็นแถบสีแดงเต็มหนึ่งแถบของหน้า (จุดเด่นเดียว) */
.photo-banner { background: var(--brand-orange); color: #fff; border: none; }
.photo-banner .text-light-50,
.photo-banner .text-muted { color: rgba(255, 255, 255, .85) !important; }
.photo-banner .btn-dark-brand,
.photo-banner .btn-brand { background: #fff; color: var(--brand-orange) !important; border-color: #fff; }
.photo-banner .btn-dark-brand:hover,
.photo-banner .btn-brand:hover { background: var(--brand-orange-light); }
 
/* 7. ไอคอนลัด: วงกลมพีชคงเดิม แต่ไอคอนเข้มขึ้น */
.quick-link .qicon { color: var(--brand-orange); }
 
/* 8. (ตัวเลือก) พื้นครีมทั้งหน้า ให้การ์ดขาวลอยเด่นขึ้น — เอา comment ออกถ้าต้องการ */
/* body { background: var(--bg-soft); } */

.site-footer .text-light-50,
.site-footer .text-muted,
.site-footer small,
.footer-bottom,
.footer-bottom .text-muted { color: rgba(255, 255, 255, .78) !important; }
.footer-links a { color: rgba(255, 255, 255, .85); }

.news-card-v2 {
  position: relative;
  display: flex;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1rem 1rem 1.1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.news-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  border-color: var(--brand, #b3260c);
}
/* แถบสีด้านซ้ายสำหรับข่าวสำคัญ */
.news-card-v2.is-important::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brand, #b3260c);
}

/* กล่องวันที่ */
.nc-date {
  flex: 0 0 62px;
  align-self: flex-start;
  padding: .55rem 0;
  text-align: center;
  line-height: 1.15;
  background: #fdf1ee;
  color: var(--brand, #b3260c);
  border-radius: 12px;
}
.nc-day   { display: block; font-size: 1.6rem; font-weight: 700; }
.nc-month { display: block; font-size: .8rem;  font-weight: 700; }
.nc-year  { display: block; font-size: .7rem;  color: #8a6f69; }

/* เนื้อหา */
.nc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nc-meta { margin-bottom: .25rem; }
.nc-title {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.news-card-v2:hover .nc-title { color: var(--brand, #b3260c); }

.nc-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .8rem;
  color: #6c757d;
}
.nc-more { margin-left: auto; font-weight: 600; color: var(--brand, #b3260c); }
.nc-more i { display: inline-block; transition: transform .2s; }
a.news-card-v2:hover .nc-more i { transform: translateX(3px); }


/* =========================================================
   หน้าแรก: แยกบุคลิก 3 section ให้ต่างกัน
   1) Quick links  = แถบสีแดงเข้ม ตัวอักษรขาว
   2) ข่าว         = พื้นหลังโทนอุ่น + การ์ดขาวแนวตั้งขนาดเล็ก
   3) กำหนดการ     = การ์ดแนวนอน มีบล็อกวันที่สีแดงทึบด้านซ้าย
   (ลบชุด .news-card-v2 / .nc-* / .news-card-* ที่เคยใส่ไว้ออกได้)
   ========================================================= */

/* =========================================================
   หน้าแรก: แยกบุคลิก 3 section ให้ต่างกัน
   1) Quick links  = แถบสีแดงเข้ม ตัวอักษรขาว
   2) ข่าว         = พื้นหลังโทนอุ่น + การ์ดขาวแนวตั้งขนาดเล็ก
   3) กำหนดการ     = การ์ดแนวนอน มีบล็อกวันที่สีแดงทึบด้านซ้าย
   (ลบชุด .news-card-v2 / .nc-* / .news-card-* ที่เคยใส่ไว้ออกได้)
   ========================================================= */

/* ---------- 1) Quick links ---------- */
.quick-link-strip {
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-navy));
  border: 0;
  border-radius: 16px;
  padding: .5rem;
  box-shadow: 0 8px 22px rgba(143, 29, 7, .22);
}
.quick-link-strip .quick-link { color: #fff; border-radius: 12px; padding: .9rem .25rem; }
.quick-link-strip .quick-link:hover { background: transparent; color: #fff; }
.quick-link-strip .qicon {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* ---------- 2) ข่าวประชาสัมพันธ์ ---------- */
.section-band { padding: 2.5rem 0; }
.section-band-news {
  background: #F1F3F5;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
}

.nw-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid #eddcd5;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
a.nw-card:hover {
  border-color: var(--brand, #b3260c);
  box-shadow: 0 6px 18px rgba(143, 29, 7, .12);
}
.nw-card.is-important { border-left: 4px solid var(--brand, #b3260c); }

.nw-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .45rem;
}
.nw-when { font-size: .78rem; color: #8a6f69; margin-right: auto; }
.nw-when i { margin-right: .25rem; }

.nw-title {
  margin: 0 0 .6rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.nw-card:hover .nw-title { color: var(--brand, #b3260c); }

.nw-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .78rem;
  color: #6c757d;
}
.nw-more { margin-left: auto; font-weight: 600; color: var(--brand, #b3260c); }

/* ---------- 3) กำหนดการสำคัญ ---------- */
.ev-card {
  display: flex;
  align-items: stretch;
  height: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
}
.ev-date {
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .75rem .4rem;
  text-align: center;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(160deg, #b3260c, #8f1d07);
}
.ev-day   { font-size: 1.45rem; font-weight: 700; white-space: nowrap; }
.ev-month { margin-top: .15rem; font-size: .72rem; opacity: .9; }

.ev-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .75rem 1rem;
}
.ev-title { font-size: .92rem; font-weight: 600; line-height: 1.45; color: #222; }
.ev-desc  { margin-top: .15rem; font-size: .8rem; color: #6c757d; }

/* ---------- 4) เอกสารสำคัญ (พื้นขาว / ไทล์ไฟล์) ---------- */
.dc-tile {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: 100%;
  padding: .7rem .9rem;
  background: #fff;
  border: 1.5px dashed #dcc3ba;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.dc-tile:hover { border-color: var(--brand, #b3260c); border-style: solid; background: #fffaf8; }
.dc-icon {
  flex: 0 0 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--brand, #b3260c);
  background: #fdf1ee;
  border-radius: 10px;
}
.dc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.dc-title {
  font-size: .88rem;
  font-weight: 600;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dc-type { font-size: .72rem; font-weight: 700; color: var(--brand, #b3260c); }
.dc-dl { color: #8a6f69; font-size: 1.05rem; }
.dc-tile:hover .dc-dl { color: var(--brand, #b3260c); }

/* ---------- 5) กำหนดการสำคัญ: แถบพื้นเทาเป็นกลาง ---------- */
.section-band-dates {
  background: #f1f3f5;
  border-top: 1px solid #e5e8eb;
  border-bottom: 1px solid #e5e8eb;
}
.section-band-dates .ev-card { border-color: #e3e6ea; }

/* =========================================================
   6) Motion (ทำงานเฉพาะเมื่อผู้ใช้ไม่ได้ปิด animation ในระบบ)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* --- เข้าฉากตอนเลื่อนมาถึง (JS เติม .mv-ready / .mv-in) --- */
  .mv-ready .mv-row > .col,
  .mv-ready .mv-row > [class*="col-"] {
    opacity: 0;
    transform: translateY(22px);
  }
  .mv-ready .mv-row.mv-left > .col { transform: translateX(-26px); }

  .mv-ready .mv-row.mv-in > .col,
  .mv-ready .mv-row.mv-in > [class*="col-"] {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--mv-i, 0) * 90ms);
  }

  /* แถบสีหน้าหัวข้อ "ยืดลง" เมื่อถึง section */
  .mv-ready .mv-h .bar {
    transform: scaleY(0);
    transform-origin: top;
  }
  .mv-ready .mv-h.mv-in .bar {
    transform: scaleY(1);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  }

  /* --- Quick links --- */
  .quick-link-strip .qicon { transition: transform .25s ease, background .25s ease; }
  .quick-link-strip .quick-link:hover .qicon {
    transform: translateY(-4px) scale(1.1);
    background: rgba(255, 255, 255, .28);
  }

  /* --- ข่าว --- */
  .nw-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  a.nw-card:hover { transform: translateY(-5px); }
  .nw-more i { display: inline-block; transition: transform .25s ease; }
  a.nw-card:hover .nw-more i { transform: translateX(4px); }

  .nw-card .badge-new { animation: mvPulse 2.2s ease-out infinite; }
  @keyframes mvPulse {
    0%   { box-shadow: 0 0 0 0 rgba(179, 38, 12, .45); }
    70%  { box-shadow: 0 0 0 7px rgba(179, 38, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(179, 38, 12, 0); }
  }
  /* แถบแดงข้างการ์ดข่าวสำคัญ เรืองแสงเบา ๆ */
  .nw-card.is-important { animation: mvGlow 3s ease-in-out infinite; }
  @keyframes mvGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 12, 0); }
    50%      { box-shadow: 0 4px 16px rgba(179, 38, 12, .16); }
  }

  /* --- เอกสาร --- */
  .dc-tile { transition: transform .25s ease, border-color .2s ease, background .2s ease, box-shadow .25s ease; }
  .dc-tile:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(143, 29, 7, .1); }
  .dc-tile:hover .dc-dl i { animation: mvDrop .8s ease infinite; }
  @keyframes mvDrop {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
  }
  .dc-icon { transition: transform .25s ease; }
  .dc-tile:hover .dc-icon { transform: rotate(-6deg) scale(1.08); }

  /* --- กำหนดการ --- */
  .ev-card { transition: transform .25s ease, box-shadow .25s ease; }
  .ev-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, .09); }
  .ev-date { position: relative; overflow: hidden; }
  .ev-date::after {            /* แสงกวาดผ่านบล็อกวันที่ */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: translateX(-120%);
  }
  .ev-card:hover .ev-date::after { transform: translateX(120%); transition: transform .8s ease; }
  .ev-day { display: inline-block; transition: transform .25s ease; }
  .ev-card:hover .ev-day { transform: scale(1.1); }
}

/* =========================================================
   Hero: ข้อความกึ่งกลาง สมดุลกับการ์ดนับถอยหลัง (เวอร์ชันกระชับ)
   วางต่อท้ายสุดของ style.css  (แทนไฟล์ hero-balance.css เดิม)
   เป้าหมาย: ความสูง Hero กลับมาเท่าเดิม (~375px) เพื่อให้ Quick Links
   อยู่ในหน้าจอแรก
   ========================================================= */

/* ฟิล์มสีแดงเข้มไล่จากกลาง ให้ตัวอักษรขาวอ่านชัดบนภาพ */
.hero-full-overlay {
  background: radial-gradient(ellipse at 50% 40%,
              rgba(80, 12, 2, .58) 0%,
              rgba(80, 12, 2, .42) 55%,
              rgba(80, 12, 2, .22) 100%);
}

/* ---------- Desktop ---------- */
@media (min-width: 992px) {
  .hero-full { min-height: 375px; }
  .hero-full .hero-content {
    min-height: 375px;
    padding-top: 1.75rem !important;
    /* เผื่อพื้นที่ที่การ์ดนับถอยหลังซ้อนทับ (110px) */
    padding-bottom: calc(110px + .5rem) !important;
  }
  /* ลดช่องว่างใต้การ์ดนับถอยหลัง (เดิม 4.5rem) */
  .ceremony-countdown-section { margin-bottom: 2.5rem !important; }
}

/* ---------- Tablet / Mobile ---------- */
@media (max-width: 991.98px) {
  .hero-full-overlay { background: radial-gradient(ellipse at 50% 40%, rgba(80,12,2,.6) 0%, rgba(80,12,2,.42) 70%, rgba(80,12,2,.3) 100%); }
  .hero-full .hero-content { padding-top: 2rem !important; padding-bottom: 4rem !important; }
}
@media (max-width: 575.98px) {
  .hero-full .hero-content { padding-top: 2rem !important; padding-bottom: 2.5rem !important; }
}

/* ---------- ชื่อเรื่อง ---------- */
.hero-full .hero-title {
  color: #fff;
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.5px;
  margin-bottom: .75rem !important;
  text-shadow: 0 3px 18px rgba(60, 8, 0, .55);
}
.hero-full .hero-title .accent {
  display: inline-block;
  margin-top: .15rem;
  padding-bottom: .5rem;
  font-size: .62em;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .02em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #ffe9d6;
  position: relative;
}
.hero-full .hero-title .accent::after {
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: #fff;
  opacity: .9;
}

/* ---------- ข้อความไทยรอง ---------- */
.hero-full .hero-subtitle {
  max-width: none;
  margin: 0 auto .9rem;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  font-weight: 500;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 2px 10px rgba(60, 8, 0, .5);
}

/* ---------- ป้ายปีการศึกษา ---------- */
.hero-full .hero-badge {
  background: #fff;
  color: var(--brand-orange);
  border: 0;
  font-size: .95rem;
  padding: .45rem 1.4rem;
  box-shadow: 0 6px 18px rgba(60, 8, 0, .3);
}

/* =========================================================
   หน้ารายละเอียดข่าว (news_detail.php)
   วางต่อท้ายสุดของ style.css
   ========================================================= */

/* breadcrumb แบบกะทัดรัด (ตัวข่าวมีหัวเรื่องของตัวเองอยู่แล้ว) */
.page-hero.page-hero-compact { padding: 1rem 0; }
.page-hero.page-hero-compact .breadcrumb-custom { margin: 0; }

/* พื้นหลังหน้า: ครีมอ่อน ให้การ์ดขาวเด่นขึ้น */
.nd-section {
  background: #faf6f3;
  padding: 2rem 0 3.5rem;
  min-height: 50vh;
}

/* ---------- การ์ดพื้นฐาน ---------- */
.nd-card {
  background: #fff;
  border: 1px solid #efe3dc;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(120, 30, 10, .07);
}

/* ---------- ตัวข่าว ---------- */
.nd-article { position: relative; overflow: hidden; }
.nd-article::before {                       /* แถบสีด้านบนการ์ด */
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--brand-orange), #e8643f);
}
.nd-article.is-important::before {
  background: linear-gradient(90deg, #8f1d07, var(--brand-orange));
}

.nd-head { padding: 1.75rem 2rem 0; }
.nd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .85rem;
}
.nd-date {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--text-muted);
  background: #f6f1ee;
  border-radius: 999px;
  padding: .25rem .8rem;
}
.nd-date i { color: var(--brand-orange); }

.nd-title {
  margin: 0;
  padding-bottom: 1.25rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-dark);
  border-bottom: 1px solid #f1e7e1;
}

.nd-body { padding: 1.5rem 2rem .5rem; }
.nd-body p {
  margin: 0 0 1.1rem;
  max-width: 75ch;
  font-size: 1.02rem;
  line-height: 1.95;
  color: #2f2f2f;
}

/* ---------- ลิงก์ / ไฟล์แนบ (แบบกะทัดรัด) ---------- */
.nd-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .75rem;
  margin: .75rem 2rem 0;
  padding-top: 1.25rem;
  border-top: 1px dashed #e8d8cf;
}

/* ปุ่มลิงก์ที่เกี่ยวข้อง: ปุ่มเล็กสีแดง */
.nd-link-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: var(--brand-orange);
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.nd-link-btn:hover {
  color: #fff;
  background: var(--brand-hover, #A42106);
  box-shadow: 0 6px 14px rgba(143, 29, 7, .22);
}
.nd-link-btn i { font-size: .95rem; }

/* ไฟล์แนบ: ไทล์เล็ก */
.nd-action {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  max-width: 100%;
  padding: .4rem .9rem .4rem .45rem;
  background: #fffaf7;
  border: 1px solid #f0e0d6;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.nd-action:hover { background: #fff; border-color: var(--brand-orange); }
.nd-action-icon {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: #fdf1ee;
  color: var(--brand-orange);
  border-radius: 9px;
}
.nd-action-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.nd-action-title {
  max-width: 260px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nd-action-sub { font-size: .72rem; color: var(--text-muted); }
.nd-action-go { color: var(--brand-orange); font-size: .95rem; margin-left: .25rem; }

/* ---------- ท้ายการ์ด ---------- */
.nd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
  padding: 1.1rem 2rem;
  background: #fcf8f5;
  border-top: 1px solid #f1e7e1;
}
.nd-copy {
  color: var(--brand-orange);
  background: #fff;
  border: 1px solid #f0d5c9;
  font-weight: 600;
}
.nd-copy:hover { background: #fdf1ee; color: var(--brand-orange); border-color: var(--brand-orange); }
.nd-copy.is-done { background: var(--brand-orange); color: #fff; border-color: var(--brand-orange); }

/* ---------- ข่าวอื่น ๆ (ด้านข้าง) ---------- */
.nd-side {
  background: #fff;
  border: 1px solid #efe3dc;
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 6px 20px rgba(120, 30, 10, .05);
}
@media (min-width: 992px) {
  .nd-side { position: sticky; top: 1.5rem; }
}
.nd-more-list { display: flex; flex-direction: column; }
.nd-more-item {
  display: block;
  padding: .85rem 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #f3ebe6;
}
.nd-more-item:first-child { padding-top: 0; }
.nd-more-item:last-child { padding-bottom: 0; border-bottom: 0; }
.nd-more-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .25rem;
}
.nd-more-date { margin-right: auto; font-size: .75rem; color: var(--text-muted); }
.nd-more-date i { margin-right: .3rem; color: var(--brand-orange); }
.nd-more-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-dark);
  transition: color .2s ease;
}
a.nd-more-item:hover .nd-more-title { color: var(--brand-orange); }

/* ---------- ไม่พบข่าว ---------- */
.nd-empty { max-width: 560px; margin: 2rem auto; padding: 3rem 2rem; }
.nd-empty > i { display: block; font-size: 2.5rem; color: var(--brand-orange); margin-bottom: 1rem; }

/* ---------- มือถือ ---------- */
@media (max-width: 767.98px) {
  .nd-section { padding: 1.25rem 0 2.5rem; }
  .nd-head   { padding: 1.25rem 1.1rem 0; }
  .nd-body   { padding: 1.1rem 1.1rem .25rem; }
  .nd-body p { font-size: .98rem; line-height: 1.85; }
  .nd-extras { margin: .5rem 1.1rem 0; padding-top: 1.1rem; }
  .nd-foot   { padding: 1rem 1.1rem; }
  .nd-foot .btn { flex: 1 1 100%; }
}

/* ---------- เคลื่อนไหว: ตัวข่าวค่อย ๆ ขึ้นมาครั้งเดียวตอนเปิดหน้า ---------- */
@media (prefers-reduced-motion: no-preference) {
  .nd-article { animation: ndRise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .nd-side    { animation: ndRise .5s .12s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes ndRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  .nd-more-item { transition: transform .2s ease; }
  a.nd-more-item:hover { transform: translateX(3px); }
}

/* =========================================================
   หน้ารวมข่าวประชาสัมพันธ์ (news.php)
   วางต่อท้ายสุดของ style.css
   ========================================================= */

.nl-section {
  background: #faf6f3;
  padding: 2rem 0 3.5rem;
  min-height: 50vh;
}

/* ---------- ค้นหา + ตัวกรอง ---------- */
.nl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-bottom: .75rem;
}
.nl-search {
  position: relative;
  flex: 1 1 280px;
  max-width: 420px;
  margin: 0;
}
.nl-search i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.nl-search input {
  width: 100%;
  padding: .6rem 1rem .6rem 2.6rem;
  font-size: .95rem;
  color: var(--text-dark);
  background: #fff;
  border: 1px solid #ecdcd3;
  border-radius: 999px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nl-search input:focus {
  outline: 0;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(201, 42, 10, .12);
}

.nl-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.nl-chip {
  padding: .4rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dark);
  background: #fff;
  border: 1px solid #ecdcd3;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.nl-chip:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.nl-chip.active {
  color: #fff;
  background: var(--brand-orange);
  border-color: var(--brand-orange);
}

.nl-count { min-height: 1.4rem; margin: 0 0 1rem; font-size: .85rem; color: var(--text-muted); }

/* ---------- รายการ: 4 การ์ดต่อแถวบนจอใหญ่ ---------- */
.nl-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .nl-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .nl-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .nl-list { grid-template-columns: repeat(4, 1fr); } }

.nl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 190px;
  padding: 1.1rem 1.1rem .95rem;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid #efe3dc;
  border-top: 3px solid #f0d5c9;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(120, 30, 10, .04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.nl-card:hover {
  border-color: var(--brand-orange);
  box-shadow: 0 10px 24px rgba(143, 29, 7, .12);
  transform: translateY(-3px);
}
.nl-card.is-important { border-top-color: var(--brand-orange); }
.nl-card.is-static { cursor: default; }

/* แถวบน: วันที่ + ป้าย */
.nl-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .6rem;
}
.nl-when {
  margin-right: auto;
  font-size: .78rem;
  color: var(--text-muted);
}
.nl-when i { margin-right: .3rem; color: var(--brand-orange); }

.nl-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-dark);
  transition: color .2s ease;
}
a.nl-card:hover .nl-title { color: var(--brand-orange); }

.nl-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: .4rem 0 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* แถวล่าง: เอกสารแนบ + อ่านต่อ */
.nl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .8rem;
  font-size: .78rem;
  color: var(--text-muted);
}
.nl-attach i { margin-right: .2rem; color: var(--brand-orange); }
.nl-more-link { margin-left: auto; font-weight: 600; color: var(--brand-orange); }
.nl-more-link i { display: inline-block; transition: transform .2s ease; }
a.nl-card:hover .nl-more-link i { transform: translateX(3px); }

/* ---------- ปุ่มแสดงเพิ่ม / ว่าง ---------- */
.nl-more {
  padding: .55rem 1.6rem;
  font-weight: 600;
  color: var(--brand-orange);
  background: #fff;
  border: 1px solid #f0d5c9;
  border-radius: 999px;
}
.nl-more:hover { color: #fff; background: var(--brand-orange); border-color: var(--brand-orange); }

.nl-empty, .nl-noresult {
  max-width: 480px;
  margin: 2rem auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  background: #fff;
  border: 1px dashed #e8d8cf;
  border-radius: 16px;
}
.nl-empty i, .nl-noresult i { display: block; margin-bottom: .75rem; font-size: 2rem; color: var(--brand-orange); }
.nl-noresult[hidden], .nl-more[hidden], .nl-list[hidden] { display: none; }

/* ---------- มือถือ ---------- */
@media (max-width: 575.98px) {
  .nl-section { padding: 1.25rem 0 2.5rem; }
  .nl-search { max-width: none; flex-basis: 100%; }
  .nl-card { min-height: 0; }
}


.seat-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1rem;
  color: #adb1ba;
  background: #fafbfc;
  border: 1.5px dashed #e3e6ed;
  border-radius: 12px;
  min-height: 180px;
}
.seat-chart-empty i {
  color: #c0c4cc;
}
.seat-chart-empty span {
  line-height: 1.5;
  max-width: 280px;
}

/* =====================================================================
   Seat Chart Modal — ขยายขนาดให้กว้างขึ้น
   ===================================================================== */

/* บนจอใหญ่: กว้าง 1140px (modal-xl) */
#seatChartModal .modal-dialog {
  max-width: 1140px;
}

/* ปรับขอบให้สวยขึ้น */
#seatChartModal .modal-content {
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  border: none;
}

/* header ของ modal */
#seatChartModal .modal-header {
  padding: 1rem 1.5rem;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
}

#seatChartModal .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

/* ตัว body: ลด padding ให้ภาพใหญ่สุด */
#seatChartModal .modal-body {
  padding: 0.5rem;
  background: #111;
  position: relative;
}

/* กล่องซูม: ให้สูงขึ้น จะได้เห็นภาพเต็ม */
#seatChartModal .seat-chart-zoom-wrap {
  max-height: 80vh !important;
  border-radius: 10px;
  background: #1a1a1a;
  padding: 0.5rem;
}

/* ภาพ: ใหญ่ขึ้น + ขอบมน */
#seatChartModal .seat-chart-zoom-wrap img {
  border-radius: 8px;
  background: #fff;
  max-height: 78vh !important;
  object-fit: contain;
}

/* footer */
#seatChartModal .modal-footer {
  padding: 0.85rem 1.5rem;
  background: #1a1a1a;
  border-top: 1px solid #2a2a2a;
}

/* ปุ่มซูม: ขยับไปมุมล่างขวาของภาพ */
#seatChartModal .seat-chart-zoom-btn {
  right: 1.5rem;
  bottom: 1.5rem;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
}

/* === มือถือ: เต็มจอเพื่อให้อ่านผังที่นั่งได้ === */
@media (max-width: 767.98px) {
  #seatChartModal .modal-dialog {
    max-width: 100%;
    margin: 0;
  }
  
  #seatChartModal .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
  
  #seatChartModal .seat-chart-zoom-wrap {
    max-height: 75vh !important;
  }
  
  #seatChartModal .seat-chart-zoom-wrap img {
    max-height: 73vh !important;
  }
}

/* === จอใหญ่มาก (>= 1400px): ขยายเป็น 1280px === */
@media (min-width: 1400px) {
  #seatChartModal .modal-dialog {
    max-width: 1280px;
  }
}

/* === จัด layout แท็บว่าที่ร้อยตรี === */
.officer-info-card {
  background: #fff;
  border: 1px solid #f0e4d8;
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 6px 20px rgba(212, 67, 19, .06);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;        /* ฝั่งขวาชิดซ้าย ไม่กึ่งกลาง */
}

/* === แก้ .dress-doc-card ให้เต็มความกว้างใน context นี้ === */
.officer-info-card .dress-doc-card {
  display: flex !important;           /* บังคับให้เป็น flex */
  max-width: 100% !important;         /* ยกเลิก max-width: 380px ของเดิม */
  width: 100%;
  margin: 0;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(120,20,15,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.officer-info-card .dress-doc-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 22px rgba(212,67,19,.14);
}

/* === ภาพฝั่งซ้าย === */
.officer-img-wrap {
  text-align: center;
}

.officer-img-wrap .zoomable-img-wrap {
  display: inline-block;
  max-width: 100%;
}

.officer-img-wrap img {
  max-height: 600px;
  width: auto;
  object-fit: contain;
}

/* === มือถือ === */
@media (max-width: 767.98px) {
  .officer-info-card {
    padding: 1.25rem 1rem 1rem;
  }
  .officer-img-wrap img {
    max-height: none;
    width: 100%;
  }
}

/* ===== ทำให้การ์ดทั้งใบคลิกได้ ===== */
.doc-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
}
.doc-card-link:hover .doc-title {
  color: var(--brand-orange);
}
.doc-card-link:hover .doc-dl {
  color: var(--brand-orange-dark, #b5540c);
}
.doc-card-link .doc-dl {
  pointer-events: none;  /* กัน event ซ้อนทับ */
}


/* =====================================================================
   gray-theme-override.css
   -------------------------------------------------------------------
   เปลี่ยนพื้นส้มอ่อน/ครีมทั้งเว็บ → พื้นเทาอ่อน
   สีหลัก (แดงส้มเข้ม #C92A0A) ยังคงเดิม
   เส้นขอบส้มอ่อน → เส้นขอบเทา
   วางไฟล์นี้ไว้ล่างสุดของ <head> (หลัง style.css)
   ===================================================================== */

/* =====================================================================
   1. ตัวแปรหลัก — เปลี่ยนค่าตัวแปรจากส้มอ่อนเป็นเทา
   ===================================================================== */
:root {
  --brand-orange-light: #F1F3F5;   /* พื้นเทาอ่อน  แทน #FFF0E2 */
  --bg-soft:            #F8F9FA;   /* พื้นเทาอ่อนมาก แทน #FFFBF8 */
  --surface-alt:        #F8F9FA;   /* พื้นเทาอ่อนมาก แทน #FFFBF8 */
  --line:               #DEE2E6;   /* เส้นขอบเทา  แทน #F0E6DF */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, .05);
  --shadow-md:          0 12px 32px rgba(0, 0, 0, .08);
}

/* =====================================================================
   2. พื้นหลังที่ hard-code (ส้มอ่อน/ครีม) → เทาอ่อน
   ===================================================================== */

/* กลุ่มพื้นการ์ดภายใน */
.major-card-body,
.ceremony-card-body,
.session-col-body,
.ceremony-col-body,
.dress-panel-body,
.overview-card,
.detail-footer {
  background: #F8F9FA !important;
}

/* หัว campus / venue */
.campus-table-heading,
.venue-block-heading {
  background: #F8F9FA !important;
  border-color: #DEE2E6 !important;
}

/* พื้นไอคอนวงกลมส้มอ่อน → เทา */
.dc-icon,
.nd-action-icon,
.nc-date,
.btn-icon-brand:hover,
.quick-link .qicon {
  background: #F1F3F5 !important;
  color: var(--brand-orange);   /* ไอคอนยังคงสีหลัก */
}

/* พื้นกล่องนับถอยหลัง */
.countdown-location {
  background: #F8F9FA !important;
}

/* พื้นหัว dress panel */
.dress-panel-header {
  background: #F1F3F5 !important;
  border-bottom-color: #DEE2E6 !important;
}

/* หัวการ์ด session-col / ceremony — จากส้มอ่อนเป็นเทา */
.session-col.session-morning .session-col-head,
.session-col.session-afternoon .session-col-head,
.ceremony-col-top-d1,
.ceremony-col-top-d2 {
  background: #F1F3F5 !important;
  color: var(--brand-navy) !important;
  border-bottom: 1px solid #DEE2E6 !important;
}

/* เก็บเส้นแดงเด่นด้านบนการ์ด (ยังเป็นสีหลัก) */
.session-col.session-morning .session-col-head,
.ceremony-col-top-d1 {
  border-top: 3px solid var(--brand-orange) !important;
}
.session-col.session-afternoon .session-col-head,
.ceremony-col-top-d2 {
  border-top: 3px solid var(--brand-navy) !important;
}

/* ไอคอนวงกลมในหัวการ์ด session/ceremony */
.session-col-icon {
  background: var(--brand-orange) !important;   /* ยังคงสีหลัก */
  border: none !important;
  color: #fff !important;
}

/* ป้ายเวลา/ป้าย eyebrow ในการ์ด */
.session-col-head .session-time,
.ceremony-col-time,
.ceremony-col-time-loc,
.ceremony-col-eyebrow {
  background: #fff !important;
  border: 1px solid #DEE2E6 !important;
  color: var(--brand-navy) !important;
}

/* หัวตาราง schedule */
.schedule-table thead th,
.day-grid-header {
  background: #F1F3F5 !important;
  color: var(--brand-navy) !important;
  border-bottom: 2px solid var(--brand-orange) !important;   /* ยังคงเส้นแดงเด่น */
  border-right-color: #DEE2E6 !important;
}
.day-grid-header > div {
  border-right-color: #DEE2E6 !important;
}

/* พื้นตัวการ์ดแถบป้ายเวลา (badge) */
.badge-morning,
.badge-afternoon,
.badge-photo-time {
  background: #fff !important;
  border: 1px solid #DEE2E6 !important;
  color: var(--brand-navy) !important;
}

/* ป้ายช่วงเวลาบนมือถือ */
.day-cell-session-label.label-morning,
.day-cell-session-label.label-afternoon,
.day-cell-session-label.label-location {
  background: #F1F3F5 !important;
  color: var(--brand-navy) !important;
}

/* ป้ายปีการศึกษา */
.badge-year {
  background: #fff !important;
  border: 1px solid #DEE2E6 !important;
  color: var(--text-dark) !important;
}
.badge-year:hover {
  border-color: var(--brand-orange) !important;
  color: var(--brand-orange) !important;
}
.badge-year.active-year {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
}

/* =====================================================================
   3. ปุ่ม / พื้นหลังเล็ก ๆ ที่เคยเป็นส้มอ่อน
   ===================================================================== */

/* ปุ่มไอคอน */
.btn-icon-brand {
  background: #F8F9FA !important;
  color: var(--text-dark) !important;
}

/* hero badge — พื้นขาว ตัวอักษรส้ม (จุดเด่น) */
.hero-badge {
  background: #fff !important;
  color: var(--brand-orange) !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(201, 42, 10, .22) !important;
}

/* hero year badge บนหน้าใน */
.page-hero .hero-year-badge {
  background: #F1F3F5 !important;
  border: 1px solid #DEE2E6 !important;
  color: var(--brand-navy) !important;
}

/* ป้ายข่าวสำคัญ */
.news-panel .panel-header {
  background: #fff !important;
  color: var(--brand-navy) !important;
  border-top: 3px solid var(--brand-orange) !important;
  border-bottom: 1px solid #DEE2E6 !important;
}
.news-panel .panel-header a {
  color: var(--brand-orange) !important;
}

/* พื้นไอคอนใน news-card / nc-date */
.nc-date {
  background: #F1F3F5 !important;
  color: var(--brand-orange) !important;
}

/* พื้น empty-state */
.empty-state-box {
  background: #F8F9FA !important;
  border: 2px dashed #DEE2E6 !important;
}
.empty-state-box .empty-icon {
  background: #fff !important;
  color: var(--brand-orange) !important;
}

/* พื้น section band ข่าว/กำหนดการ */
.section-band-news,
.section-band-dates {
  background: #F1F3F5 !important;
  border-top: 1px solid #DEE2E6 !important;
  border-bottom: 1px solid #DEE2E6 !important;
}

/* =====================================================================
   4. ส่วนหน้ารายละเอียดข่าว (news_detail) และหน้ารวมข่าว (news)
   ===================================================================== */
.nd-section,
.nl-section {
  background: #F8F9FA !important;
}

.nd-foot {
  background: #F8F9FA !important;
  border-top: 1px solid #DEE2E6 !important;
}

.nd-action {
  background: #F8F9FA !important;
  border: 1px solid #DEE2E6 !important;
}
.nd-action:hover {
  background: #fff !important;
  border-color: var(--brand-orange) !important;
}

.nd-date {
  background: #F1F3F5 !important;
}
.nd-date i {
  color: var(--brand-orange) !important;   /* ไอคอนยังคงสีหลัก */
}

.nd-action-icon {
  background: #F1F3F5 !important;
  color: var(--brand-orange) !important;
}

.nd-card,
.nd-side,
.nd-more-item {
  border-color: #DEE2E6 !important;
}

.nl-search input,
.nl-chip {
  border-color: #DEE2E6 !important;
  background: #fff !important;
}

.nl-card {
  background: #fff !important;
  border-color: #DEE2E6 !important;
  border-top: 3px solid #DEE2E6 !important;
}
.nl-card:hover {
  border-color: var(--brand-orange) !important;
}
.nl-card.is-important {
  border-top-color: var(--brand-orange) !important;
}

/* =====================================================================
   5. ส่วนหน้า schedule.php ที่ hard-code ในไฟล์
   ===================================================================== */

/* พื้นใต้การ์ดที่เคยเป็น #fafafc */
.detail-footer {
  background: #F8F9FA !important;
}

/* พื้นหัวการ์ดกำหนดการ */
.detail-header {
  background: #fff !important;
  border-bottom: 1px solid #DEE2E6 !important;
}

/* พื้นรายการคณะใน session-list */
.session-list .faculty-item {
  background: #fff !important;
  border: 1px solid #DEE2E6 !important;
}
.session-list .faculty-item:hover {
  background: #F1F3F5 !important;
  border-color: var(--brand-orange) !important;
}
.session-list .faculty-item::before {
  background: #F1F3F5 !important;
  color: var(--brand-orange) !important;
}

/* =====================================================================
   6. ส่วนการแต่งกาย (dress) และ officer-info-card
   ===================================================================== */
/* dress-doc-card (ปุ่มดาวน์โหลด PDF) ยังคงเป็นพื้นขาว — ต้องเด่น */
.dress-doc-card,
.officer-info-card .dress-doc-card {
  background: #fff !important;
  border-color: #DEE2E6 !important;
}

/* แต่กล่อง officer-info-card ที่ห่อหุ้ม → โปร่งใส (ไม่มีพื้นขาว) */
.officer-info-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* hover ยังคงเด่นเป็นสีหลัก */
.dress-doc-card:hover,
.officer-info-card .dress-doc-card:hover {
  border-color: var(--brand-orange) !important;
  background: #F8F9FA !important;
}
/* =====================================================================
   7. เส้นขอบที่ hard-code (ส้มอ่อน) ใน style.css → เทา
   ===================================================================== */
.session-col,
.ceremony-col,
.faculty-card,
.dress-tab-content,
.news-card-v2,
.nw-card,
.nl-card,
.nd-card,
.nd-side,
.dc-tile,
.doc-card,
.date-card,
.contact-card,
.seat-chart-thumb,
.video-card,
.news-panel,
.empty-state-box,
.dress-doc-card,
.campus-table-block .schedule-table,
.day-grid,
.schedule-table {
  border-color: #DEE2E6 !important;
}

/* =====================================================================
   8. สีที่ hard-code ของไอคอน → คงสีหลัก
   ===================================================================== */
.doc-card .doc-icon,
.dress-doc-card .doc-icon {
  color: var(--brand-orange) !important;   /* เดิมเป็นแดง Bootstrap #dc3545 */
}

/* =====================================================================
   9. สีพื้นต่าง ๆ ที่เหลือ
   ===================================================================== */

/* พื้น sortable ghost */
.sortable-ghost {
  background: #F1F3F5 !important;
}

/* พื้น video-category */
.video-category {
  background: #F1F3F5 !important;
  color: #888;
}

/* พื้นด้านหลัง news-card hover */
a.news-card-v2:hover,
a.nw-card:hover,
a.nl-card:hover {
  border-color: var(--brand-orange) !important;
}

/* พื้นหลังไอคอน doc-card */
.doc-card:hover {
  border-color: var(--brand-orange) !important;
}

/* =====================================================================
   10. คงส่วนที่ต้องเป็นสีหลัก (ไม่เปลี่ยน)
   ===================================================================== */
/* ปุ่มหลัก - สีแดงส้มเข้ม */
.btn-primary-brand,
.btn-dark-brand,
.btn-brand {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
}
.btn-primary-brand:hover,
.btn-dark-brand:hover,
.btn-brand:hover {
  background: var(--brand-orange-dark) !important;
  border-color: var(--brand-orange-dark) !important;
}

/* top-bar, footer - สีแดงเข้ม */
.top-bar,
.site-footer,
.footer-bottom,
.offcanvas-header {
  background: var(--brand-navy) !important;
}

/* hero สีแดงเข้ม */
.hero-full-overlay {
  background: radial-gradient(ellipse at 50% 40%,
              rgba(80, 12, 2, .58) 0%,
              rgba(80, 12, 2, .42) 55%,
              rgba(80, 12, 2, .22) 100%) !important;
}

/* page-hero (หน้าใน) — พื้นเทาอ่อน */
.page-hero {
  background: #F8F9FA !important;
  color: var(--text-dark) !important;
  border-bottom: 1px solid #DEE2E6 !important;
}
.page-hero h1,
.page-hero .text-white {
  color: var(--text-dark) !important;
}
.breadcrumb-custom a {
  color: var(--text-muted) !important;
}
.breadcrumb-custom .active {
  color: var(--brand-orange) !important;
}

/* =====================================================================
   11. ส่วน schedule overview cards
   ===================================================================== */
.overview-card {
  background: #F8F9FA !important;
  border: 1px solid #DEE2E6 !important;
}
.overview-card .ov-icon {
  background: var(--brand-orange) !important;   /* ไอคอนยังคงสีหลัก */
  color: #fff !important;
}
.overview-card .ov-title {
  color: var(--brand-orange) !important;        /* หัวข้อยังคงสีหลัก */
}
.overview-card .ov-btn {
  color: var(--brand-orange) !important;       /* ปุ่มยังคงสีหลัก */
}

/* overview card รุ่นต่าง ๆ — ไอคอนยังคงสีหลัก */
.overview-card.ov-minor,
.overview-card.ov-major,
.overview-card.ov-ceremony,
.overview-card.ov-photo {
  --ov-icon-bg: var(--brand-orange);
  --ov-title-color: var(--brand-orange);
}

/* =====================================================================
   12. กล่องตาราง — พื้นเทาอ่อน เส้นเทา
   ===================================================================== */
.schedule-table tbody td,
.day-grid-row > div {
  background: #fff !important;
  border-color: #DEE2E6 !important;
}

/* ไอคอนสถานที่ */
.schedule-table .loc-line i,
.campus-table-heading i,
.venue-block-heading i {
  color: var(--brand-orange) !important;
}

/* =====================================================================
   13. photo-banner — กลับเป็นสีหลัก
   ===================================================================== */
.photo-banner {
  background: var(--brand-orange) !important;
  color: #fff !important;
  border: none !important;
}
.photo-banner .text-light-50,
.photo-banner .text-muted {
  color: rgba(255, 255, 255, .85) !important;
}

/* =====================================================================
   14. countdown-banner — กล่องขาว ตัวเลขส้ม
   ===================================================================== */
.countdown-banner {
  background: #fff !important;
  border: 1px solid #DEE2E6 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08) !important;
}
.countdown-label {
  color: var(--text-muted) !important;
}
.countdown-label h2 {
  color: var(--text-dark) !important;
}
.countdown-date {
  color: var(--brand-orange) !important;
}
.countdown-unit {
  background: var(--brand-orange) !important;   /* กล่องตัวเลขยังคงสีหลัก */
  border: none !important;
}
.countdown-num {
  color: #fff !important;
}
.countdown-text {
  color: rgba(255, 255, 255, .85) !important;
}
.countdown-arrived {
  color: var(--brand-navy) !important;
}

/* =====================================================================
   15. quick-link-strip — คงเดิมเป็นแถบสีหลัก
   ===================================================================== */
.quick-link-strip {
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-navy)) !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(143, 29, 7, .22) !important;
}
.quick-link-strip .quick-link {
  color: #fff !important;
}
.quick-link-strip .quick-link:hover {
  background: transparent !important;
}
.quick-link-strip .qicon {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}
.quick-link:hover .qicon {
  background: var(--brand-orange) !important;
  color: #fff !important;
}

/* =====================================================================
   16. step-num — คงสีหลัก
   ===================================================================== */
.step-num {
  background: var(--brand-orange) !important;
  color: #fff !important;
}

/* =====================================================================
   FIX: คืนเอฟเฟกต์ hover ที่หายไป (สีขอบแดง + เงา + ยกการ์ดขึ้น)
   ===================================================================== */

/* === การ์ดภาพรวม 4 ใบด้านบน (overview-card) === */
.overview-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08) !important;
  border-color: var(--brand-orange) !important;
}

/* === การ์ดใหญ่ช่วงเช้า/บ่าย (session-col) — ซ้อมใหญ่ === */
.session-col:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px rgba(212, 67, 19, .15) !important;
  border-color: var(--brand-orange) !important;
}

/* === การ์ดวันพิธี (ceremony-col) — วันที่ 1/วันที่ 2 === */
.ceremony-col:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(212, 67, 19, .18) !important;
  border-color: var(--brand-orange) !important;
}

/* === การ์ดคณะ (faculty-card) === */
.faculty-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(212, 67, 19, .14) !important;
  border-color: var(--brand-orange) !important;
}

/* === การ์ดอื่น ๆ ที่มี hover === */
.seat-chart-thumb:hover,
.video-card:hover,
.dress-doc-card:hover,
.doc-card:hover,
.dress-doc-card:hover {
  border-color: var(--brand-orange) !important;
}

/* ไอคอนวงกลมในการ์ด overview ยังคงสีแดง */
.overview-card:hover .ov-icon {
  transform: scale(1.05);
}

/* ปุ่ม "ดูรายละเอียด" ใน overview-card เคลื่อนไหวตอน hover */
.overview-card:hover .ov-btn i {
  transform: translateX(4px);
  transition: transform .25s ease;
}

/* === การ์ดข่าวต่าง ๆ === */
a.news-card-v2:hover,
a.nw-card:hover,
a.nl-card:hover,
a.nd-more-item:hover {
  border-color: var(--brand-orange) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08) !important;
}

/* === ไทล์เอกสาร (dc-tile) === */
.dc-tile:hover {
  border-color: var(--brand-orange) !important;
  border-style: solid !important;
  background: #fff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08) !important;
}

/* === รายการคณะใน session-list (li.faculty-item) === */
.session-list .faculty-item:hover {
  background: #F1F3F5 !important;
  border-color: var(--brand-orange) !important;
  transform: translateX(3px) !important;
}

/* === การ์ดภาพผังที่นั่ง (seat-chart-thumb) === */
.seat-chart-thumb:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 26px rgba(212, 67, 19, .18) !important;
}

/* === การ์ดวิดีโอ (video-card) === */
.video-card:hover,
.video-card:focus-visible {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px -8px rgba(212, 67, 19, .25) !important;
  border-color: rgba(212, 67, 19, .35) !important;
}

/* === การ์ดวันที่ (date-card) === */
.date-card:hover {
  border-color: var(--brand-orange) !important;
}

/* === การ์ดเอกสาร (doc-card) === */
.doc-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06) !important;
  border-color: var(--brand-orange) !important;
}

/* === การ์ดแต่งกาย (dress-doc-card) === */
.dress-doc-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--brand-orange) !important;
  box-shadow: 0 10px 22px rgba(212, 67, 19, .14) !important;
}

/* === ปุ่ม quick-link (ไอคอนวงกลมเปลี่ยนเป็นสีแดง) === */
.quick-link:hover .qicon {
  background: var(--brand-orange) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.05) !important;
}

/* === รายการ news list (nl-more-item) === */
a.nd-more-item:hover {
  transform: translateX(3px) !important;
}

/* === card hover ที่ใช้ Bootstrap (.card.shadow-sm) === */
.schedule-card:hover,
.info-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08) !important;
}

/* hover: วงกลมไอคอนเป็นสีขาว ไอคอนสีแดง */
.quick-link-strip .quick-link:hover .qicon {
  background: #fff !important;
  color: var(--brand-orange) !important;
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}