/* ============================================
   MALAYSIA TRULY ASIA — HELP CENTER
   Vanilla CSS SPA — Apple/Stripe aesthetic
   ============================================ */

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --mta-red: #CC0000;
  --mta-gold: #FFD700;
  --mta-navy: #354EA2;       /* Official MTA logo blue (#354EA2) */
  --mta-blue: #2A4288;        /* Darker shade for gradient depth */
  --mta-blue-light: #4A68C0;  /* Lighter shade for gradient highlights */
  --mta-white: #ffffff;
  --mta-light-blue: #e8f2ff;

  --bg-primary: #ffffff;
  --bg-secondary: #e8f2ff;
  --bg-card: #ffffff;
  --text-primary: #333333;
  --text-secondary: #555555;
  --text-muted: #888888;
  --border-color: #e2e5ee;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(53,78,162,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(53,78,162,0.12), 0 4px 8px rgba(0,0,0,0.06);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --header-h: 64px;
  --chat-h: 200px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
  background: linear-gradient(180deg, #ffffff 0%, #f0f6ff 40%, #e8f2ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + var(--chat-h));
}

a { color: var(--mta-navy); text-decoration: none; }

/* ===== HEADER ===== */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: linear-gradient(135deg, #2A4288 0%, #354EA2 50%, #4A68C0 100%);
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(53,78,162,0.3);
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
}
.header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.brand:hover {
  transform: scale(1.02);
}
/* Logo — transparent PNG blends into blue header */
.brand-logo-wrap {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: filter 0.3s ease;
}
.brand:hover .brand-logo-wrap {
  filter: brightness(1.1);
  box-shadow: none;
}
.brand-logo {
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}
.brand-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.nav-tabs {
  display: flex;
  gap: 4px;
}
.nav-tab {
  background: linear-gradient(135deg, var(--mta-gold) 0%, #FFE54F 100%);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--mta-navy);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(255,215,0,0.3);
}
.nav-tab:hover {
  background: linear-gradient(135deg, #FFE54F 0%, #FFD700 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,215,0,0.45);
}
.nav-tab.active {
  background: linear-gradient(135deg, var(--mta-gold) 0%, #FFE54F 100%);
  color: var(--mta-navy);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 2px 12px rgba(255,215,0,0.3);
}

/* ===== CHAT BAR ===== */
#chat-section {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 999;
  background: linear-gradient(135deg, #2A4288 0%, #354EA2 40%, #4A68C0 70%, #2A4288 100%);
  box-shadow: 0 4px 24px rgba(53,78,162,0.25);
  transition: all 0.3s ease;
  overflow: hidden;
}
/* Animated decorative glow */
#chat-section::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.chat-bar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px 12px;
  position: relative;
}
/* Banner */
.chat-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
/* Full-body mascot - no circle, transparent PNG */
.chat-mascot-img {
  width: 56px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  animation: mascotBounce 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  max-height: 64px;
}
@keyframes mascotBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-2deg); }
  75% { transform: translateY(2px) rotate(2deg); }
}
.chat-banner-text {
  color: #fff;
}
.chat-banner-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.chat-banner-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
}
/* Input row */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#chat-input {
  flex: 1;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 16px 22px;
  font-size: 17px;
  font-family: var(--font);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  color: #fff;
  outline: none;
  transition: all 0.3s ease;
}
#chat-input::placeholder {
  color: rgba(255,255,255,0.5);
}
#chat-input:focus {
  border-color: var(--mta-gold);
  background: rgba(255,255,255,0.15);
  box-shadow: 0 0 0 4px rgba(255,215,0,0.1);
}
#chat-send {
  background: linear-gradient(135deg, #FFD700 0%, #FFE54F 50%, #FFD700 100%);
  border: none;
  color: var(--mta-navy);
  height: 54px;
  min-width: 54px;
  padding: 0 20px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(255,215,0,0.3);
}
#chat-send:hover {
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 6px 24px rgba(255,215,0,0.45);
}
#chat-send:active {
  transform: scale(0.98);
}
.send-icon { font-size: 16px; }
.send-text { font-size: 16px; font-weight: 700; }
/* Suggestion chips */
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chat-suggestion-chip {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
.chat-suggestion-chip:hover {
  background: rgba(255,215,0,0.25);
  border-color: rgba(255,215,0,0.5);
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 16px rgba(255,215,0,0.2);
}
.chat-messages {
  max-height: 300px;
  overflow-y: auto;
  padding: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: chatExpand 0.3s ease;
}
@keyframes chatExpand {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 300px; }
}
.chat-bubble {
  max-width: 75%;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  animation: bubbleIn 0.3s ease;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-bubble.user {
  align-self: flex-end;
  background: var(--mta-navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.bot {
  align-self: flex-start;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}
.chat-bubble.bot .bot-answer {
  margin-bottom: 8px;
  white-space: pre-line;
}
.chat-bubble.bot .bot-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  border-top: 1px solid var(--border-color);
  padding-top: 6px;
}
.chat-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
}
.chat-feedback .fb-btn {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
.chat-feedback .fb-btn:hover { border-color: var(--mta-navy); }
.chat-feedback .fb-btn.selected { background: var(--mta-gold); border-color: var(--mta-gold); }
.chat-toggle {
  text-align: center;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
}
.chat-toggle:hover { color: var(--text-primary); }

/* ===== CHAT FULL-SCREEN OVERLAY ===== */
.chat-fullscreen {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  background: var(--bg-primary);
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.chat-fullscreen.active {
  display: flex;
  opacity: 1;
}
.chat-fs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #2A4288 0%, #354EA2 50%, #4A68C0 100%);
  box-shadow: 0 4px 20px rgba(53,78,162,0.3);
  flex-shrink: 0;
}
.chat-fs-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-fs-mascot {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
  animation: mascotBounce 3s ease-in-out infinite;
}
.chat-fs-title {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}
.chat-fs-status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  margin-top: 2px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.5);
}
.chat-fs-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.chat-fs-close:hover {
  background: rgba(255,255,255,0.3);
  transform: rotate(90deg);
}
.chat-fs-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
.chat-fs-input-bar {
  padding: 12px 20px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  flex-shrink: 0;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
.chat-fs-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.chat-fs-chip {
  background: var(--mta-light-blue);
  border: 1px solid var(--border-color);
  color: var(--mta-navy);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.chat-fs-chip:hover {
  background: var(--mta-navy);
  color: #fff;
  border-color: var(--mta-navy);
  transform: translateY(-1px);
}
.chat-fs-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
#chat-fs-input {
  flex: 1;
  border: 2px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 16px;
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
}
#chat-fs-input:focus {
  border-color: var(--mta-blue);
  box-shadow: 0 0 0 4px rgba(30,74,140,0.1);
}
#chat-fs-send {
  background: var(--mta-navy);
  border: none;
  color: #fff;
  height: 52px;
  min-width: 52px;
  padding: 0 20px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#chat-fs-send:hover {
  background: var(--mta-blue);
  transform: scale(1.03);
}
/* Full-screen chat bubbles */
.chat-fs-messages .chat-bubble {
  max-width: 80%;
  padding: 14px 20px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.6;
  word-wrap: break-word;
  animation: bubbleIn 0.3s ease;
}
.chat-fs-messages .chat-bubble.user {
  align-self: flex-end;
  background: var(--mta-navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-fs-messages .chat-bubble.bot {
  align-self: flex-start;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}
.chat-fs-messages .chat-bubble.bot .bot-answer {
  margin-bottom: 8px;
}
/* Bot avatar in full-screen messages */
.chat-fs-messages .chat-bubble.bot .bot-avatar-inline {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.15));
}
/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 20px;
}
.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ===== MAIN ===== */
#main-content {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 60vh;
}
.view { display: none; animation: viewFadeIn 0.3s ease; }
.view.active { display: block; }
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #e8f2ff 40%, #d4e4fa 100%);
  color: var(--mta-navy);
  padding: 60px 20px 80px;
  text-align: center;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  margin-bottom: 40px;
  box-shadow: 0 8px 40px rgba(53,78,162,0.08);
}
/* Decorative gradient orbs */
.hero::before {
  content: '';
  position: absolute;
  top: -100px; left: -50px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,215,0,0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -50px; right: -30px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(49,27,146,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='xMidYMax meet'%3E%3Cpath d='M0 120 L0 80 L40 80 L40 50 L50 50 L50 80 L80 80 L80 40 L90 40 L90 80 L120 80 L120 55 L140 55 L140 80 L180 80 L180 30 L190 30 L190 15 L200 15 L200 30 L210 30 L210 80 L250 80 L250 50 L270 50 L270 80 L310 80 L310 35 L320 35 L320 20 L330 20 L330 35 L340 35 L340 80 L380 80 L380 60 L400 60 L400 80 L440 80 L440 45 L460 45 L460 80 L500 80 L500 55 L520 55 L520 80 L560 80 L560 25 L570 25 L570 10 L580 10 L580 25 L590 25 L590 80 L630 80 L630 50 L650 50 L650 80 L690 80 L690 40 L710 40 L710 80 L750 80 L750 55 L770 55 L770 80 L810 80 L810 35 L820 35 L820 20 L830 20 L830 35 L840 35 L840 80 L880 80 L880 60 L900 60 L900 80 L940 80 L940 45 L960 45 L960 80 L1000 80 L1000 30 L1010 30 L1010 15 L1020 15 L1020 30 L1030 30 L1030 80 L1070 80 L1070 50 L1090 50 L1090 80 L1130 80 L1130 40 L1150 40 L1150 80 L1200 80 L1200 120 Z' fill='%23354EA2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  pointer-events: none;
}
.hero-mascot {
  position: absolute;
  top: 5%;
  right: -20px;
  width: auto;
  height: 300px;
  max-width: 40%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 8px 24px rgba(53,78,162,0.2));
}
.hero-mascot-left {
  position: absolute;
  top: 5%;
  left: 36px;
  width: auto;
  height: 257px;
  max-width: 40%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 8px 24px rgba(53,78,162,0.2));
}
/* Gentle floating animation */
.hero-mascot-float {
  animation: heroFloat 4s ease-in-out infinite;
}
.hero-mascot-float-wira {
  animation: heroFloatWira 4s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
@keyframes heroFloatWira {
  0%, 100% { transform: translateX(0) translateY(0) rotate(15deg); }
  50% { transform: translateX(5px) translateY(-16px) rotate(22deg); }
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}
.hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #354EA2 0%, #4A68C0 50%, #2A4288 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  line-height: 1.3;
  letter-spacing: -1px;
}
.hero-brand {
  background: linear-gradient(135deg, #FFD700 0%, #FF9500 50%, #CC0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2.8rem;
  font-weight: 800;
  display: inline-block;
  margin-top: 4px;
  letter-spacing: -1px;
}
.hero p {
  font-size: 1.15rem;
  color: #555;
  margin-bottom: 24px;
  line-height: 1.7;
}
.hero-download-badges {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 28px;
}
.download-badge {
  height: 55px;
  width: auto;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 12px rgba(53,78,162,0.15));
  border-radius: 12px;
}
.download-badge:hover {
  transform: scale(1.08) translateY(-2px);
  filter: drop-shadow(0 8px 20px rgba(53,78,162,0.25));
}
.hero-search {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  gap: 8px;
}
.hero-search input {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid var(--border-color);
  border-radius: 28px;
  font-size: 15px;
  font-family: var(--font);
  background: #fff;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.hero-search input:focus {
  border-color: var(--mta-blue);
  box-shadow: 0 0 0 4px rgba(30,74,140,0.1);
}
.hero-search button {
  padding: 14px 28px;
  background: var(--mta-navy);
  color: #fff;
  border: none;
  border-radius: 28px;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
}
.hero-search button:hover {
  background: var(--mta-blue);
  transform: translateY(-1px);
}

/* ===== SECTION WRAP ===== */
.section-wrap {
  padding: 0 20px 48px;
}
.section-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text-primary);
}

/* ===== CATEGORY GRID ===== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.category-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 24px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(53,78,162,0.06);
  border: 1px solid rgba(255,255,255,0.6);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
/* Gradient sheen on hover */
.category-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.1), transparent);
  transition: left 0.5s ease;
}
.category-card:hover::before {
  left: 100%;
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(53,78,162,0.15);
  border-color: rgba(255,215,0,0.4);
}
.category-card .cat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}
.category-card:hover .cat-icon {
  transform: scale(1.1) rotate(-5deg);
}
.category-card .cat-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.category-card .cat-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  flex: 1;
}
.category-card .cat-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ===== ACCORDION (Q&A) ===== */
.qa-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.accordion-item {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226,229,238,0.6);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 1px 6px rgba(53,78,162,0.04);
}
.accordion-item:hover {
  box-shadow: 0 4px 20px rgba(53,78,162,0.1);
  border-color: rgba(255,215,0,0.3);
}
.accordion-header {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  user-select: none;
  transition: background 0.2s ease;
}
.accordion-header:hover { background: var(--bg-primary); }
.accordion-header .chevron {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.accordion-item.open .chevron { transform: rotate(180deg); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-item.open .accordion-body { max-height: 1000px; }
.accordion-body-inner {
  padding: 0 20px 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-line;
}
.accordion-body-inner .qa-category-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* ===== POPULAR ARTICLES ===== */
.popular-articles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ===== BREADCRUMB / BACK BTN ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.breadcrumb a { font-weight: 600; }
.crumb-sep { opacity: 0.5; }
.back-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-family: var(--font);
  cursor: pointer;
  color: var(--text-primary);
  margin-bottom: 20px;
  transition: all 0.2s ease;
}
.back-btn:hover { box-shadow: var(--shadow-sm); }

/* ===== CATEGORY HEADER ===== */
.category-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
}
.category-header .cat-icon-lg {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.category-header .cat-info h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.category-header .cat-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ===== SEARCH RESULTS ===== */
.search-query-display {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.no-results .no-results-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* ===== FOOTER ===== */
#footer {
  background: linear-gradient(135deg, #2A4288 0%, #354EA2 50%, #4A68C0 100%);
  color: #fff;
  margin-top: 40px;
  box-shadow: 0 -4px 24px rgba(53,78,162,0.15);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 0;
}
/* QR Code Section */
.footer-qr-section {
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-qr-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.footer-qr-subtitle {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 24px;
}
.qr-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}
.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.12);
  transition: all 0.25s ease;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
.qr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.1);
}
.qr-card.whatsapp { border-color: rgba(37,211,102,0.4); }
.qr-card.whatsapp:hover { border-color: #25D366; box-shadow: 0 8px 24px rgba(37,211,102,0.3); }
.qr-card.telegram { border-color: rgba(0,136,204,0.4); }
.qr-card.telegram:hover { border-color: #0088cc; box-shadow: 0 8px 24px rgba(0,136,204,0.3); }
.qr-card.wechat { border-color: rgba(7,193,96,0.4); }
.qr-card.wechat:hover { border-color: #07C160; box-shadow: 0 8px 24px rgba(7,193,96,0.3); }
.qr-card.email { border-color: rgba(231,76,60,0.4); }
.qr-card.email:hover { border-color: var(--mta-red); box-shadow: 0 8px 24px rgba(231,76,60,0.3); }
.qr-code-wrap {
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
}
.qr-code-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.qr-placeholder {
  font-size: 48px;
}
.qr-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.qr-card-icon { font-size: 1.4rem; }
.qr-card-name { font-weight: 700; font-size: 0.95rem; }
.qr-card-detail { font-size: 0.75rem; opacity: 0.7; text-align: center; word-break: break-all; }
/* WeChat toast */
.wechat-toast {
  margin-top: 16px;
  padding: 10px 20px;
  background: rgba(7,193,96,0.15);
  border: 1px solid rgba(7,193,96,0.4);
  border-radius: 8px;
  font-size: 0.85rem;
  display: inline-block;
}
/* Extra contacts */
.footer-extra-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 20px 0;
  font-size: 0.85rem;
  opacity: 0.85;
}
.footer-extra-contacts a { color: var(--mta-gold); }
.footer-extra-contacts strong { color: #fff; }
.footer-bottom {
  padding: 16px 0;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* ===== SCROLLBAR ===== */
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

/* ===== INFOGRAPHICS IN ARTICLES ===== */
.qa-infographics {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
}
.qa-infographics-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mta-navy);
  margin-bottom: 8px;
}
.qa-infographics-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.qa-infographic-item {
  display: flex;
  flex-direction: column;
  width: 120px;
}
.qa-infographic-img {
  width: 120px;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
.qa-infographic-img:hover {
  transform: scale(1.05);
  border-color: var(--mta-gold);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.qa-infographic-caption {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}
.qa-step-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mta-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.qa-step-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mta-navy);
  margin-top: 2px;
}
.qa-step-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

/* ===== INFOGRAPHICS IN CHAT ===== */
.chat-infographics {
  margin-top: 10px;
  padding-top: 8px;
}
.chat-infographics-label {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.8;
}
.chat-infographics-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.chat-infographic-item {
  display: flex;
  flex-direction: column;
  width: 140px;
}
.chat-infographic-img {
  width: 140px;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-infographic-img:hover {
  transform: scale(1.08);
  border-color: var(--mta-gold);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.chat-infographic-caption {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}
.chat-step-num {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--mta-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chat-step-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mta-navy);
  margin-top: 2px;
}
.chat-step-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}
/* "View Full Guide" button shown in chat when infographics are present */
.chat-guide-link {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mta-navy);
  background: rgba(53,78,162,0.08);
  border: 1px solid rgba(53,78,162,0.2);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.chat-guide-link:hover {
  background: rgba(53,78,162,0.15);
  border-color: var(--mta-navy);
  transform: translateY(-1px);
}

/* ===== INFOGRAPHIC LIGHTBOX ===== */
.infographic-lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10001;
}
.infographic-lightbox.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
}
.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.lightbox-close {
  position: absolute;
  top: -44px; right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,0.4); transform: rotate(90deg); }

/* ===== WALKTHROUGH ===== */
.walkthrough-intro {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  max-width: 700px;
}
/* Guides Menu */
.guides-menu {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
}
.guide-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: -2px;
  position: relative;
}
.guide-tab:hover {
  color: var(--mta-navy);
  transform: translateY(-1px);
}
.guide-tab.active {
  color: var(--mta-navy);
  border-bottom-color: var(--mta-navy);
  font-weight: 700;
}
.guide-tab.active::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 20%; right: 20%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--mta-gold), transparent);
  border-radius: 2px;
}
.guide-tab-icon {
  font-size: 20px;
}
.walkthrough-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.walkthrough-card {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  box-shadow: 0 2px 12px rgba(53,78,162,0.06);
}
.walkthrough-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 36px rgba(53,78,162,0.18);
  border-color: rgba(255,215,0,0.5);
}
.walkthrough-step-badge {
  position: absolute;
  background: linear-gradient(135deg, var(--mta-navy) 0%, #2A4288 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 0 0 10px 0;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.walkthrough-img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s;
}
.walkthrough-img:hover { opacity: 0.9; }
.walkthrough-info {
  padding: 14px;
}
.walkthrough-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.walkthrough-info p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .popular-articles { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.5rem; }
  .hero-brand { font-size: 1.7rem; }
  .hero p { font-size: 1rem; }
  .hero-mascot { height: 160px; right: -10px; opacity: 0.6; max-width: 35%; }
  .hero-mascot-left { height: 137px; left: 15px; opacity: 0.6; max-width: 35%; }
  .hero-download-badges { gap: 10px; }
  .download-badge { height: 45px; }
  .hero-search { flex-direction: column; }
  .hero-search button { padding: 12px; }
  .footer-top { flex-direction: column; gap: 24px; }
  .qr-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .qr-code-wrap { width: 100px; height: 100px; }
  .brand-title { font-size: 14px; }
  .brand-logo { height: 34px; }
  .brand-logo-wrap { padding: 3px 8px; }
  /* Chat bar mobile */
  .chat-banner-title { font-size: 17px; }
  .chat-banner-subtitle { font-size: 11px; }
  .chat-mascot-img { width: 44px; max-height: 50px; }
  .chat-fs-mascot { width: 40px; height: 40px; }
  #chat-input { font-size: 14px; padding: 12px 14px; }
  #chat-input::placeholder { font-size: 13px; }
  #chat-send { height: 46px; min-width: 46px; padding: 0 14px; }
  .send-text { display: none; }
  .send-icon { font-size: 18px; }
  /* Suggestion chips: horizontal scroll on mobile */
  .chat-suggestions {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .chat-suggestions::-webkit-scrollbar { display: none; }
  .chat-suggestion-chip { flex-shrink: 0; font-size: 12px; padding: 7px 12px; }
  :root { --chat-h: 175px; }
}
@media (max-width: 480px) {
  .category-grid { grid-template-columns: 1fr; }
  .nav-tabs { gap: 2px; }
  .nav-tab { padding: 6px 12px; font-size: 12px; }
  .header-inner { padding: 0 10px; gap: 6px; }
  .chat-bar-container { padding: 8px 10px 6px; }
  .section-wrap { padding: 0 12px 36px; }
  .hero { padding: 30px 12px 50px; }
  .hero h1 { font-size: 1.25rem; }
  .hero-brand { font-size: 1.4rem; }
  .hero p { font-size: 0.9rem; }
  /* Chat bar small mobile */
  .chat-banner { gap: 6px; margin-bottom: 6px; }
  .chat-banner-title { font-size: 15px; }
  .chat-banner-subtitle { display: none; }
  .chat-mascot-img { width: 36px; max-height: 42px; }
  #chat-input { font-size: 13px; padding: 10px 12px; }
  #chat-input::placeholder { font-size: 12px; }
  #chat-send { height: 42px; min-width: 42px; padding: 0 12px; }
  .send-icon { font-size: 16px; }
  .chat-suggestion-chip { font-size: 11px; padding: 6px 10px; }
  .hero-mascot { height: 120px; right: -5px; opacity: 0.5; max-width: 30%; }
  .hero-mascot-left { height: 103px; left: 10px; opacity: 0.5; max-width: 30%; }
  .hero-download-badges { gap: 8px; }
  .download-badge { height: 40px; }
  .qr-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .qr-code-wrap { width: 80px; height: 80px; }
  .qr-card { padding: 12px 8px; }
  .qr-card-name { font-size: 0.85rem; }
  .qr-card-detail { font-size: 0.7rem; }
  .footer-extra-contacts { flex-direction: column; gap: 8px; text-align: center; }
  .guides-menu { gap: 4px; }
  .guide-tab { padding: 10px 12px; font-size: 13px; }
  :root { --chat-h: 155px; }
}