.elementor-26 .elementor-element.elementor-element-d5cf975{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-26 .elementor-element.elementor-element-d5cf975{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-26 .elementor-element.elementor-element-d5cf975{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-7a11ed5 */.custom-site-header {
    background-color: #141518;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 10px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #232427;
}

.custom-site-header * {
    box-sizing: border-box;
}

.custom-site-header a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}


.custom-site-header .header-container {
    display: flex;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

/* --- Logo Styling --- */
.custom-site-header .header-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 40px;
    cursor: pointer;
    flex-shrink: 0;
}


.custom-site-header .logo-icon-gradient {
    position: relative;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #ff5722, #ffb300, #8e24aa);
    border-radius: 8px;
    margin-bottom: 6px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); 
}

.custom-site-header .logo-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
}


.custom-site-header .header-menu-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-site-header .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-site-header .top-nav {
    display: flex;
    gap: 16px;
    align-items: center;
}

.custom-site-header .nav-item {
    font-size: 14px;
    color: #929497;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.custom-site-header .nav-item:hover {
    color: #ffffff;
}

.custom-site-header .nav-item.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.custom-site-header .more-dots {
    color: #636569;
}

.custom-site-header .top-utilities {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #929497;
}

.custom-site-header .util-btn {
    background: none;
    border: none;
    color: #929497;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.custom-site-header .util-btn:hover,
.custom-site-header .dropdown-contacts:hover {
    color: #ffffff;
}

.custom-site-header .dropdown-contacts {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}

.custom-site-header .bottom-nav {
    display: flex;
    gap: 16px;
    align-items: center;
}

.custom-site-header .nav-sub-item {
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
}

.custom-site-header .nav-sub-item:hover {
    color: #ffb300;
}

.custom-site-header .nav-sub-item.highlighted {
    background-color: #2b2c30;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
}

.custom-site-header .bottom-actions {
    display: flex;
    gap: 10px;
}

.custom-site-header .btn-action {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.custom-site-header .btn-yellow {
    background-color: #f7c143;
    color: #000000;
}

.custom-site-header .btn-yellow:hover {
    background-color: #e0ad36;
}

.custom-site-header .btn-outline {
    background-color: #222327;
    color: #ffffff;
    border: 1px solid #333539;
}

.custom-site-header .btn-outline:hover {
    background-color: #2f3136;
}

@media (max-width: 1024px) {
    .custom-site-header .top-nav, 
    .custom-site-header .bottom-nav {
        display: none; /* ซ่อนเมนูในมือถือ สามารถไปทำเบอร์เกอร์เมนูเพิ่มได้ */
    }
}/* End custom CSS */