@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-Regular.ttf') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-Medium.ttf') format('truetype');
    font-weight: 500;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-SemiBold.ttf') format('truetype');
    font-weight: 600;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-Bold.ttf') format('truetype');
    font-weight: 700;
}

:root {
    --nav-height: clamp(60px, 8vw, 75px);
    --container-px: clamp(20px, 6vw, 80px);
    --color-navy: #184382;
    --gray-900: #12151A;
    --brand-primary: #012F5F;
}

body {
    font-family: 'IBM Plex Sans Thai', sans-serif;
    padding-top: var(--nav-height) !important;
    background-color: #fcfcfc;
}

button.btn-icon,
.btn.btn-icon,
a.btn-icon {
    width: 64px !important;
    height: 64px !important;
    padding: 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;

    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05) !important;

    flex: 0 0 64px !important;
    min-width: 64px !important;

    line-height: 0 !important; 
}

.btn-icon svg,
.btn-icon img,
.btn-icon i {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
}

.navbar {
    height: var(--nav-height) !important;
    background-color: #ffffff !important;
    padding: 0 var(--container-px) !important;
    border: none !important;
    display: flex;
    align-items: center;
}

.navbar-brand {
    padding: 0 !important;
    margin-right: clamp(16px, 3vw, 32px);
}

.navbar-brand img {
    width: clamp(140px, 15vw, 170.667px) !important;
    height: auto !important;
    display: block;
    object-fit: contain;
}

.navbar-nav {
    gap: clamp(15px, 2.5vw, 32px);
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 600 !important;
    color: var(--color-navy) !important;
    padding: 0 !important;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.5;
    white-space: nowrap;
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.dropdown-toggle::after {
    display: inline-block !important;
    border: none !important; 
    content: "\F282" !important; 
    font-family: 'bootstrap-icons' !important;
    font-size: 14px !important; 
    font-weight: 900 !important; 
    margin-left: 5px !important;
    color: inherit !important; 
    transition: transform 0.2s ease;
    vertical-align: 0.15em !important;
}

.show > .dropdown-toggle::after {
    transform: rotate(180deg);
}

.btn-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(8px, 1.5vw, 12px) clamp(16px, 2vw, 20px);
    background: var(--color-navy);
    border: 1px solid var(--color-navy);
    border-radius: 0;
    color: #fff !important;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-contact:hover {
    color: #fff !important;
    background-color: #416995 !important;
    text-decoration: none !important;
}


.main-footer {
    background: linear-gradient(180deg, #000000 0%, #011C38 100%) !important;
    color: #fff;
    padding-top: clamp(40px, 8vw, 80px);
}
.footer-top { padding-bottom: clamp(40px, 8vw, 80px); }
.footer-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.footer-logo { width: 170.667px; height: 48px; object-fit: contain; margin-bottom: 10px}
.footer-contact-info { display: flex; flex-direction: column; gap: 15px;}
.contact-item { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    font-size: 18px; 
    font-weight: 400;
    color: #fff;
    margin-bottom: 16px;
}

.contact-icon-box {
    width: 40px; 
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    flex-shrink: 0;
    padding: 8px; 
    box-sizing: border-box;
}

.contact-icon-box img, 
.contact-icon-box .lucide {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.contact-item a { 
    color: #fff; 
    text-decoration: none; 
    opacity: 1; 
    transition: 0.3s;
}

.contact-item a:hover {
    opacity: 0.8;
}

.btn-contact {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 4px;
}

.ms-auto a:hover img {
    opacity: 0.8;
    transition: 0.3s;
}
.footer-title { font-size: 24px; font-weight: 600; margin-bottom: 20px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.footer-links a { color: #fff; text-decoration: none; opacity: 0.7; font-size: 18px; font-weight: 400; transition: 0.3s; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom { background-color: #000; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.copyright { color: #fff; font-size: 18px; font-weight: 600; opacity: 0.6; margin: 0; }
.qr-code {
    width: 158.275px;
    height: 155.432px;
    flex-shrink: 0;
    object-fit: contain;
    margin: 20px 0px;
}
.line-id {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}


@media (max-width: 1024px) {
    .navbar { padding: 0 20px !important; }
    .navbar-collapse {
        background: #ffffff;
        padding: 1rem;
        border-radius: 0;
        margin-top: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .navbar-nav { align-items: flex-start !important; gap: 15px; }
    .btn-contact { margin-top: 15px; width: 100%; }
}

@media (min-width: 1025px) {
    .has-megamenu { position: static !important; }
    .dropdown-menu-megamenu {
        display: none; 
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        background-color: #ffffff;
        border-top: 1px solid #F2F4F7 !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
        z-index: 1050;
        margin: 0 !important;
        padding: clamp(24px, 4vw, 32px) 0 !important;
        min-height: 384px;
        border-radius: 0 !important;
    }
    .has-megamenu:hover .dropdown-menu-megamenu { display: block; }
    
    .container-custom {
        margin: 0 auto;
        padding: 0 var(--container-px);
    }

    .menu-label {
        color: #A1A1A1;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        height: 20px;
        margin-bottom: 16px;
        display: inline-block;
    }

    .mega-nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        color: #2F2F2F !important;
        font-size: clamp(14px, 1.2vw, 16px);
        font-weight: 600;
        text-decoration: none;
        border-radius: 0;
        transition: all 0.2s;
    }

    .mega-nav-item.item-selected {
        background-color: #F6F6F6;
        color: #2F2F2F !important;
    }
    
    .mega-nav-item.item-selected i {
        color: #2F2F2F !important;
    }

    .mega-nav-item.item-selected .icon-box {
        border-radius: 8px !important;
        border: 1px solid #EAEAF0;
        background: #FFF;
    }

    #mega-product-list {
        max-height: 480px; 
        overflow-y: auto;  
        overflow-x: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #mega-product-list::-webkit-scrollbar {
        display: none;
    }

    .mega-product-card {
        background: #F9FAFB;
        padding: clamp(16px, 2vw, 24px) 16px;
        text-align: center;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 0;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .mega-product-card img {
        max-height: clamp(80px, 10vw, 120px);
        width: auto;
        margin-bottom: 16px;
        object-fit: contain;
    }

    .mega-product-card .product-name {
        font-size: clamp(14px, 1.2vw, 16px);
        font-weight: 600;
        color: var(--color-navy);
    }

    .mega-product-card:hover {
        background: #ffffff;
        transform: translateY(-8px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.05);
    }

    .partner-card img { 
        width: 100%;
        max-width: 262px;
        height: clamp(150px, 18vw, 200px);
        object-fit: cover;
        border-radius: 0;
        margin-bottom: 24px !important;
    }

    .nav-partner-title {
        font-size: clamp(14px, 1.2vw, 16px) !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        color: var(--gray-900) !important;
        margin-bottom: 6px !important;
        align-self: stretch;
    }

    .partner-link {
        font-size: clamp(14px, 1.2vw, 16px) !important;
        color: var(--brand-primary) !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .partner-link i {
        font-size: 20px !important;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mega-footer {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #6C757D;
        margin-top: clamp(20px, 3vw, 32px);
        padding: 16px 0 0 0 !important;
        border-top: 1px solid #EAECF0;
    }

    .mega-footer a {
        color: #2F2F2F;
        font-weight: 700;
        text-decoration: underline;
    }

    .icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: #FFFFFF;
        border: 1px solid #EAEAF0;
        border-radius: 8px !important;
        flex-shrink: 0;
    }
    
    .mega-menu-content-tablet {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    .mega-nav-item.item-selected,
    .tablet-nav-item-link.item-selected {
        background-color: #F6F6F6;
        color: #2F2F2F !important;
    }

    .mega-nav-item.item-selected i,
    .tablet-nav-item-link.item-selected i {
        color: #2F2F2F !important;
    }
    
    .mega-nav-item.item-selected .icon-box,
    .tablet-nav-item-link.item-selected .tablet-icon-box-round {
        border-radius: 8px !important;
        border: 1px solid #EAEAF0;
        background: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mega-menu-content-tablet {
        display: block !important;
        background: #fff;
        padding: 20px 0;
    }

    .nav-link-tablet {
        padding: 14px 20px;
        color: #2F2F2F;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid #F6F6F6;
        display: block;
    }

    .nav-link-tablet:hover {
        background-color: #F6F6F6;
    }

    .back-to-main {
        color: #003366;
        font-weight: 700;
        text-decoration: none;
        font-size: 16px;
    }

    #mega-product-list-tablet::-webkit-scrollbar,
    #mega-product-list::-webkit-scrollbar {
        display: none;
    }

    .main-footer {
        padding: 60px 0 0 0 !important;
        background-color: #000b1d !important;
    }

    .footer-top .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .footer-top .col-lg-4:nth-child(1) {
        flex: 0 0 60% !important;
        max-width: 60% !important;
        order: 1 !important;
    }

    .footer-top .col-lg-4:nth-child(2) {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        order: 2 !important;
    }

    .footer-top .col-lg-4:nth-child(3) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        order: 3 !important;
        margin-top: 20px !important;
    }

    .footer-qr-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .qr-code {
        margin-left: 40px !important;
        margin-bottom: 10px !important;
    }

    .line-id{
        margin-left: 40px !important;
    }

    .footer-logo { 
        width: 170.667px;
        height: 48px;
        object-fit: contain; 
        margin-bottom: 20px
    }

    .footer-contact-info .contact-item{
        font-size: 18px !important;
        font-weight: 400 !important;
    }

    .footer-title{
        font-size: 20px !important;
        font-weight: 600 !important;
    }

    .footer-links a{
        font-size: 18px !important;
        font-weight: 400 !important;
    }

    .qr-code {
        width: 158.275px;
        height: 155.432px;
    }

}

@media (max-width: 767.98px) {

    
    .footer-logo { 
        width: 170.667px;
        height: 48px; 
        object-fit: contain; 
        margin-bottom: 20px
    }

    .footer-contact-info .contact-item{
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .footer-title{
        font-size: 18px !important;
        font-weight: 600 !important;
    }

    .footer-links a{
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .dev-credit{
        display: none;
    }

    .main-footer {
        background: linear-gradient(180deg, #000000 0%, #011C38 100%) !important;
        padding-top: 64px !important;
        padding-bottom: 0 !important;
        color: #fff !important;
    }

    .main-footer .footer-top .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .footer-top .row{
        margin-left: 0px !important;
    }

    .brand-text strong,
    .brand-text span,
    .footer-links li a,
    .contact-item a,
    .line-id {
        line-height: 1 !important;
        display: block;
    }

    .footer-brand {
        margin-bottom: 24px !important;
    }

    .footer-links li {
        margin-bottom: 12px !important;
    }

    .contact-item {
        margin-bottom: 10px !important;
        gap: 10px !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .footer-title{
        margin-top: 25px;
    }

    .footer-qr-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .qr-code {
        width: 158.275px !important;
        height: 155.432px !important;
        background: #fff !important;
        padding: 8px !important;
        border-radius: 0px !important;
        margin-bottom: 8px !important;
        object-fit: contain !important;
    }

    .footer-bottom {
        background-color: #000000 !important;
        margin-top: 0 !important;
        padding: 24px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .footer-bottom .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .copyright {
        font-size: 16px !important;
        margin-bottom: 0 !important;
        text-align: center !important;
    }

}
.mobile-break{
    display: none;
}

.text-navy { color: #012F5F !important; }