*{box-sizing:border-box}
body{margin:0;font-family:Arial,Tahoma,sans-serif;color:#181818;background:#fff}
a{text-decoration:none;color:inherit}
header{background:#3549a8;color:white}
.top-nav{min-height:60px;display:flex;justify-content:center;align-items:center;gap:32px;background:#394db1;font-size:17px;font-weight:600;flex-wrap:wrap;padding:12px}
.top-nav a:hover{opacity:.75}
.header-main{min-height:140px;display:flex;align-items:center;gap:35px;padding:25px 4%;background:linear-gradient(110deg,#3451b0,#2f419b)}
.logo{width:130px;display:flex;flex-direction:column;align-items:center;font-size:10px;gap:6px;text-align:center}
.logo-mark{width:60px;height:60px;background:#fff;color:#4154b8;display:grid;place-items:center;font-size:35px;font-weight:bold}
.search{display:flex;background:#fff;height:45px;border-radius:4px;overflow:hidden;flex:1;max-width:1000px}
.search select{border:0;border-right:1px solid #eee;padding:0 12px;color:#777;background:#fff}
.search input{border:0;outline:0;padding:0 15px;flex:1;min-width:0}
.search button{border:0;background:#fff;color:#445bce;font-size:30px;padding:0 18px;cursor:pointer}
.latest{margin-left:auto;font-size:13px;font-weight:bold;white-space:nowrap}
.category-bar{background:#2c3f95;display:flex;justify-content:center;gap:70px;padding:12px 20px;font-size:12px;font-weight:bold;flex-wrap:wrap}
.contact-main{max-width:1180px;margin:55px auto 100px;padding:0 24px;min-height:450px}
.contact-main h1{font-size:28px;margin:0 0 42px;font-weight:600}
.contact-content{max-width:680px;margin:auto}
.contact-content h2{font-size:23px;margin:0 0 12px}
.intro{color:#666;font-size:15px;margin-bottom:30px;line-height:1.8}
.contact-list{border:1px solid #e7e9ef;border-radius:12px;overflow:hidden}
.contact-item{display:flex;align-items:center;gap:20px;padding:23px 28px;border-bottom:1px solid #eee}
.contact-item:last-child{border-bottom:0}
.contact-icon{width:48px;height:48px;flex-shrink:0;border-radius:12px;background:#edf0ff;color:#465bd2;display:grid;place-items:center;font-size:24px}
.contact-item div{display:flex;flex-direction:column;gap:7px}
.contact-item strong{font-size:15px}
.contact-item a,.contact-item div span{color:#555;font-size:16px;overflow-wrap:anywhere}
.contact-item a:hover{color:#4257c3}
.contact-note{font-size:14px;color:#777;margin-top:24px;line-height:1.8}
footer{background:#293b87;color:#fff;text-align:center;padding:35px 15px;font-size:13px}
@media(max-width:800px){
.top-nav{gap:15px;font-size:13px;min-height:50px}
.header-main{min-height:100px;gap:12px;padding:15px}
.logo{width:60px;font-size:8px}
.logo-mark{width:45px;height:45px;font-size:27px}
.search{height:42px}
.search select,.latest{display:none}
.category-bar{gap:18px;font-size:11px}
.contact-main{margin:35px auto 65px;padding:0 18px}
.contact-main h1{font-size:24px;margin-bottom:30px}
.contact-content h2{font-size:20px}
.contact-item{padding:18px;gap:15px}
.contact-icon{width:42px;height:42px}
}

/* SIAM V2.1 - HEADER MATCH ORIGINAL */

.top-nav {
    display: flex;
    min-height: 60px;
    background: #394db1;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-size: 17px;
    font-weight: 600;
}

.header-main {
    min-height: 140px;
    background:
        linear-gradient(
            110deg,
            #3451b0 0%,
            #2f419b 100%
        );
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95px;
    flex-shrink: 0;
}

.logo img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: white;
}

.category-bar {
    min-height: 60px;
    align-items: center;
    background: #2c3f95;
}

@media (max-width: 800px) {
    .top-nav {
        min-height: 50px;
        gap: 14px;
        font-size: 13px;
    }

    .header-main {
        min-height: 100px;
    }

    .logo {
        width: 55px;
    }

    .logo img {
        width: 50px;
        height: 50px;
    }

    .category-bar {
        min-height: 45px;
    }
}

/* SIAM V2.2 REAL LOGO */
.header-main .logo {
    width: 95px;
    flex: 0 0 95px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-main .logo img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: #fff;
}

@media (max-width: 800px) {
    .header-main .logo {
        width: 60px;
        flex-basis: 60px;
    }

    .header-main .logo img {
        width: 55px;
        height: 55px;
    }
}
