/* General */
body {
	font-family: "Kanit", sans-serif;
	font-family: 'sukhumvit', tahoma, sans-serif;
/*	font-family: "Athiti", sans-serif;*/
    background-color: #ffffff;
	color : #004a99;
	font-size: 16px;
}

@font-face {
  font-family: 'sukhumvit'; /* ตั้งชื่อที่คุณจะใช้เรียกใน CSS */
  src: url('fonts/sukhumvit-set-semi-bold.ttf') format('truetype'); /* เส้นทางไปยังไฟล์ .ttf */
  font-weight: normal; /* หรือ 400 */
  font-style: normal;
  font-display: swap;
}

/* ================= NAVBAR FONT SIZE ================= */
.navbar.custom-navbar-bg .navbar-nav .nav-link {
    font-size: 18px;   /* ลอง 14px / 15px / 16px */
}

/* Desktop */
@media (min-width: 992px) {
    .navbar.custom-navbar-bg .navbar-nav .nav-link {
        font-size: 15px;
    }
}

/* Mobile */
@media (max-width: 991.98px) {
    .navbar.custom-navbar-bg .navbar-nav .nav-link {
        font-size: 14px;
    }
}


/* <br> */
.mb-section {
  margin-bottom: 1.5rem; /* หรือค่าอื่นๆ ที่ต้องการ เช่น 20px, 2em */
}



/* --- Top Bar Styling --- */


/* --- Top Bar Styling --- */
.topbar {
  background-color: #f8f9fa;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e9ecef;
  font-size: 0.9rem;
  color: #495057;

  /* === เพิ่ม 2 บรรทัดนี้ === */

  position: relative; /* หรือ sticky ถ้าต้องการให้ topbar ติดด้านบนด้วย */
  z-index: 1030;     /* << กำหนดค่า z-index ให้สูงกว่า navbar */
                     /* ค่า default ของ sticky-top ใน BS5 คือ 1020 */
                     /* ใส่ 1030 หรือสูงกว่าเพื่อให้ topbar อยู่เหนือ */
}

/* --- (Optional but recommended) Ensure Navbar z-index is defined --- */
.navbar.sticky-top {
    z-index: 1020; /* Bootstrap default, good to keep track */
}

/* --- Dropdown Menu z-index (Bootstrap default is usually 1000) --- */
.dropdown-menu {
   /* z-index: 1000; */ /* ไม่จำเป็นต้องเปลี่ยน ถ้า topbar สูงกว่า */
}

/* เพิ่มโค้ดนี้ลงในไฟล์ style.css ของคุณ */
.blue-info-box {
  background-color: #1e88e5;
  border-radius: 5px;
  /* คุณอาจจะย้าย padding (p-5) และ text-color (text-white) มาไว้ที่นี่ด้วยก็ได้
     ถ้าต้องการให้ class นี้ควบคุมสไตล์เหล่านี้ทั้งหมด
     แต่การใช้ Bootstrap utility classes ก็สะดวกดีอยู่แล้ว */
  /* padding: 2.5rem;  <-- ถ้าจะย้าย p-5 มา */
  /* color: white;    <-- ถ้าจะย้าย text-white มา */
}




/* Social Icons Section */
.topbar-social {
  display: flex;
  align-items: center;
}
.topbar-social-item {
  color: #6c757d; /* Gray icon color */
  margin-right: 1rem;
  font-size: 1rem;
  transition: color 0.2s ease-in-out;
}
.topbar-social-item:last-child {
  margin-right: 0;
}
.topbar-social-item:hover {
  color: #007bff; /* Example blue hover, adjust per icon if needed */
}

/* หรือถ้าคุณใช้คลาส topbar-phone แยก */
.topbar-social-item.topbar-phone {
    color: #6c757d;
	font-size: 0.9rem;
    text-decoration: none !important; /* <<< ใช้ none และ !important ถ้าจำเป็น */
}
.topbar-social-item.topbar-phone:hover {
    color: #007bff;
    text-decoration: none !important; /* <<< none ตอน hover ด้วย */
}
.topbar-social a {
    text-decoration: none !important;
}

/* Central Text Section */
.topbar-child1 {
  flex-grow: 1; /* Allows text to take available space */
  text-align: center;
  padding: 0 1rem; /* Space around the text */
  color: #343a40; /* Slightly darker text */
  font-weight: 500;
}

/* Right Section (Email & Language) */
.topbar-child2 {
  display: flex;
  align-items: center;
}

/* Email Section */
.topbar-email {
    margin-right: 1.5rem; /* Space before language dropdown */
}
.topbar-email a {
  color: inherit; /* Inherit text color from parent */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.topbar-email a:hover {
  color: #0056b3; /* Darker blue on hover */
}
.topbar-email i.fas.fa-envelope {
  margin-right: 0.5rem;
  font-size: 1rem;
}

/* Language Dropdown Section */
.topbar-language .btn-group .btn {
  padding: 0.25rem 0.5rem;
  border: none;
  background-color: transparent !important;
  box-shadow: none !important;
}
.topbar-language .btn-group .btn:focus {
   outline: none;
   box-shadow: none;
}
.topbar-language .btn img {
  height: 18px;
  vertical-align: middle;
}
.topbar-language .dropdown-menu {
  min-width: auto;
  padding: 0.5rem 0;
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.topbar-language .dropdown-item {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.topbar-language .dropdown-item img {
  height: 16px;
  margin-right: 0.6rem;
}
.topbar-language .dropdown-item:active {
    background-color: #007bff;
    color: #fff !important;
}
.topbar-language .dropdown-item:hover {
    background-color: #e9ecef;
}
/* Handling inline style for disabled look */
.topbar-language .dropdown-item[style*="color:#B0BEC5"] {
    color: #B0BEC5 !important;
}
.topbar-language .dropdown-item[style*="color:#B0BEC5"]:hover {
    color: #8096a0 !important;
    background-color: #e9ecef;
}
.topbar-language .dropdown-item[style*="color:#B0BEC5"]:active {
    color: #fff !important;
}


/* --- Custom Navbar Styles --- */
.navbar.custom-navbar-bg {
	background-color: #1e88e5 !important;
/*    background-color: #34398A !important; /* Default: Blue background */
/*	opacity: 0.8;*/
		
    transition: background-color 0.3s ease;
    position: relative; /* Needed for absolute positioning inside */
    /* sticky-top class handles the sticky behavior */
}
.navbar > .container-fluid {
    position: relative; /* Context for absolute brand/toggler on small screens */
}




/* Default Nav Link Styles (Dark context) */
/* These provide base styles, they will be overridden by media queries */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    margin: 0.25rem 0; /* Vertical margin for stacked links */
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    background-color: #DF0024 !important; /* RED background */
     color: #ffffff !important;
}
/* Base active style for non-home links (transparent bg) */
.navbar-dark .navbar-nav .nav-link.active:not(.btn-home-custom) {
    background-color: #DF0024 !important;
    color: #ffffff !important;
    font-weight: bold;
}
/* Base active style for home button (white bg, blue text) */
.btn-home-custom.active {
    background-color: #DF0024 !important; /* RED background */
    color: #ffffff !important;
    font-weight: bold;
    padding: 0.5rem 1rem;
     border-radius: 0.375rem;
     transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Added transition */
}
/* Base hover for active home button (adjust if needed) */
.btn-home-custom.active:hover {
     background-color: #DF0024 !important; /* RED background */
     color: #ffffff !important;
}
/* Active link with red background */
.navbar-dark .navbar-nav .nav-link.active {
    background-color: #DF0024 !important;
    color: #ffffff !important;
    font-weight: bold;
}

/* Default Toggler Styles (Dark context) */
.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.map-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;   /* ไม่ให้มุมโค้ง */
}

@media (min-width: 768px) {
    .map-box {
        width: 60%;
        margin-left: auto; /* ชิดขวาเฉพาะจอ md+ */
    }
}

/* === Styles for LARGE screens (>= 992px) === */
@media (min-width: 992px) {

.navbar.custom-navbar-bg {
    /* Split background: 33.33% White Left, remaining Blue Right */
    background:
        linear-gradient(white, white) left top / 35.7% 100% no-repeat, /* White block (width height) */
        #004a99; /* Blue base */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Reset small screen layout elements */
.navbar > .container-fluid { flex-wrap: nowrap; }
 .navbar-brand {
    position: static; transform: none; width: auto; text-align: left;
    margin: 0 auto 0 0 !important; padding: 0.3125rem 0 !important;
    background-color: transparent !important; border-radius: 0; box-shadow: none; z-index: auto;
}
.navbar-toggler { display: none; }
 .navbar-collapse {
     position: static; width: auto; margin-top: 0; padding: 0; background-color: transparent;
     border-radius: 0; box-shadow: none; z-index: auto; visibility: visible !important;
     display: flex !important; flex-basis: auto; justify-content: flex-end;
 }
 .navbar-nav { flex-direction: row; }

/* Adjust text/link colors for split background */
/* Logo on white */
.navbar.custom-navbar-bg .navbar-brand,
.navbar.custom-navbar-bg .navbar-brand span { color: #343a40 !important; } /* Dark text on white */
 .navbar.custom-navbar-bg .navbar-brand:hover,
 .navbar.custom-navbar-bg .navbar-brand:focus { color: #000 !important; } /* Black text on hover/focus */

/* --- Nav links on blue --- */
 /* Default State */
 .navbar.custom-navbar-bg .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8); /* Light text */
    margin: 0 0.25rem; /* Horizontal margin */
    padding: 0.5rem 1rem;
    background-color: transparent; /* Base transparent background */
    border-radius: 0.375rem;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
 /* Hover/Focus State (Non-Active) */
  .navbar.custom-navbar-bg .navbar-nav .nav-link:not(.active):hover,
  .navbar.custom-navbar-bg .navbar-nav .nav-link:not(.active):focus {
    color: #ffffff; /* White text */
    background-color: rgba(217, 35, 45, 0.15); /* Subtle Reddish hover bg */
}

 /* === ACTIVE State: RED Background === */
 /* Active Other Links (including hover/focus) */
   .navbar.custom-navbar-bg .navbar-nav .nav-link.active:not(.btn-home-custom),
   .navbar.custom-navbar-bg .navbar-nav .nav-link.active:not(.btn-home-custom):hover,
   .navbar.custom-navbar-bg .navbar-nav .nav-link.active:not(.btn-home-custom):focus {
     color: #ffffff !important;       /* White text */
     font-weight: bold;
     background-color: #D9232D !important; /* RED background */
 }

 /* Active Home button (including hover/focus) */
 .navbar.custom-navbar-bg .btn-home-custom.active,
 .navbar.custom-navbar-bg .btn-home-custom.active:hover,
 .navbar.custom-navbar-bg .btn-home-custom.active:focus {
    background-color: #D9232D !important; /* RED background */
	
    color: #ffffff !important;       /* White text */
    font-weight: bold;
    /* Padding and border-radius already set */
}

  /* Toggler style (hidden) */
  .navbar.custom-navbar-bg .navbar-toggler { border-color: rgba(255, 255, 255, 0.2); }
  .navbar.custom-navbar-bg .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
}
/* === Styles for SMALL screens (< 992px) === */
@media (max-width: 991.98px) {
	
     .navbar > .container-fluid {
        position: relative;
        flex-wrap: wrap;
        padding-left: 1rem;
        padding-right: 1rem;
    }
	
	 .topbar {
        /* อาจจะจัดใหม่ เช่น space-between */
        justify-content: space-between;
        padding: 0.5rem 1rem;
    }
    .topbar-child1 { display: none; } /* ซ่อนข้อความกลาง */

	.topbar-email { display: none; } /* ซ่อนข้อความอีเมล */
    .topbar-language {
        /* เอา margin-left: auto ออก */
        margin-left: 0;
        order: 2; /* ให้ Social อยู่ขวา */
    }
    .topbar-child2 {
         /* เอา margin-right: auto ออก */
        margin-right: 0;
        order: 1; /* ให้ Email/Lang อยู่ซ้าย */
    }

     .topbar-email {
        justify-content: center; /* คงระยะห่าง */
     }


    /* --- Navbar Bar Background: WHITE --- */
    .navbar.custom-navbar-bg {
        background: white !important;
        border-bottom: 1px solid #dee2e6;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        min-height: auto;
    }

    /* --- Logo: Dark Text on White Bar --- */
    .navbar.custom-navbar-bg .navbar-brand {
        /* ... (สไตล์ Logo เหมือนเดิม) ... */
        position: static;
        transform: none;
        width: 100%;
        text-align: center;
        margin: 0 0 0.5rem 0 !important;
        padding: 0.5rem 0 !important;
        background-color: transparent !important;
        border-radius: 0;
        box-shadow: none;
        z-index: auto;
        color: #1e88e5 !important;
    }
    .navbar.custom-navbar-bg .navbar-brand span { color: inherit !important; }
    .navbar.custom-navbar-bg .navbar-brand:hover,
    .navbar.custom-navbar-bg .navbar-brand:focus { color: #000 !important; }

    /* --- Toggler: Dark Icon on White Bar --- */
    .navbar.custom-navbar-bg .navbar-toggler {
        /* ... (สไตล์ Toggler เหมือนเดิม) ... */
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        z-index: 2;
        margin-left: 0;
        border-color: rgba(0, 0, 0, 0.1);
        background-color: transparent;
    }
    .navbar.custom-navbar-bg .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* --- Collapsed Menu Background: BLUE --- */
    .navbar.custom-navbar-bg .navbar-collapse {
        /* ... (สไตล์ Collapse Area เหมือนเดิม) ... */
        position: static;
        width: 100%;
        margin-top: 0;
        padding: 0.5rem 0;
        background-color: #1e88e5 !important; /* BLUE background */
        border-radius: 0.375rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: auto;
    }

    /* --- Nav Links inside BLUE Collapse Area --- */
     .navbar.custom-navbar-bg .navbar-nav {
         width: 100%;
         align-items: stretch;
         padding: 0.5rem;
    }
      .navbar.custom-navbar-bg .navbar-nav .nav-item {
        width: 100%;
        margin-bottom: 0.25rem;
    }
       .navbar.custom-navbar-bg .navbar-nav .nav-item:last-child {
        margin-bottom: 0;
    }
       /* Default Link Style (in blue collapse) */
       .navbar.custom-navbar-bg .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.8) !important; /* Light text */
        padding: 0.5rem 1rem;
        text-align: left;
        display: block;
        width: 100%;
        margin: 0;
        border-radius: 0.25rem;
        transition: background-color 0.2s ease, color 0.2s ease;
        background-color: transparent; /* <<< ทำให้แน่ใจว่าไม่มีพื้นหลังอื่น */
    }

       /* === HOVER/FOCUS State: RED Background === */
       .navbar.custom-navbar-bg .navbar-nav .nav-link:hover,
       .navbar.custom-navbar-bg .navbar-nav .nav-link:focus {
        color: #ffffff !important;            /* <<< White text */
        background-color: #D9232D !important; /* <<< RED Background */
    }

       /* === ACTIVE State (Home Button): RED Background === */
       .navbar.custom-navbar-bg .btn-home-custom.active,
       .navbar.custom-navbar-bg .btn-home-custom.active:hover, /* Keep hover red */
       .navbar.custom-navbar-bg .btn-home-custom.active:focus { /* Keep focus red */
        background-color: #D9232D !important; /* <<< RED Background */
        color: #ffffff !important;            /* <<< White text */
        font-weight: bold;
        text-align: left;
    }
       /* (ลบ hover แยกสำหรับ active home button ที่เคยมี) */

       /* === ACTIVE State (Other Links): RED Background === */
       .navbar.custom-navbar-bg .navbar-nav .nav-link.active:not(.btn-home-custom),
       .navbar.custom-navbar-bg .navbar-nav .nav-link.active:not(.btn-home-custom):hover, /* Keep hover red */
       .navbar.custom-navbar-bg .navbar-nav .nav-link.active:not(.btn-home-custom):focus { /* Keep focus red */
          color: #ffffff !important;            /* <<< White text */
          font-weight: bold;
          background-color: #D9232D !important; /* <<< RED Background */
      }
       /* (ลบ background เดิมสำหรับ active other links) */

} /* --- End @media (max-width: 991.98px) --- */


.btn-custom-red {
    background-color: #DF0024;
    color: white;
    border: none;
}
.btn-custom-red:hover {
    background-color: #DF0024; /* เฉดเข้มขึ้นเล็กน้อยตอน hover */
	color: white; /* สำคัญ! เพื่อไม่ให้กลายเป็นสีอื่นตอน hover */
}


/* Hero Section */
.hero-section {
    /* 1. กำหนดสีพื้นหลังหลัก (Layer ล่างสุด) */
/*    background-color: #005A9C;*/
	background-color: #1e88e5;
    /* 2. สร้าง Layer สีขาวทับด้านบน (ใช้ gradient สีเดียวเพื่อสร้างบล็อก) */
    background-image: linear-gradient(#FFFFFF, #FFFFFF); /* สร้างบล็อกสีขาว */

    /* 3. กำหนดขนาดของบล็อกสีขาว (ปรับ % ตามต้องการ) */
    /* เช่น กว้าง 30% ของ container, สูง 50% ของ container */
    background-size: 40% 60%;

    /* 4. กำหนดตำแหน่งของบล็อกสีขาว */
    background-position: top left; /* วางไว้ที่มุมบนซ้าย */

    /* 5. ไม่ต้องให้พื้นหลัง (บล็อกสีขาว) วาดซ้ำ */
    background-repeat: no-repeat;

    /* --- หรือเขียนแบบ Shorthand รวมกัน ---
    background:
        linear-gradient(#FFFFFF, #FFFFFF) top left / 30% 50% no-repeat, /* Layer บน: บล็อกขาว */
        #005A9C; /* Layer ล่าง: พื้นน้ำเงิน */
    */

    /* padding top/bottom ถูกควบคุมด้วย py-* ใน HTML */

    /* (ทางเลือก) เพิ่ม position: relative หากมี content ที่ต้องจัด z-index */
    position: relative;
}

/* --- ส่วนที่เหลือเหมือนเดิม --- */
.hero-placeholder {
    background-color: #E0E0E0;
    border-radius: 30px;
    min-height: 450px;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

    /* (ทางเลือก) ทำให้ content อยู่เหนือ background ที่สร้างขึ้น */
    position: relative;
    z-index: 1;
}
.hero-placeholder-text {
    color: #6c757d; /* สีข้อความในกล่องเทา */
    font-size: 1.75rem;
    font-weight: 500;
    text-align: center;
    padding: 1rem;
}

/* --- Responsive styles for placeholder --- */
@media (max-width: 767.98px) {
    .hero-placeholder {
        min-height: 300px;
    }
    .hero-placeholder-text {
        font-size: 1.5rem;
    }
}
/* About Section */
.about-section {
    position: relative; /* สำหรับจัดการเงา DRAFT */
    overflow: hidden; /* ป้องกันเงาเกินขอบ */
	color: #004a99; /* ตัวอย่าง: สีเทาเข้ม */
}

/* Optional: Watermark/Draft text (like in the image) */
/* .about-section::before {
    content: "DRAFT";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    font-size: 15vw;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.05);
    z-index: 0;
    pointer-events: none;
} */


.image-placeholder-group {
    position: relative;
    min-height: 180px;
}

.img-placeholder {
    background-color: #e9ecef; /* สีเทาอ่อนลงเล็กน้อย */
    color: #adb5bd; /* สีเทาข้อความ */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    position: absolute;
    border: 1px solid #dee2e6; /* เพิ่มขอบบางๆ */
}
.img-placeholder.large {
    width: 230px;
    height: 230px;
    bottom: 0;
    left: 50%;
    transform: translateX(-60%);
    z-index: 1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.img-placeholder.small {
    width: 160px;
    height: 190px;
    bottom: -10px;
    left: 50%;
    transform: translateX(-20%);
    z-index: 2;
     box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* Responsive adjustments for image placeholders */
@media (max-width: 767.98px) {
    .img-placeholder.large {
        width: 180px;
        height: 180px;
         transform: translateX(-60%);
    }
    .img-placeholder.small {
        width: 130px;
        height: 160px;
         transform: translateX(-25%);
    }
    .image-placeholder-group {
        min-height: 160px;
    }
    /* Optional: Hide draft watermark on small screens if it's too intrusive */
    /* .about-section::before { display: none; } */
}

/* Style the pill-shaped title */
.section-title-pill {
  /* --- สไตล์เดิมที่คุณมีอยู่ เช่น --- */
  background-color: #0B5EAA; /* หรือสีที่คุณเลือกไว้ */
  color: white;
  padding: 0.8rem 3rem; /* ปรับ padding ตามต้องการ */
  border-radius: 50px; /* ทำให้เป็นรูปทรง Pill */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* เงา (ถ้ามี) */
  font-weight: 700; /* ตัวหนา (ถ้ากำหนดไว้) */
  display: inline-block; /* ต้องมีเพื่อให้เป็น block ที่ปรับขนาดได้ */
  position: relative; /* ต้องมีเพื่อให้ z-index ทำงาน */
  /* mb-n5 และ z-index: 2 ถูกกำหนด inline ใน HTML */
  font-size: 24px;
  /* --- เพิ่มเส้นขอบสีขาว --- */
  border: 2px solid white; /* <<< เพิ่มบรรทัดนี้ */
  /* คุณสามารถปรับความหนาของเส้นได้ตามต้องการ เช่น 1px, 3px */
  /* หรือใช้ hex code: border: 2px solid #ffffff; */
}


/* Style the main services section background */
.services-section {
  /* Using a subtle gradient similar to the image's blue area */
  background: url("images/bg/bg.png") no-repeat center center / cover;
  /* Or use a solid color: background-color: #ddeffb; */
  border-radius: 0px; /* Rounded corners for the section itself */
  margin-top: -20px; /* Slightly pull up the section if needed, adjust with pill's mb-n* */
  /* z-index and position are set inline */
}

/* Style the individual service cards */
.service-card {
  background-color: #C6E1F2; /* Very light blue/off-white card background */
  color: #004a99; /* Dark blue text color */
  box-shadow: 0 2px 10px rgba(0, 74, 153, 0.1); /* Soft shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover effect */
  border: 1px solid #d0e6f8; /* Optional subtle border */
}

/* Hover effect for cards */
.service-card:hover {
  transform: translateY(-5px); /* Lift card slightly */
  box-shadow: 0 6px 15px rgba(0, 74, 153, 0.15); /* Enhance shadow */
}

/* Style the icons within the cards */
.service-icon {
  height: 60px; /* Set icon height */
  width: auto;  /* Maintain aspect ratio */
  /* If your icons are black SVGs and you want them blue: */
  /* filter: invert(15%) sepia(88%) saturate(2500%) hue-rotate(190deg) brightness(90%) contrast(101%); */
  /* Adjust the filter values to get the exact blue shade */
}

/* Responsive adjustments for columns if needed */
/* Bootstrap handles stacking below 'md' breakpoint */
/* Adjust g-4 / g-lg-5 in HTML for spacing */

/* Make cards inside columns take full height (already done with d-flex and h-100) */
.align-items-stretch {
    display: flex;
}

/* Ensure content inside flex card behaves well */
.service-card.d-flex {
    justify-content: flex-start; /* Align icon to top */
    align-items: center; /* Center items horizontally */
}


.video-responsive {
    position: relative;
    overflow: hidden;
    width: 100%; /* ทำให้เต็มความกว้างของ container แม่ */
    padding-top: 56.25%; /* อัตราส่วน 16:9 (9 / 16 = 0.5625) */
    /* ถ้าวิดีโอเป็น 4:3 ใช้ padding-top: 75%; */
    height: 0; /* สำคัญมาก */
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* เอา border ออกถ้าไม่ต้องการ */
}


.service-icon {
  width: 50px;  /* กำหนดความกว้าง */
  height: 50px; /* กำหนดความสูง */
  /* Optional: เพื่อรักษาสัดส่วนภาพ ป้องกันภาพบิดเบี้ยว */
  object-fit: contain; /* แสดงภาพเต็มในกรอบ อาจมีพื้นที่ว่าง */
  /* หรือ */
  /* object-fit: cover; */ /* ภาพเต็มกรอบ อาจถูกตัดบางส่วน */

  /* หรือ กำหนดแค่ด้านเดียว อีกด้านเป็น auto */
  /* height: auto; */
}

 .service-card {
    /* ทำให้ padding-top มีผล */
    /* ถ้ายังใช้ d-flex flex-column อยู่ อาจต้องเอาออก หรือปรับ */
  }

  .card-icon-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
/*	วงกลม*/
/*    background-color: white; /* ทำให้พื้นหลังรูปไม่โปร่งใส เห็นขอบการ์ด */
/*    padding: 0.5rem; /* เพิ่มช่องว่างรอบๆ รูปภาพเล็กน้อย */
/*    border-radius: 50%; /* ทำให้กรอบเป็นวงกลม */
/*    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* เพิ่มเงาเล็กน้อย (optional) */



    /* ไม่ต้องมี margin หรือ flex-shrink ที่นี่ */
    line-height: 0; /* ป้องกัน space ใต้รูป ถ้า img เป็น inline-block */
  }

  .service-icon {
     /* กำหนดขนาดใน CSS แทน inline style ก็ได้ */
     /* width: 60px; */
     /* height: 60px; */
     display: block; /* ทำให้ img เป็น block เพื่อให้ wrapper คำนวณขนาดถูก */
     margin: auto; /* จัดกลางกรณี wrapper ใหญ่กว่ารูป */
  }

  /* ปรับ padding top ของ card ให้พอดีกับขนาด icon + padding ของ wrapper */
  .service-card {
      padding-top: calc(30px + 1rem + 1rem); /* ครึ่งนึงของความสูง icon + padding บนล่าง wrapper + padding เดิมของ card */
      /* หรือกำหนดค่าคงที่ไปเลย เช่น padding-top: 4rem; แล้วลองปรับดู */
  }


  /* Clients Section
--------------------------------*/

#clients {
  padding: 20px 0;
  box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
}

#clients .clients-wrap {
  border-top: 1px solid #d6eaff;
  border-left: 1px solid #d6eaff;
  margin-bottom: 30px;
}

#clients .client-logo {
  padding: 64px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-right: 1px solid #d6eaff;
  border-bottom: 1px solid #d6eaff;
  overflow: hidden;
  background: #fff;
  height: 160px;
}

#clients .client-logo:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

#clients img {
  transition: all 0.4s ease-in-out;
}



/* Footer Section */
.footer-section {
    background-color: #1e88e5; /* สีน้ำเงินเข้ม/ม่วง - ปรับให้ตรงกับรูป */

}

.footer-section h5 {
    font-weight: bold;
    color: #E8EAF6; /* สีขาวนวลสำหรับหัวข้อ */
}

.footer-section p {
    margin-bottom: 0.75rem; /* เพิ่มระยะห่างระหว่างบรรทัด */
    font-size: 0.95rem;
    color: #C5CAE9; /* สีข้อความรองใน footer */
}

.footer-section a {
    color: #C5CAE9; /* สีลิงก์ */
    text-decoration: none;
}

.footer-section a:hover {
    color: #ffffff; /* สีลิงก์เมื่อ hover */
    text-decoration: underline;
}

.footer-section .contact-icon {
    display: inline-flex; /* ทำให้พื้นหลัง icon กลม */
    align-items: center;
    justify-content: center;
    width: 28px; /* ขนาดวงกลม */
    height: 28px;
    border-radius: 50%;
    color: white; /* สีไอคอนข้างใน */
    margin-right: 8px !important; /* ระยะห่างจากข้อความ */
    font-size: 0.9rem; /* ขนาดไอคอนข้างใน */
}
.footer-section .contact-icon.phone {
    background-color: #4CAF50; /* สีพื้นหลังไอคอนโทรศัพท์ (เขียว) */
}
.footer-section .contact-icon.email {
     background-color: #F44336; /* สีพื้นหลังไอคอนอีเมล (แดง/ส้ม) */
}
.footer-section a {
    text-decoration-line: none !important;
}