/* ==================== DESIGN SYSTEM ==================== */
        :root {
            /* Colors */
            --primary-dark: #2F5D3A;
            --primary-green: #4CAF50;
            --secondary-brown: #8B6B4A;
            --bg-cream: #F5F1E8;
            --bg-white: #FFFFFF;
            
            /* Text Colors */
            --text-primary: #2C2C2C;
            --text-secondary: #666666;

            /* Effects */
            --shadow-card: 0 4px 12px rgba(0,0,0,0.08);
            --radius-btn: 10px;
            --radius-card: 16px;
        }
		ul { padding:0; margin:0;}
		ul li { padding: 0; margin: 0; list-style: none;}

        body {
            font-family: 'Prompt', sans-serif;
            background-color: var(--bg-cream);
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 400;
		    background-image: url('/public/img/bg')
        }

        /* Typography */
        h1, .h1 { font-size: 36px; font-weight: 700; color: var(--text-primary); }
        h2, .h2 { font-size: 28px; font-weight: 600; color: var(--text-primary); }
        h3, .h3 { font-size: 22px; font-weight: 500; color: var(--text-primary); }
		.font-25 { font-size:25px; }
		.font-35 { font-size:35px; }
		.font-50 { font-size:  50px;}
		.font-primary-dark {  color: var(--primary-dark); }
		.font-primary-green {  color: var(--primary-green); }

        p { font-size: 17px; font-weight: 400; color: var(--text-secondary); line-height: 1.6; }
        .caption { font-size: 15px; font-weight: 400; color: var(--text-secondary); }
			.text-brown {
				color : var(--secondary-brown);
			}
		.header {
			width:100%;
			height: auto;
 			            box-shadow: 0 2px 10px rgba(0,0,0,0.05);

		}
        /* ==================== LAYOUT GRID ==================== */
        /* Mobile First (Margin 16px, Gutter 12px) */
        .custom-layout {
            padding-left: 16px;
            padding-right: 16px;
            width: 100%;
        }
        .custom-row {
            --bs-gutter-x: 12px;
            --bs-gutter-y: 12px;
        }

        /* Desktop (Margin 80px, Gutter 24px) */
        @media (min-width: 992px) {
            .custom-layout {
              /*  padding-left: 0px;
                padding-right: 80px; */
            }
            .custom-row {
                --bs-gutter-x: 24px;
                --bs-gutter-y: 24px;
            }
        }

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1200px;
}


        /* ==================== COMPONENTS ==================== */
a.btn-custom { text-decoration: none;}
		.btn-custom {
        	    background-color: var(--primary-dark);
            color: white;
            border-radius: var(--radius-btn);
            padding: 10px 24px;
            font-weight: 500;
            border: none;
            transition: 0.3s;
			font-size: 20px;
			
        }
        .btn-custom:hover {
            background-color: var(--primary-green);
            color: white;
        }

        .card-custom {
            background-color: var(--bg-white);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-card);
            border: none;
            
            height: 100%;
        }
		.card-content {
			padding: 15px 15px;
			padding-bottom:0px;
			 height: 150px;
			overflow-y: hidden;
		}
		.card-meta {
			padding: 0px 15px;
			padding-bottom:15px;
 		}
		.card-thumbnail {
			height: 250px;
			width:100%;
			background-size: cover;
			background-position: center center;
			margin-bottom: 5px;
		}
        /* ==================== HEADER ==================== */
        .navbar-custom {
             padding: 15px 0;
            width: 100%;
        }


        .navbar-brand { font-weight: 700; font-size: 26px; color: var(--primary-dark) !important; }
        .nav-link { font-size: 23px; color: var(--primary-dark) !important; font-weight: 500; margin-left: 15px; }
        .nav-link:hover { color: var(--primary-green) !important; }
	
        /* ==================== HERO SECTION (SLIDE) ==================== */
        .hero-section {
            position: relative;
            height: 45vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
		.hero-title { font-size: 51px; font-weight: 600; } 
        
        .bg-slide-container {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0;
        }
        
        .bg-slide {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.5s ease-in-out; /* ทำภาพเปลี่ยนแบบ Smooth */
        }
        
        .bg-slide.active { opacity: 1; }

        .hero-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.1); /* ดรอปสีภาพเพื่อให้ตัวหนังสือชัดเจน */
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: left;
            color: var(--primary-dark);
        }
        .hero-content h1 { color: var(--primary-dark); text-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        .hero-content p { color: var(--primary-dark); font-size: 31px; font-weight: 500; }

        /* ==================== BOTTOM & FOOTER ==================== */
        .bottom-section {
            background-color: #1A1A1A; /* พื้นหลังโทนสีดำ */
            color: #FFFFFF;
            padding: 60px 0;
        }
        .bottom-section p, .bottom-section h3 { color: #FFFFFF; }
        .bottom-section .text-secondary-custom { color: #A0A0A0; }

        .footer {
            background-color: #0D0D0D; /* ดำเข้มสุด */
            color: #888888;
            padding: 20px 0;
            text-align: center;
            font-size: 15px;
        }
     
		.nav-active { 
			
			text-decoration: underline;   
			text-decoration-color: var(--primary-green);          /* กำหนดสีเส้นใต้เป็นสีแดง */
		 }

.nav-active a { 
			color: var(--primary-green) !important;
  		 }
		

.bg-network {
	height: 600px;
}

.text-small { font-size: 25px;  font-weight: 400;}



/* network Supplier */
 
.circle-thumbnail { 
	border-radius: 50%;
	width:70%;
	height: 80%;
 }

.circle-title {
	font-size: 35px;
	font-weight: 500;
	 
}


.circle-description {
	font-size: 25px;
}



/* contact */
.contact-icon { 
	font-size: 70px;
	margin-top:15px;
	color: var(--primary-dark);
}