@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;700&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@400;500;700&display=swap');

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Noto Sans Thai', sans-serif; 
            background-color: #f0f2f5;
            padding: 18px;
            display: flex;
            justify-content: center;
        }
		a:link {
			text-decoration: none;
  			color: #FFFFFF;
		}
		a:visited {
  			text-decoration: none;
  			color: #FFFFFF;
		}
 		/* กำหนดสไตล์ให้กล่องข้อความจำลองเป็นตาราง */
        .table-container {
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            border: 1px solid #ccc;
        }

        /* กำหนดให้แต่ละแถวเรียงตัวแบบ Flex */
        .table-row {
            display: flex;
            border-bottom: 1px solid #eee;
        }

        /* เอาเส้นคั่นแถวตัวสุดท้ายออก */
        .table-row:last-child {
            border-bottom: none;
        }

        /* กำหนดสไตล์ให้หัวข้อตาราง */
        .table-header {
            background-color: #f4f4f4;
            font-weight: bold;
        }

        /* กำหนดให้แต่ละคอลัมน์แบ่งพื้นที่เท่าๆ กัน (50%) */
        .table-cell {
            flex: 1;
            padding: 3px;
            border-right: 1px solid #eee;
        }

        /* เอาเส้นคั่นคอลัมน์ตัวสุดท้ายออก */
        .table-cell:last-child {
            border-right: none;
        }

        .infographic-card {
            width: 100%;
            max-width: 900px;
            background-color: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            padding-bottom: 20px;
        }

        /* --- Header Section --- */
        .header-section {
            display: flex;
            background-color: #ffffff;
            border-bottom: 6px solid #22388C;
        }

        .route-number {
            background-color: #FFFFFF;
            color: #ffffff;
            padding: 5px;
            text-align: center;
            min-width: 110px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .route-number h1 {
            font-size: 46px;
            font-weight: 700;
            line-height: 1;
        }

        .route-number p {
            font-size: 13px;
            margin-top: 3px;
            font-weight: 500;
        }

        .route-title {
            padding: 1px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .route-title .main-station {
            font-size: 16px;
            font-weight: 600;
            color: #111;
            line-height: 1.2;
        }

        .route-title .sub-station {
            font-size: 13px;
            color: #555;
            margin-bottom: 6px;
            font-weight: 500;
        }

        /* --- Meta Info Table --- */
        .meta-container {
            padding: 12px 12px;
        }

        .meta-row {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .meta-label {
            background-color: #22388C;
            color: white;
            padding: 1px 1px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            width: 80px;
            text-align: center;
            margin-right: 14px;
            flex-shrink: 0;
        }

        .meta-value {
            font-size: 14px;
            font-weight: 700;
            color: #222;
            line-height: 1.2;
        }

        .meta-value span {
            display: block;
            font-size: 11px;
            color: #555;
            font-weight: 400;
        }

        /* --- Banner แถบสีน้ำเงินบอกทิศทาง --- */
        .path-banner {
            background-color: #22388C;
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            margin: 15px 15px 5px 15px;
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 700;
        }

        .path-badge {
            background-color: white;
            color: #22388C;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-weight: 700;
            font-size: 14px;
        }

        /* --- เส้นแนวตั้งของหมุดสถานี --- */
        .timeline-container {
            position: relative;
            padding-left: 49px;
            margin: 18px 18px;
        }

        .timeline-container::before {
            content: '';
            position: absolute;
            left: 21px;
            top: 15px;
            bottom: 15px;
            width: 5px;
            background-color: #22388C;
        }

        .stop-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            position: relative;
        }

        .stop-dot {
            width: 16px;
            height: 16px;
            background-color: white;
            border: 4px solid #22388C;
            border-radius: 50%;
            position: absolute;
            left: -33px;
            z-index: 2;
        }

        /* หมุดขนาดใหญ่สำหรับสถานีแรกและสถานีสุดท้าย */
        .stop-item.terminal-stop .stop-dot {
            width: 22px;
            height: 22px;
            border-width: 6px;
            left: -37px;
        }

        .stop-text {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }

        .stop-th {
            font-size: 14px;
            font-weight: 700;
            color: #111;
        }

        .stop-en {
            font-size: 11px;
            color: #666;
            font-weight: 500;
        }

        /* --- ส่วนเชื่อมต่อระบบขนส่ง --- */
        .connections-section {
            background-color: #22388C;
            color: white;
            padding: 15px;
            margin-top: 20px;
        }

        .connections-header {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .connections-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }

        .conn-item {
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
            color: white;
        }

        .conn-item span {
            display: block;
            font-size: 10px;
            font-weight: 400;
            opacity: 0.85;
        }

	     /* CSS for Railway Connect  */
        .railway-section {
			background-image: url("../image/bg_railway-connect.webp");
			background-size: contain;
 			background-repeat: repeat;
            background-color: #360202;
            color: white;
            padding: 10px 15px;
            font-size: 14px;
            font-weight: 700;
            margin-top: 15px;
        }
        .railway-section span {
            display: block;
            font-size: 11px;
            font-weight: 400;
            opacity: 0.9;
        }
		/* CSS for BRT Connect  */
        .brt-section {
			background-image: url("../image/bg_brt-connect.webp");
			background-size: contain;
 			background-repeat: repeat;
            background-color: #093900;
            color: white;
            padding: 10px 15px;
            font-size: 14px;
            font-weight: 700;
            margin-top: 15px;
        }
        .brt-section span {
            display: block;
            font-size: 11px;
            font-weight: 400;
            opacity: 0.9;
        }
		/* CSS for Bus Terminal Connect  */
        .busterminal-section {
			background-image: url("../image/bg_busterminal-connect.webp");
			background-size: contain;
 			background-repeat: repeat;
            background-color: #FF3F00;
            color: white;
            padding: 10px 15px;
            font-size: 14px;
            font-weight: 700;
            margin-top: 15px;
        }
        .busterminal-section span {
            display: block;
            font-size: 11px;
            font-weight: 400;
            opacity: 0.9;
        }
		/* CSS for Pier Connect  */
        .pier-section {
			background-image: url("../image/bg_pier-connect.webp");
			background-size: contain;
 			background-repeat: repeat;
            background-color: #087648;
            color: white;
            padding: 10px 15px;
            font-size: 14px;
            font-weight: 700;
            margin-top: 15px;
        }
        .pier-section span {
            display: block;
            font-size: 11px;
            font-weight: 400;
            opacity: 0.9;
        }
		/* CSS for Airport Connect  */
        .airport-section {
			background-image: url("../image/bg_airport-connect.webp");
			background-size: contain;
 			background-repeat: repeat;
            background-color: #FF00E5;
            color: white;
            padding: 10px 15px;
            font-size: 14px;
            font-weight: 700;
            margin-top: 15px;
        }
        .airport-section span {
            display: block;
            font-size: 11px;
            font-weight: 400;
            opacity: 0.9;
        }
        /* ส่วนของสถานที่จัดงานอีเวนท์ */
        .event-section {
			background-image: url("../image/bg_location-connect.webp");
			background-size: contain;
 			background-repeat: repeat;
            background-color: #22388C;
            color: white;
            padding: 10px 15px;
            font-size: 14px;
            font-weight: 700;
            margin-top: 15px;
        }
        .event-section span {
            display: block;
            font-size: 11px;
            font-weight: 400;
            opacity: 0.9;
        }

        .event-list {
            padding-left: 55px;
            margin-top: 15px;
        }