.elementor-6090 .elementor-element.elementor-element-bc29db7{--display:flex;--min-height:80px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:020px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-6090 .elementor-element.elementor-element-bc29db7:not(.elementor-motion-effects-element-type-background), .elementor-6090 .elementor-element.elementor-element-bc29db7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFFC7 0%, #FFFFFF08 100%);}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6090 .elementor-element.elementor-element-86dd566 > .elementor-widget-container{margin:0px 10px 0px 0px;}.elementor-6090 .elementor-element.elementor-element-86dd566 img{width:84%;}.elementor-6090 .elementor-element.elementor-element-af98c01{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:60px 60px;--row-gap:60px;--column-gap:60px;--border-radius:99px 99px 99px 99px;--margin-top:0px;--margin-bottom:0px;--margin-left:-48px;--margin-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-menu-toggle{margin:0 auto;}.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-nav-menu .elementor-item{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:600;}.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-nav-menu--main .elementor-item{color:#67D9C8;fill:#67D9C8;padding-left:33px;padding-right:33px;}.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-nav-menu--main .elementor-item:hover,
					.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-nav-menu--main .elementor-item:focus{color:#BCFFF5;fill:#BCFFF5;}.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#67D9C800;}.elementor-6090 .elementor-element.elementor-element-0bfd3af .e--pointer-framed .elementor-item:before,
					.elementor-6090 .elementor-element.elementor-element-0bfd3af .e--pointer-framed .elementor-item:after{border-color:#67D9C800;}.elementor-6090 .elementor-element.elementor-element-0bfd3af .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#BCFFF5;}.elementor-6090 .elementor-element.elementor-element-4103d1f > .elementor-widget-container{margin:5px 0px 0px -11px;}.elementor-6090 .elementor-element.elementor-element-4103d1f.elementor-element{--align-self:center;}.elementor-6090 .elementor-element.elementor-element-4103d1f{text-align:left;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-6090 .elementor-element.elementor-element-af98c01{--width:1126px;}}/* Start custom CSS for nav-menu, class: .elementor-element-0bfd3af *//* ล็อกพื้นหลังให้โปร่งใส กำหนดสี และบังคับให้ Dropdown ทะลุขอบ Container ออกมาได้ */
.elementor-6090 .elementor-element.elementor-element-0bfd3af,
html[data-theme="dark"] .elementor-6090 .elementor-element.elementor-element-0bfd3af,
body.wp-dark-mode-active .elementor-6090 .elementor-element.elementor-element-0bfd3af,
.wp-dark-mode-active .elementor-6090 .elementor-element.elementor-element-0bfd3af {
    background-color: transparent !important; 
    color: #67D9C8 !important; 
    filter: none !important; 
    mix-blend-mode: normal !important;
    isolation: auto !important; /* ปลดล็อกกล่องที่ขัง Dropdown */
    overflow: visible !important; /* อนุญาตให้ Dropdown ล้นออกนอกขอบได้ */
    z-index: 9999 !important; /* ดันเมนูให้อยู่ชั้นบนสุด จะได้ไม่มุดลงไปใต้ Element อื่น */
}

/* บังคับสีลิงก์ภายในเมนูให้เป็น #67D9C8 เสมอ */
.elementor-6090 .elementor-element.elementor-element-0bfd3af a, 
.elementor-6090 .elementor-element.elementor-element-0bfd3af ul li a,
html[data-theme="dark"] .elementor-6090 .elementor-element.elementor-element-0bfd3af a,
body.wp-dark-mode-active .elementor-6090 .elementor-element.elementor-element-0bfd3af a,
.wp-dark-mode-active .elementor-6090 .elementor-element.elementor-element-0bfd3af a {
    background-color: transparent !important;
    color: #67D9C8 !important; 
}

/* ล็อกสีตอนเอาเมาส์ชี้ (Hover) ให้คงสีเดิมไว้ ไม่ให้ Dark Mode มารบกวน */
.elementor-6090 .elementor-element.elementor-element-0bfd3af a:hover, 
.elementor-6090 .elementor-element.elementor-element-0bfd3af ul li a:hover,
html[data-theme="dark"] .elementor-6090 .elementor-element.elementor-element-0bfd3af a:hover,
body.wp-dark-mode-active .elementor-6090 .elementor-element.elementor-element-0bfd3af a:hover,
.wp-dark-mode-active .elementor-6090 .elementor-element.elementor-element-0bfd3af a:hover {
    color: #67D9C8 !important; 
    filter: none !important;
}

/* ป้องกัน Dropdown (Sub-menu) โดนตัดขอบจากคลาสภายใน */
.elementor-6090 .elementor-element.elementor-element-0bfd3af ul, 
.elementor-6090 .elementor-element.elementor-element-0bfd3af li, 
.elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu {
    overflow: visible !important;
}



/* =========================================
   🔥 DROPDOWN (Sub-menu) MODERN TECH STYLING
   ========================================= */

/* 1. ปรับแต่งตัวกล่อง Dropdown หลัก */
.elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu {
    background-color: #121417 !important; /* พื้นหลังสีเข้มให้เข้ากับ Container */
    border: 1px solid rgba(103, 217, 200, 0.2) !important; /* ขอบเรืองแสงสีฟ้านิดๆ */
    border-radius: 6px !important; /* มุมมนเล็กน้อยให้ดูทันสมัย */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(103, 217, 200, 0.05) !important; /* เงาให้ดูลอยมีมิติ */
    padding: 8px 0 !important;
    min-width: 220px !important;
    position: absolute !important;
    z-index: 9999 !important;
}

/* เพิ่มเส้นเลเซอร์ตกแต่งด้านบนของกล่อง Dropdown */
.elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: #67D9C8;
    box-shadow: 0 0 8px #67D9C8;
}

/* 2. เส้นคั่นระหว่างเมนูย่อยแต่ละข้อ */
.elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; 
    margin: 0 !important;
}

/* ปิดเส้นคั่นในเมนูข้อสุดท้าย */
.elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu li:last-child {
    border-bottom: none !important;
}

/* 3. สไตล์ของลิงก์ภายใน Dropdown */
.elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu li a,
html[data-theme="dark"] .elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu li a,
body.wp-dark-mode-active .elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu li a {
    background-color: transparent !important;
    color: #67D9C8 !important;
    padding: 12px 20px !important;
    display: block !important;
    font-size: 0.95em !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* ทำให้ตอน Hover สมูท */
}

/* 4. ลูกเล่นตอนเอาเมาส์ชี้ (Hover) ที่เมนูย่อย */
.elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu li a:hover,
html[data-theme="dark"] .elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu li a:hover,
body.wp-dark-mode-active .elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu li a:hover {
    background-color: rgba(103, 217, 200, 0.1) !important; /* ไฮไลท์พื้นหลังเป็นสีฟ้าแบบโปร่งใส */
    color: #ffffff !important; /* เปลี่ยนข้อความเป็นสีขาวให้เด่นขึ้น */
    padding-left: 28px !important; /* ขยับข้อความไปทางขวาเล็กน้อย (ลูกเล่น Tech) */
    text-shadow: 0 0 8px rgba(103, 217, 200, 0.5) !important; /* ข้อความเรืองแสง */
}

/* 5. ป้องกันเส้น Pointer เดิม (ถ้ามี) ไม่ให้มาแสดงเกะกะใน Dropdown */
.elementor-6090 .elementor-element.elementor-element-0bfd3af .sub-menu li a::after {
    display: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af98c01 */.elementor-6090 .elementor-element.elementor-element-af98c01 {
    /* ตัวแปรสี */
    --metal-dark: #121417;
    --metal-mid: #25282d;
    --metal-light: #3a414a;
    --tech-accent: 0, 212, 255;
    
    /* [ปรับลดเงา] ลดความสว่างของแสงด้านในตอนปกติเหลือแค่ 8% */
    --tech-glow: rgba(var(--tech-accent), 0.08); 
    --grid-color: rgba(var(--tech-accent), 0.05);

    /* ตั้งค่า Transition เพื่อให้ทุกการขยับดูนุ่มนวล */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* สร้างพื้นผิวและเส้นตาราง */
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
        linear-gradient(
            145deg,
            var(--metal-dark) 0%,
            var(--metal-mid) 45%,
            var(--metal-light) 50%,
            var(--metal-mid) 55%,
            var(--metal-dark) 100%
        );
    
    /* ขยายขนาด Background โลหะไว้เผื่อทำอนิเมชันตอน Hover */
    background-size: 40px 40px, 40px 40px, 200% 200%;
    background-position: 0 0, 0 0, 0% 50%;
    
    border-top: 1px solid #4a5568;
    border-bottom: 1px solid #1a202c;
    
    /* [ปรับลดเงา] ลดรัศมีและความเข้มของเงาทั้งด้านในและด้านนอก */
    box-shadow: inset 0 0 15px var(--tech-glow), 0 5px 15px rgba(0, 0, 0, 0.25);
    
    position: relative;
    overflow: visible !important; /* แก้ไขตรงนี้: ปล่อยให้ Dropdown ทะลุกรอบออกมาได้ */
    z-index: 999; /* เพิ่มตรงนี้: ดันให้ Container อยู่เลเยอร์บนสุด */
}

/* ตั้งค่าเส้นแสงด้านล่างตอนปกติ (ซ่อนเอาไว้ตรงกลาง) */
.elementor-6090 .elementor-element.elementor-element-af98c01::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    /* ลดความสว่างของเส้นเลเซอร์ลงเล็กน้อย */
    background: linear-gradient(90deg, transparent, rgba(var(--tech-accent), 0.8), transparent);
    /* [ปรับลดเงา] ลดความฟุ้งของแสงเลเซอร์ */
    box-shadow: 0 -1px 6px rgba(var(--tech-accent), 0.4);
    opacity: 0;
    transition: all 0.4s ease-out;
}


/* =========================================
   🔥 HOVER EFFECTS (ลูกเล่นตอนเอาเมาส์ชี้)
   ========================================= */

.elementor-6090 .elementor-element.elementor-element-af98c01:hover {
    /* 1. เลื่อนแสงสะท้อนของโลหะไปอีกฝั่ง */
    background-position: 0 0, 0 0, 100% 50%;
    
    /* 2. ยกกล่องขึ้นนิดๆ + [ปรับลดเงา] ลดความเข้มของแสงตอน Hover ให้ดูเนียนตาขึ้น */
    transform: translateY(-3px); /* ลดระยะเด้งลงให้สัมพันธ์กับเงาที่บางลง */
    box-shadow: inset 0 0 30px rgba(var(--tech-accent), 0.15), 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* 3. ทำให้เส้นตารางสว่างขึ้น (ปรับลดไม่ให้สว่างเกินไป) */
.elementor-6090 .elementor-element.elementor-element-af98c01:hover {
    --grid-color: rgba(var(--tech-accent), 0.12); 
}

/* 4. เส้นเลเซอร์วิ่งกางออกไปจนสุดขอบ */
.elementor-6090 .elementor-element.elementor-element-af98c01:hover::after {
    width: 100%;
    opacity: 1;
}/* End custom CSS */