@charset "utf-8";
/* CSS Document */

/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ===== MOBILE MODE (Default) ===== */

/* ===== TOP BAR ===== */
.topbar {
    background: #0b3d4f;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0px 16px 0px 0px;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ===== HAMBURGER ===== */
.hamburger {
    font-size: 28px;
    cursor: pointer;
    user-select: none;
	padding: 0px 0px 2px 14px;
}

/* ===== OVERLAY ===== */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.2);
    display: none;
    z-index: 9;
}

/* ===== SIDEBAR ===== */
.sidebar {
    position: fixed;
    top: 50px;
    left: -260px;
    width: 260px;
    height: 100%;
    background: #0b3d4f;
    color: #fff;
    transition: left 0.3s ease;
    z-index: 10;
    padding-top: 0px;
}

.sidebar.open {
    left: 0;
}

/* ===== MENU ===== */
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu > li {
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.menu a {
    display: flex;
    align-items: center;  /* จัดกึ่งกลางแนวตั้ง */
    padding: 16px 16px;
    color: #fff;
    text-decoration: none;
	height:auto;    
	min-height: 50px;
	
}
.menu a:hover {
    display: flex;        /* ต้องเปลี่ยนเป็น flex ด้วย */
    align-items: center;
    height: 50px;
    background: #fff;
    color: #09404f;
	height:auto;    
	min-height: 50px;
	
}

/* ===== SUBMENU ===== */
.submenu {
    list-style: circle;
    background: #09404f;
    display: none;
    padding: 0;
    margin: auto;
	
}

.submenu li a {
    padding: 16px 36px 16px 36px;
    font-size: 14px;
	margin: auto;
	
}

/* ===== SEARCH BOX  ===== */
.menutopsearch {
    height: 40px;
    margin: 10px 15px 0px 15px;
	display:flex ;
}

.searchbox {
    float: left;
    width: 200px;
    height: 30px;
    box-sizing: border-box;
    border: 0px solid #ccc;
    border-radius: 15px 0px 0px 15px;
    font-size: 16px;
    background-color: white;
    background-repeat: no-repeat;
    padding: 0px 0px 0px 10px;
    margin: 0px 0px 0px 0px;
}

.searchbutton {
    float: right;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 0px solid #ccc;
    border-radius: 0px 15px 15px 0px;
    background-color: white;
    background-image: url(../img/searchicon.png);
    background-repeat: no-repeat;
    background-position: 4px 4px;
    margin: 0px 0px 0px 0px;
    cursor: pointer;
}

/* desktop hover */
@media (min-width: 769px) {
    .has-submenu:hover .submenu {
        display: block;
    }
	.sidebar {
		top: 120px;
	}
}

/* mobile click */
.has-submenu.active > .submenu {
    display: block;
}

/* ===== PC MODE ===== */
@media (min-width: 820px) {
	.menutopsearch {
    	display:flex ;
	}
    .topbar {
        display: none;
        height: 0px;
    }
    
    .hamburger {
        display: none;
    }
    
    .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .menu {
        display: flex;
        margin: 0;
        padding: 0;
        flex-grow: 1;
    }
    
    .menu > li {
        border: none;
        position: relative;
    }
    
    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: auto;
        min-width: 200px;
    }
    
    /* ===== SEARCH BOX (PC - Visible at far right) ===== */
    .menutopsearch {
        display: flex;
        align-items: center;
        height: 50px;
        margin: 0;
        padding: 0 10px 0 0;
        flex-shrink: 0;
    }
    
    .searchbox {
        float: none;
        width: 180px;
        height: 30px;
        margin: 0;
    }
    
    .searchbutton {
        float: none;
        margin: 0;
    }
    
    .overlay {
        display: none !important;
    }
}
/* =====  PC MODE จอ820-1040 ซ่อนกล่องค้นหา ===== */
@media (min-width: 820px) and (max-width: 1039px) {
	.menutopsearch {
    	display: none;
	}
	
}
@media (min-width: 820px){
	.sidebar{
		width: auto;
	}
	.menu a {
    	display: inline-flex;   /* ยืดตามแนวนอน */
		width: 100%;            /* ให้เต็มความกว้าง li */
    	white-space: nowrap;    /* ไม่ตัดบรรทัด */
		height:50px;
	}
	.menu a:hover {
		height:50px;
	}
}
/* =====  PC MODE จอเกิน1040 แสดงกล่องค้นหา ===== */
@media (min-width: 1040px) {
	.menutopsearch {
    	display:flex ;
	}
}
/* ===== CONTENT ===== */
.content {
    padding: 20px;
}