/* ==========================================================================
   IWALS 2026 Official Theme Stylesheet
   Design Inspiration: IWALS 2026 Official Poster (IWALS2026.png)
   Aesthetic DNA: 
     - Royal Navy Blue (#0c2340) & Thai Crimson Red (#c8102e)
     - Temple Gold Accents (#d4af37 / #e5a93b)
     - Clean Sky Light Canvas (#f4f8fc) & Elegant White Cards (#ffffff)
     - Dynamic Tricolor Ribbon Waves & Crisp Rounded Capsule Headers
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Cinzel:wght@600;700;800&family=Sarabun:ital,wght@0,400;0,600;0,700;1,400&family=Noto+Sans+TC:wght@400;500;700&display=swap');

:root {
  /* Brand Core Palette from IWALS2026.png */
  --navy-deep: #0c2340;
  --navy-royal: #11325c;
  --navy-light: #1e4a7a;
  --navy-subtle: #e8f0f8;
  
  --crimson-red: #c8102e;
  --crimson-thai: #c8102e;
  --crimson-deep: #9d0b23;
  --crimson-light: #fee2e2;
  --crimson-gradient: linear-gradient(135deg, #c8102e 0%, #a80d24 100%);

  --gold-temple: #d4af37;
  --gold-amber: #e5a93b;
  --gold-light: #fef3c7;
  --gold-gradient: linear-gradient(135deg, #d4af37 0%, #e5a93b 100%);

  --sky-blue: #0284c7;
  --sky-light: #e0f2fe;

  /* Canvas & Card Layout */
  --bg-page: #f1f6fb;
  --bg-card: #ffffff;
  --bg-card-subtle: #f8fafc;
  --bg-header-sky: linear-gradient(180deg, #d9ecfb 0%, #edf5fc 55%, #f8fbfd 100%);

  /* Typography Colors */
  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-navy: #0c2340;
  --text-crimson: #c8102e;
  --text-white: #ffffff;

  /* Borders & Shadows */
  --border-light: #e2e8f0;
  --border-blue: #cbd5e1;
  --border-navy: #0c2340;
  --border-crimson: #c8102e;
  
  --shadow-sm: 0 2px 8px rgba(12, 35, 64, 0.05);
  --shadow-card: 0 10px 30px -5px rgba(12, 35, 64, 0.08), 0 4px 6px -2px rgba(12, 35, 64, 0.04);
  --shadow-card-hover: 0 20px 35px -8px rgba(12, 35, 64, 0.13), 0 8px 12px -3px rgba(12, 35, 64, 0.06);
  --shadow-glow-red: 0 6px 20px rgba(200, 16, 46, 0.28);
  --shadow-glow-blue: 0 6px 20px rgba(12, 35, 64, 0.25);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* Poster Dynamic Ribbon */
  --ribbon-thai: linear-gradient(90deg, #c8102e 0%, #c8102e 20%, #ffffff 20%, #ffffff 32%, #0c2340 32%, #0c2340 68%, #ffffff 68%, #ffffff 80%, #c8102e 80%, #c8102e 100%);
  --ribbon-wave: linear-gradient(90deg, #0c2340 0%, #1e4a7a 30%, #c8102e 70%, #9d0b23 100%);

  /* Backward Compatibility Variables */
  --primary-cyan: #0284c7;
  --primary-cyan-deep: #0369a1;
  --primary-magenta: #c8102e;
  --accent-purple: #1e3a8a;
  --accent-gold: #d4af37;
  --accent-green: #059669;
  --text-primary: #0f172a;
  --text-cyan: #0284c7;
  --gradient-rainbow: linear-gradient(135deg, #0c2340 0%, #1e4a7a 35%, #c8102e 70%, #d4af37 100%);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-page);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 12% 10%, rgba(2, 132, 199, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 88% 18%, rgba(200, 16, 46, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(212, 175, 55, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Base Headings & Links */
h1, h2, h3, h4, h5, h6 {
  color: var(--navy-deep);
  font-weight: 700;
  margin-top: 0;
  line-height: 1.35;
}

h1 { font-size: 2.15rem; }
h2 { font-size: 1.68rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }

a {
  color: var(--navy-royal);
  text-decoration: none;
  transition: all 0.22s ease;
}

a:hover, a:focus {
  color: var(--crimson-red);
}

p {
  margin: 0 0 1.1rem;
  color: var(--text-secondary);
}

.bold { font-weight: 700; }
.italic { font-style: italic; }
.center { text-align: center; }

/* Gradient & Brand Texts */
.gradient-text {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.cyan-text, .navy-text {
  color: var(--navy-deep) !important;
}

.pink-text, .red-text {
  color: var(--crimson-red) !important;
}

.gold-text {
  color: var(--gold-temple) !important;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

/* Top Utility Bar */
#top-utility-bar {
  background: var(--navy-deep);
  color: #ffffff;
  border-bottom: 2px solid var(--gold-temple);
  font-size: 13px;
  padding: 8px 0;
  position: relative;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(12, 35, 64, 0.2);
}

.top-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #e2e8f0;
}

.top-bar-left span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.top-bar-left i {
  color: var(--gold-temple);
}

.thai-welcome-tag {
  background: rgba(200, 16, 46, 0.25);
  border: 1px solid rgba(200, 16, 46, 0.6);
  color: #ffffff;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.5px;
}

.thai-script {
  font-family: 'Sarabun', sans-serif;
  color: var(--gold-temple);
  font-weight: 700;
}

.badge-venue {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #ffffff;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.thai-flag-icon {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
  background: linear-gradient(180deg, #c8102e 0%, #c8102e 16.6%, #ffffff 16.6%, #ffffff 33.3%, #0c2340 33.3%, #0c2340 66.6%, #ffffff 66.6%, #ffffff 83.3%, #c8102e 83.3%, #c8102e 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  vertical-align: middle;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.top-bar-right a {
  color: #e2e8f0 !important;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.top-bar-right a:hover {
  color: var(--gold-temple) !important;
}

/* Header Main Banner */
#header-banner {
  background: var(--bg-header-sky);
  border-bottom: 1px solid #d0e2f2;
  position: relative;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(12, 35, 64, 0.06);
  overflow: hidden;
}

/* 曼谷大皇宮佛塔天際線剪影 (Bangkok Landmark Silhouette) */
.bangkok-skyline-silhouette {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 550px;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 160' fill='%230c2340' opacity='0.08'%3E%3Cpath d='M0,160 L0,150 L50,150 L55,130 L60,110 L65,70 L68,30 L70,10 L72,30 L75,70 L80,110 L85,130 L90,150 L140,150 L145,135 L150,115 L155,75 L160,25 L162,5 L164,25 L169,75 L174,115 L179,135 L185,150 L230,150 L240,120 L245,95 L250,55 L252,20 L254,55 L259,95 L264,120 L275,150 L320,150 L330,140 L340,110 L350,60 L355,15 L357,0 L359,15 L364,60 L374,110 L384,140 L395,150 L460,150 L470,135 L475,100 L480,50 L483,18 L485,50 L490,100 L495,135 L505,150 L560,150 L570,125 L575,85 L580,35 L582,12 L584,35 L589,85 L594,125 L605,150 L670,150 L680,130 L685,90 L690,45 L692,15 L694,45 L699,90 L704,130 L715,150 L800,150 L800,160 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* 泰國節慶天燈裝飾 (Thai Floating Lanterns) */
.thai-lanterns-deco {
  position: absolute;
  top: 12px;
  right: 28px;
  display: flex;
  gap: 18px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
}

.thai-lantern {
  width: 22px;
  height: 32px;
  background: linear-gradient(180deg, #c8102e 0%, #e11d48 60%, #fbbf24 100%);
  border-radius: 6px 6px 12px 12px;
  position: relative;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.35);
  animation: floatLantern 4s ease-in-out infinite alternate;
}

.thai-lantern::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 5px;
  background: var(--gold-temple);
  border-radius: 3px 3px 0 0;
}

.thai-lantern::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: var(--gold-temple);
  box-shadow: 0 2px 4px rgba(212, 175, 55, 0.8);
}

.thai-lantern.lantern-2 {
  width: 17px;
  height: 25px;
  margin-top: 14px;
  animation-duration: 5.5s;
  animation-delay: -1.5s;
}

@keyframes floatLantern {
  0% { transform: translateY(0px) rotate(-1deg); }
  100% { transform: translateY(-7px) rotate(2deg); }
}

.banner-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 26px 24px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.banner-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand-title {
  display: flex;
  flex-direction: column;
}

/* IWALS 2026 Display Typography Matching the Poster */
.iwals-hero-text {
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.05;
  color: var(--navy-deep);
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-shadow: 0 2px 4px rgba(12, 35, 64, 0.08);
}

.iwals-hero-text .hero-year {
  color: var(--crimson-red);
  font-weight: 900;
  letter-spacing: 0px;
}

.iwals-sub-badge {
  display: inline-block;
  font-size: 0.88rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy-royal);
  font-weight: 800;
  margin-top: 6px;
}

.iwals-date-badge {
  font-size: 0.88rem;
  color: var(--crimson-red);
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.iwals-slogan-italic {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--navy-deep);
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.iwals-full-name {
  font-size: 0.86rem;
  color: var(--text-secondary);
  max-width: 520px;
  line-height: 1.4;
  margin-top: 4px;
}

/* Banner Countdown & Actions */
.banner-countdown {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #ffffff;
  border: 1.5px solid #dce7f3;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  box-shadow: 0 8px 24px rgba(12, 35, 64, 0.08);
}

.countdown-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--navy-deep);
  font-weight: 800;
  line-height: 1.2;
}

.countdown-boxes {
  display: flex;
  gap: 8px;
}

.count-unit {
  text-align: center;
  min-width: 48px;
  background: var(--navy-subtle);
  border: 1px solid #cbd5e1;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
}

.count-num {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy-deep);
  line-height: 1;
}

.count-txt {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 3px;
}

/* Action Buttons Inspired by Poster */
.header-action-btns {
  display: flex;
  gap: 10px;
}

.btn-cyan, .btn-navy {
  background: linear-gradient(135deg, #0c2340 0%, #163e6e 100%);
  color: #ffffff !important;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: var(--shadow-glow-blue);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.btn-cyan:hover, .btn-navy:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #11325c 0%, #1e4a7a 100%);
  box-shadow: 0 8px 25px rgba(12, 35, 64, 0.35);
  color: #ffffff !important;
}

.btn-pink, .btn-crimson {
  background: var(--crimson-gradient);
  color: #ffffff !important;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: var(--shadow-glow-red);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.btn-pink:hover, .btn-crimson:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #d91b38 0%, #b31027 100%);
  box-shadow: 0 8px 25px rgba(200, 16, 46, 0.45);
  color: #ffffff !important;
}

/* Slogan Strip With Gold Diamonds */
.slogan-strip {
  background: var(--navy-deep);
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 0;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.slogan-strip .dot, .slogan-strip .gold-gem {
  color: var(--gold-temple);
  font-size: 13px;
}

/* Dynamic Tricolor Ribbon Wave Divider (Matching the poster curve) */
.thai-ribbon-divider {
  height: 6px;
  width: 100%;
  background: var(--ribbon-thai);
  position: relative;
  z-index: 20;
}

/* ==========================================================================
   Main Layout & Content Grid
   ========================================================================== */
#main-container {
  max-width: 1400px;
  margin: 32px auto 65px;
  padding: 0 24px;
  position: relative;
  z-index: 10;
}

.content-grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 30px;
  align-items: start;
}

/* Left Sidebar Navigation */
#left-sidebar {
  position: sticky;
  top: 24px;
}

.sidebar-card {
  background: var(--bg-card);
  border: 1.5px solid #dbe6f2;
  border-radius: var(--radius-md);
  padding: 18px 14px;
  box-shadow: var(--shadow-card);
}

.sidebar-title {
  padding: 10px 14px 14px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--navy-deep);
  border-bottom: 2px solid var(--navy-subtle);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-title i {
  color: var(--crimson-red);
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  margin-bottom: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: #334155;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  border: 1px solid transparent;
}

.nav-link i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: var(--navy-royal);
  transition: all 0.2s ease;
}

.nav-link:hover {
  background: var(--sky-light);
  color: var(--navy-deep);
  border-color: #bfdbfe;
  transform: translateX(4px);
}

.nav-link:hover i {
  color: var(--crimson-red);
}

.nav-link.active {
  background: linear-gradient(135deg, #0c2340 0%, #173860 100%);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(12, 35, 64, 0.2);
}

.nav-link.active i {
  color: var(--gold-temple);
}

.nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 4px;
  background: var(--crimson-red);
  border-radius: 0 4px 4px 0;
}

/* Sidebar Poster Preview Thumbnail */
.sidebar-poster-preview {
  margin-top: 20px;
  padding: 12px;
  background: var(--bg-card-subtle);
  border-radius: var(--radius-sm);
  border: 1.5px solid #dce7f3;
  text-align: center;
}

.sidebar-poster-preview img {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(12, 35, 64, 0.1);
}

.sidebar-poster-preview img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(12, 35, 64, 0.18);
}

.sidebar-poster-label {
  font-size: 12.5px;
  color: var(--navy-deep);
  margin-top: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sidebar-poster-label i {
  color: var(--crimson-red);
}

/* Sidebar Thai Culture & Hospitality Widget */
.sidebar-thai-widget {
  margin-top: 18px;
  padding: 16px;
  background: linear-gradient(135deg, #0c2340 0%, #173b67 100%);
  border-radius: var(--radius-sm);
  color: #ffffff;
  border-left: 4px solid var(--crimson-red);
  box-shadow: 0 4px 15px rgba(12, 35, 64, 0.12);
  position: relative;
  overflow: hidden;
}

.sidebar-thai-widget::after {
  content: "🇹🇭";
  position: absolute;
  right: -6px;
  bottom: -6px;
  font-size: 40px;
  opacity: 0.18;
  pointer-events: none;
}

.sidebar-thai-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gold-temple);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sidebar-thai-desc {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 10px;
}

.sidebar-thai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #ffffff !important;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(212, 175, 55, 0.4);
  transition: all 0.2s ease;
}

.sidebar-thai-btn:hover {
  background: var(--gold-temple);
  color: var(--navy-deep) !important;
  border-color: var(--gold-temple);
}

/* ==========================================================================
   Right Main Content & Components
   ========================================================================== */
#main-content {
  min-height: 750px;
}

.content-card {
  background: var(--bg-card);
  border: 1.5px solid #dce7f3;
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

/* Top Tricolor Border on Cards */
.content-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ribbon-thai);
}

/* Page Header & Section Title */
.page-header-box {
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--navy-subtle);
  position: relative;
}

.page-title {
  font-size: 1.95rem;
  font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* Poster Ribbon Capsule Header (TIMELINE / CONFERENCE THEME / etc.) */
.capsule-ribbon-header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy-deep);
  color: #ffffff;
  padding: 9px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 22px;
  box-shadow: 0 4px 15px rgba(12, 35, 64, 0.18);
}

.capsule-ribbon-header.red {
  background: var(--crimson-red);
  box-shadow: 0 4px 15px rgba(200, 16, 46, 0.22);
}

.capsule-ribbon-header i {
  color: var(--gold-temple);
  font-size: 16px;
}

/* Conference Hero Card (Inside Home.aspx) */
.hero-conference-card {
  background: linear-gradient(135deg, #0c2340 0%, #163e6e 65%, #1e4a7a 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 32px;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(12, 35, 64, 0.16);
}

.hero-conference-card::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.hero-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--gold-temple);
  color: var(--gold-temple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.hero-title-main {
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 12px;
}

.hero-title-main .gradient-text {
  color: var(--gold-temple);
  background: none;
  -webkit-text-fill-color: initial;
}

.hero-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e2e8f0;
}

.hero-meta-item i {
  color: var(--gold-temple);
}

/* Key Topics Grid (Matching Poster Themes 1 ~ 6) */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0 35px;
}

.topic-box {
  background: #ffffff;
  border: 1.5px solid #dce7f3;
  border-radius: var(--radius-md);
  padding: 24px;
  transition: all 0.25s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.topic-box:hover {
  border-color: var(--navy-royal);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Numbered Circle Bullet (1 ~ 6 in poster style) */
.topic-icon, .numbered-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 14px;
  box-shadow: 0 4px 10px rgba(12, 35, 64, 0.2);
}

.topic-box:hover .topic-icon {
  background: var(--crimson-red);
}

.topic-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 8px;
}

.topic-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Timeline Cards (Matching Poster TIMELINE Section) */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}

.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1.5px solid #dce7f3;
  border-left: 5px solid var(--navy-deep);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
}

.timeline-item:hover {
  border-color: #cbd5e1;
  border-left-color: var(--navy-royal);
  transform: translateX(4px);
  box-shadow: var(--shadow-card);
}

/* Early Bird Deadline Card (Direct copy of poster's red callout) */
.timeline-item.highlight, .poster-alert-red {
  background: var(--crimson-gradient);
  border: none;
  border-radius: var(--radius-sm);
  color: #ffffff !important;
  box-shadow: var(--shadow-glow-red);
}

.timeline-item.highlight:hover {
  transform: translateX(4px) scale(1.01);
}

.timeline-item.highlight .timeline-title,
.timeline-item.highlight .timeline-sub,
.timeline-item.highlight p {
  color: #ffffff !important;
}

.timeline-event {
  display: flex;
  align-items: center;
  gap: 16px;
}

.timeline-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-subtle);
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-deep);
  font-size: 18px;
}

.timeline-item.highlight .timeline-icon-box {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.timeline-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-deep);
}

.timeline-sub {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.timeline-date-badge {
  background: var(--navy-subtle);
  border: 1px solid #bfdbfe;
  color: var(--navy-deep);
  font-size: 14px;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.timeline-item.highlight .timeline-date-badge {
  background: #ffffff;
  border: none;
  color: var(--crimson-red);
}

/* Pricing / Fee Tables (Matching International & Thailand Sections) */
.fee-table-container {
  overflow-x: auto;
  margin: 25px 0 35px;
  border-radius: var(--radius-md);
  border: 1.5px solid #dce7f3;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.iwals-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.iwals-table th {
  background: var(--navy-deep);
  color: #ffffff;
  font-weight: 800;
  font-size: 13.5px;
  padding: 15px 20px;
  border-bottom: 2px solid var(--gold-temple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.iwals-table th.th-red {
  background: var(--crimson-red);
}

.iwals-table td {
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  color: var(--text-main);
  font-size: 14.5px;
}

.iwals-table tr:last-child td {
  border-bottom: none;
}

.iwals-table tr:hover td {
  background: var(--navy-subtle);
}

.price-tag-usd {
  font-weight: 800;
  color: var(--navy-deep);
  font-size: 1.1rem;
}

.price-tag-thb {
  font-size: 13.5px;
  color: var(--crimson-red);
  font-weight: 700;
}

/* Poster Comparison Cards for Fees */
.fee-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 25px 0;
}

.fee-col-card {
  background: #ffffff;
  border: 1.5px solid #dce7f3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.fee-col-header {
  padding: 14px 20px;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fee-col-header.intl {
  background: var(--navy-deep);
}

.fee-col-header.thai {
  background: var(--crimson-red);
}

/* Registration Form Controls */
.iwals-form-group {
  margin-bottom: 22px;
}

.iwals-form-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-deep);
  margin-bottom: 8px;
}

.iwals-form-label .req {
  color: var(--crimson-red);
}

.iwals-input, .iwals-select, .iwals-textarea {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-xs);
  color: var(--text-main);
  padding: 11px 16px;
  font-size: 14.5px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.iwals-input:focus, .iwals-select:focus, .iwals-textarea:focus {
  outline: none;
  border-color: var(--navy-royal);
  box-shadow: 0 0 0 3px rgba(17, 50, 92, 0.15);
  background: #ffffff;
}

.iwals-select option {
  background: #ffffff;
  color: var(--text-main);
}

/* Modal / Lightbox for Posters */
.poster-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(12, 35, 64, 0.92);
  backdrop-filter: blur(8px);
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.poster-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
}

.poster-modal-content img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.modal-close-btn {
  position: absolute;
  top: -42px;
  right: 0;
  color: #ffffff;
  font-size: 32px;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

.modal-close-btn:hover {
  color: var(--gold-temple);
}

/* ==========================================================================
   Footer Section
   ========================================================================== */
#iwals-footer {
  background: var(--navy-deep);
  color: #ffffff;
  border-top: 3px solid var(--gold-temple);
  padding: 55px 0 25px;
  position: relative;
  z-index: 10;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-col-title {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}

.footer-col-title::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--crimson-red);
}

.footer-top p {
  color: #cbd5e1;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #cbd5e1;
  font-size: 13.5px;
  transition: all 0.2s ease;
}

.footer-links a:hover {
  color: var(--gold-temple);
  padding-left: 4px;
}

.footer-bottom {
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 13px;
  color: #94a3b8;
}

/* Back to top button */
.back-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  background: var(--navy-deep);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--gold-temple);
  box-shadow: 0 4px 20px rgba(12, 35, 64, 0.35);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.back-to-top-btn.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top-btn:hover {
  transform: translateY(-4px);
  background: var(--crimson-red);
  border-color: #ffffff;
}

/* Mobile Toggle & Responsive Breakpoints */
.mobile-nav-toggle {
  display: none;
  background: var(--navy-subtle);
  border: 1px solid #cbd5e1;
  color: var(--navy-deep);
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 992px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  #left-sidebar {
    position: static;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .banner-countdown {
    width: 100%;
    justify-content: space-between;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .content-card {
    padding: 26px 20px;
  }

  .sidebar-card .nav-menu {
    display: none;
  }

  .sidebar-card .nav-menu.mobile-open {
    display: block;
    margin-top: 10px;
  }

  .fee-dual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .iwals-hero-text {
    font-size: 2.3rem;
  }

  .banner-container {
    padding: 16px;
  }

  .top-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}