html {
	overflow: -moz-scrollbars-vertical;
    width:100%;
	margin: 0;
	padding: 0;
    background: rgb(242,242,242);
}
* {
	font-family: "Sarabun", 'Josefin Sans', Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}
body {
    font-size: 12px;
    width:100%;
    margin:0;
    padding:0;
}
table.tablesaw
{
    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;
}
#container {
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}
.mb{
    display: none;
}
.clear { 
	width: 100%;
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* General Theme */
a, a:visited {
	color: #1b57a3;
    text-decoration: none;
}
a:hover {
	text-shadow: 0px 1px 0px #fff, 0px 1px 2px #bebebe;
	font-weight:bold;
}
#header {
    margin-top: 10px;
    margin-bottom: 10px;
}
#header_panel {
    width: 100%;
    clear: both;
}
/* --- Global / Desktop Styling (Default) --- */
#header_panel .panel_top {
    background: rgb(27,60,90);
    background: linear-gradient(0deg, rgba(27,60,90,1) 0%, rgba(44,102,126,1) 100%);
    height: 40px; /* Fixed height for desktop */
    margin: 5px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative; /* Crucial for absolute positioning of mobile menu */
    overflow: hidden; /* Hide overflow of mobile menu when not active on desktop */
}

.center {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pt_menu {
    display: flex;
    align-items: center;
    padding: 0;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
}

/* Hamburger menu button styling - FIXED */
.menu-toggle {
    display: none; /* Hide by default on larger screens */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px 0; /* Adjusted padding to control width/height */
    position: relative;
    z-index: 1000; /* Ensure it's on top */
    width: 25px; /* Fixed width for the button */
    height: 25px; /* Fixed height for the button */
    flex-direction: column;
    justify-content: space-around; /* Distribute spans vertically */
    align-items: center;
}

.menu-toggle span {
    display: block;
    width: 25px; /* Fixed width for the lines */
    height: 3px; /* Fixed height for the lines */
    background-color: #eeefff; /* Color of the hamburger lines */
    border-radius: 2px; /* Slightly rounded corners for the lines */
    transition: all 0.3s ease-in-out; /* Smooth transition for icon animation */
}

/* When menu is active, transform hamburger icon */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* Move down and rotate */
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0; /* Fade middle line */
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* Move up and rotate */
}


/* Hide mobile menu container by default on desktop */
.mobile-menu-container {
    /* On desktop, this should blend in with pt_menu's existing layout for nav-menu */
    /* and hide the mobile-only-search part */
    display: flex; /* Or block, depends on how you want nav-menu to behave inside */
    align-items: center; /* For vertical alignment of nav-menu */
    /* For desktop, ensure it doesn't take up any extra space for search part */
    width: auto; /* Let content dictate width */
    height: auto;
    position: static; /* Reset position for desktop */
    opacity: 1; /* Ensure visible on desktop */
    max-height: none; /* Ensure no max-height restriction on desktop */
    pointer-events: auto; /* Ensure active on desktop */
    transition: none; /* No transition on desktop */
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

.nav-menu li a, .nav-menu li a:visited {
    color: #eeefff;
    font-size: 15px;
    text-decoration: none;
    padding: 0 10px;
    font-weight: bold;
    text-shadow: 0px 1px 1px #222222;
    display: block;
    line-height: 40px; /* Match panel_top height for vertical alignment */
    white-space: nowrap;
}
/* ... (Active and Hover states for nav-menu links remain the same) ... */


.pt_right.desktop-only-search { /* This is the desktop search */
    display: flex; /* Show on desktop */
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.pt_right.mobile-only-search { /* This is the mobile search, hide on desktop */
    display: none;
}

#search { /* This is the search container itself */
    display: flex;
    align-items: center; /* Crucial: Vertically align all direct children (div1, div2, div3) */
    padding: 0;
    gap: 5px;
    flex-wrap: nowrap;
    min-width: 280px; /* Ensure enough space for search elements */
}

#search .div1 {
    margin: 0; /* Reset margin to ensure no extra spacing */
    color: #FFF;
    font-size: 11px;
    white-space: nowrap;
    /* --- CRITICAL FIX FOR ALIGNMENT --- */
    /* Use line-height to make the text occupy the same vertical space as inputs */
    line-height: 24px; /* Should match the height of input/select */
}

#search .div2 {
    margin: 0; /* Reset margin */
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    align-items: center; /* Ensure input and select are aligned within div2 */
}

#search .div3 {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    margin: 0; /* Reset margin */
}

#search select {
    border: 1px solid #1b57a3;
    padding: 1px;
    border-radius: 10px;
    width: 90px;
    font-size: 11px;
}

#search input {
    border: 1px solid #1b57a3;
    padding: 2px;
    border-radius: 10px;
    width: 110px;
    font-size: 11px;
}

.button span {
    color: #fff;
    display: block;
    padding: 5px 8px;
    background: rgb(137,182,63);
    border-radius: 5px;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}
.button span:hover {
    scale: 1.1;
    transition-duration: 0.5s;
}

/* --- Mobile Styling (inside Media Query) --- */
@media only screen and (max-width: 768px) {
    #header_panel .panel_top {
        flex-direction: row; /* เปลี่ยนเป็น row เพื่อให้ Hamburger และ Logo/อื่นๆ อยู่บรรทัดเดียวกัน */
        justify-content: space-between; /* จัด space ให้ Hamburger ไปอยู่ขวา (หรือซ้าย) */
        align-items: center; /* จัดให้อยู่กลางแนวตั้ง */
        height: 40px; /* ให้ Header มีความสูงคงที่บน Mobile */
        padding: 0 10px; /* ปรับ padding ให้เหมาะสม */
        position: fixed; /* ทำให้ Header หลักอยู่ด้านบนตลอด */
        width: 100%;
        margin: 0;
        top: 0;
        left: 0;
        z-index: 1001; /* ให้ Header อยู่บนสุด เหนือ Menu Container */
    }

    .center {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pt_menu {
        /* อาจจะต้องปรับ order หรือ justify-content ถ้าคุณมีองค์ประกอบอื่นๆ ใน pt_menu */
        flex-grow: 0; /* ไม่ให้เมนูยืดขยายกินพื้นที่ */
        flex-shrink: 0;
        min-width: unset;
    }

    /* Hamburger menu button - VISIBLE and FIXED on Mobile */
    .menu-toggle {
        display: flex; /* Show hamburger button on small screens */
        position: fixed; /* CRITICAL: Fixed position for hamburger button */
        top: 7px; /* ปรับตำแหน่งจากขอบบน (40px header - 25px btn_height)/2 + 5px margin panel_top */
        right: 10px; /* ปรับตำแหน่งจากขอบขวา */
        z-index: 1002; /* ให้ปุ่มอยู่เหนือ Header และ Menu */
        background: transparent; /* ตรวจสอบให้แน่ใจว่าไม่มีพื้นหลังแปลกๆ */
        width: 25px; /* Fixed width */
        height: 25px; /* Fixed height */
        padding: 0; /* Reset padding if any */
    }

    /* Hide desktop search and show mobile search */
    .pt_right.desktop-only-search {
        display: none;
    }

    .pt_right.mobile-only-search {
        display: flex;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 20px;
        border-top: 1px solid rgba(255,255,255,0.2);
        padding-top: 10px;
        flex-direction: column;
        align-items: center;
    }

    /* Mobile menu container (holds nav-menu and mobile search) */
    .mobile-menu-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: fixed; /* CRITICAL: Fixed position for the menu itself */
        top: 40px; /* Start below the fixed header */
        left: 0;
        bottom: 0; /* Extend to bottom of viewport */
        background: linear-gradient(0deg, rgba(27,60,90,1) 0%, rgba(44,102,126,1) 100%);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 999; /* Lower than header and toggle, but higher than main content */
        overflow-y: auto; /* Allow scrolling if menu content is too long */
        overflow-x: hidden; /* Prevent horizontal scroll */

        /* Transition properties */
        max-height: 0;
        opacity: 0;
        transition: max-height 0.5s ease-out, opacity 0.3s ease-out, visibility 0.5s;
        visibility: hidden;
        pointer-events: none; /* Disable interaction when hidden */
    }

    .mobile-menu-container.active {
        max-height: 60vh; /* Make it expand to full viewport height */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-menu {
        flex-direction: column;
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        margin-bottom: 10px;
    }

    .nav-menu li {
        width: 100%;
        text-align: center;
    }

    .nav-menu li a {
        padding: 10px 20px;
        font-size: 14px;
        line-height: normal;
    }

    #search {
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
    #search .div1 {
        font-size: 14px;
        margin-bottom: 5px;
    }
    #search .div2 {
        width: 90%;
        flex-direction: column;
        gap: 10px;
    }
    #search input, #search select {
        width: 100%;
        font-size: 14px;
    }
    #search .div3 {
        width: 90%;
        justify-content: center;
        margin-top: 10px;
    }
    .button span {
        font-size: 14px;
    }

    /* Important: Add padding to the body or main content to prevent it from being hidden behind the fixed header */
    body {
        padding-top: 40px; /* Add padding to body equal to header height */
    }
}
#header .left {
    float: left;
    text-align: left;
    width: 48%;
}
#header .logo img {
    margin-left: 0px;
    margin-bottom: 5px;
    width: 208%;
}
#header .right {
    float: right;
    text-align: right;
    width: 48%;
}
#header .right a {
    margin-left: 15px;
    padding: 1px 0px 2px 20px;
    background-repeat: no-repeat;
    background-position: left center;
    text-shadow: 0px 1px 1px #d0eff3;
}
a.tr_login {
	background: url(../image/login.png) no-repeat;
}
a.tr_logout {
	background: url(../image/logout.png) no-repeat;
}
a.tr_special {
	background: url(../image/dollar.png) no-repeat;
}
a.tr_bookmark {
	background: url(../image/special.png) no-repeat;
}
a.tr_sitemap {
	background: url(../image/sitemap.png) no-repeat;
}

#middle {
    margin-bottom: 30px;
    padding: 8px 8px 8px 8px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

#middle h1 {
    text-align: center;
}
#content {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
#content .top {
    background: rgb(230,238,237);
    margin-top: 3px;
}
#content .top .center{
    background: -webkit-linear-gradient(left, darkcyan, #1d4f91 50%, darkcyan);
    border-radius: 6px;
    padding: 10px 0;
    margin: 0 5px;
    display: block;
}
.searchhead{
    background: -webkit-linear-gradient(left, darkcyan, #1d4f91 50%, darkcyan);
    border-radius: 6px;
    padding: 10px 0;
    margin: 0 5px;
}
#content .middle {
    background: rgb(230,238,237);
    padding: 20px 5px 30px;
}
#content .top:before, #content .top:after, .searchbefore::before, .searchbefore::after {
    content: "";
    display: block !important;
    background: -webkit-linear-gradient(left, transparent, #ffa900 50%, transparent);
    height: 2px;
}
#content h1, .heading {
    color: #FFF;
    font-size: 23px;
    font-family: "Saraban", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px;
    padding: 2px;
    text-align: center;
}
#content .bottom .center {
    height: 5px;
    margin: 0 5px 10px 5px;
}
.list tr td{
    width: 33%;
}
.list td {
    text-align: center;
    vertical-align: top;
    padding: 10px;
    scale:1;
    transition-duration: 0.5s;
}
.list td:hover {
    scale:1.1;
    transition-duration: 0.5s;
    background-color: rgb(200,208,207);
}
.list a {
    font-size: 15px;
}
.list img {
    border: 1px solid #dfdfdf;
}
form table select{
    font-size:16px;
    padding: 4px;
    width: 100%;
    border-radius: 5px;
}
.option-buttons-container {
    display: flex;
    flex-wrap: wrap; /* ทำให้ปุ่มขึ้นบรรทัดใหม่เมื่อไม่พอดี */
    gap: 12px; /* ระยะห่างระหว่างปุ่ม */
}

/* ซ่อน radio input จริงๆ */
.option-radio-input {
    display: none;
}

/* สไตล์ของปุ่ม (label) ในสถานะปกติ (สีขาว, ข้อความสีดำ) */
.option-button {
    display: flex; /* ใช้ flex เพื่อจัดข้อความให้อยู่ตรงกลางได้ง่าย */
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    color: #333333; /* ปรับสีเทาเข้มให้อ่านง่ายขึ้น */
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    flex-grow: 1; /* ทำให้ปุ่มยืดขยายได้ */
    box-sizing: border-box; /* สำคัญมากสำหรับ responsive */
}

/* สไตล์เมื่อผู้ใช้เอาเมาส์ไปชี้ (Hover) */
.option-button:not(.out-of-stock):hover {
    background-color: #f1f1f1;
    border-color: #adadad;
}

/* สไตล์เมื่อปุ่มถูกเลือก (สีเขียวอ่อน) */
.option-radio-input:checked + .option-button {
    background-color: #d4edda; /* สีเขียวอ่อน */
    color: #155724; /* สีเขียวเข้ม */
    border-color: #c3e6cb;
    font-weight: bold;
}

/* สไตล์ของปุ่มที่เต็มแล้ว (สีแดง, ข้อความสีขาว, กดไม่ได้) */
.option-button.out-of-stock {
    background-color: #dc3545; /* สีแดง */
    color: #ffffff;
    border-color: #dc3545;
    cursor: not-allowed;
    opacity: 0.85;
}

/* สไตล์ของข้อความ (เต็มแล้ว) */
.stock-status {
    font-weight: bold;
    margin-left: 5px; /* เว้นระยะเล็กน้อยจากชื่อหลัก */
}


/* ---- Responsive Styles for Mobile (หน้าจอความกว้างน้อยกว่าหรือเท่ากับ 768px) ---- */
@media (max-width: 768px) {
    .option-buttons-container {
        flex-direction: column; /* เปลี่ยนการเรียงเป็นแนวตั้ง */
        gap: 10px; /* ลดระยะห่างแนวตั้งลงเล็กน้อย */
    }

    .option-button {
        width: 100%; /* ทำให้ปุ่มกว้างเต็มพื้นที่ container */
        padding: 15px; /* เพิ่ม padding แนวตั้งให้กดง่ายขึ้น */
        font-size: 16px; /* ขยายฟอนต์ให้อ่านง่าย */
    }
}
.button2 span {
    color: #fff;
    display: block;
    padding: 5px 16px 5px 10px;
    background: rgb(137,182,63);
    border-radius: 5px;
    font-weight: normal;
    margin-right: 10px;
    float: right;
    width: 70px;
    cursor: pointer;
}
.button2 span:hover {
    scale:1.1;
    transition-duration: 0.5s;
}
#footer {
    width: 100%;
    font-size: 11px;
    line-height: 125%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #ddd;
    clear: both;
}
#footer .right {
    width: 49%;
    float: right;
    text-align: right;
}
#provided {
    width: 100%;
    margin-top: -22px;
    margin-bottom: 25px;
    text-align: center;
}
#provided p, #provided a {
    color: #01285a;
    font-size: 11px;
    text-shadow: 0px 0px 1px #6a95e4;
}
@media only screen and (max-width:1006px) {
	.pt_menu {
        width: 100%;
    }
    #search {
        float: left;
        margin-left: 10px;
        width: auto;
    }
    #content h1, .heading {
        font-size: 18px;
    }
}
@media only screen and (max-width:630px) {
    .pc{
        display:none;
    }
    .mb{
        display:block;
    }
    .pt_menu {
        width: 100%;
        display: grid;
    }
    #header .right {
        float: right;
        text-align: right;
        width: 30%;
    }
    #content h1, .heading {
        font-size: 26px;
    }
    .list a {
        font-size: 20px;
    }
    .list tr td {
        width: 80%;
        padding: 20px 0;
    }
    form table select{
    font-size:18px;
}
}
@media only screen and (max-width: 430px) {
    .pt_menu a, .pt_menu a:visited {
        font-size: 18px;
    }
    #search {
        margin-top: 20px;
        display: inline;
    }
    #content h1, .heading {
        font-size: 18px;
        padding: 0 3px;
    }
}


/*หน้ารายละเอียด*/

#breadcrumb {
    float: left;
    margin-left: 5px;
    margin-bottom: 8px;
    color: #444;
}
.content {
    background: #F7F7F7;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 3px 5px 10px;
}
.box-choose{
    background: #FFFFCC; 
    border: 1px solid #FFCC33; 
    padding: 10px; 
    margin: 2px 5px 5px; 
}
.tdes {
    font-size: 16px;
}
.textit{
    font-style: italic;
    color: #999;
    font-size: x-small;
}
.tabs {
    width: 100%;
    height: 28px;
    margin-bottom: 2px;
}
.tabs a {
    float: left;
    display: block;
    padding: 6px 15px 7px 15px;
    margin-right: 2px;
    color: #000;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    z-index: 1;
    position: relative;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background: linear-gradient(0deg, rgba(201,208,207,1) 0%, rgba(255,255,255,1) 100%);
    transition-duration: 0.5s;
    cursor: pointer;
}
.tabs a:hover{
    scale: 1.1;
    transition-duration: 0.5s;
}
.tabs a.selected {
    background: linear-gradient(0deg, rgba(201,208,207,1) 0%, rgba(239,239,239,1) 100%);
    border-bottom: 0px;
    padding-bottom: 8px;
    z-index: 3;
}
.tab_page {
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px;
    display: block;
    z-index: 2;
    margin: 0px 5px 10px;
}
.tab_page p{
    font-size: 16px;
}
input, textarea{
    border-radius: 5px;
}
input[type=radio]{
    cursor: pointer;
}
.tags, .tags a {
    font-style: italic;
    font-size: x-small;
}

.content .button span {
    margin-right: 0px;
    font-size: 14px;
}
.content .button span:hover {
    scale: 1.03;
    transition-duration: 0.5s;
}

/*หน้าค้นหา*/
.checkre tr td{
    font-size: 20px;
}
.checkre input[type=text]{
    font-size: 20px;
    width: 50%;
}
.checkre .button span {
    color: #fff;
    display: inline;
    padding: 5px 12px 5px 10px;
    background: rgb(137, 182, 63);
    border-radius: 5px;
    font-weight: normal;
    margin: 0 10px;
    text-align: center;
    cursor: pointer;
}
.table-result tr:nth-child(1) {
    font-size: 20px;
 }
.table-result tr:nth-child(1) {
   font-size: 20px;
}

.table-result tr:nth-child(even) {
    background: rgb(149, 190, 213);
}
.table-result tr:nth-child(odd) {
    background: rgb(179, 220, 243);
}
@media only screen and (max-width: 830px) {
    .tdes {
        font-size: 14px;
    }
}
@media only screen and (max-width: 770px) {
    .tdes {
        font-size: 13px;
    }
}
@media only screen and (max-width: 430px) {
    .checkre .button span {
        display: block;
        margin: 10px 10px;
    }
}

/*หน้าติดต่อ*/
.content-box{
    display: inline-block; 
    width: 100%;
}
.content-box h2{
    font-size: 20px;
    font-weight: 800;
    margin: 2px 0 10px;
}
.content-box p{
    font-size: 16px;
    font-weight: 300;
    margin: 2px 0;
}
.contact-input{
    font-size: 20px;
    width: 33%;
}
.content tbody span{
    font-size: 20px;
}

@media only screen and (max-width: 830px) {
    .contact-input{
        font-size: 20px;
        width: 50%;
    }
}

@media only screen and (max-width: 430px) {
    .contact-input{ 
        font-size: 20px;
        width: 100%;
    }
}
/*หน้าลงทะเบียนข้อมูล*/
.form-box{
    background: #F7F7F7; 
    border: 1px solid #DDDDDD; 
    padding: 10px; 
    margin-bottom: 10px;
}
.required {
    color: #ff0000;
    font-weight: bold;
}
.error {
    color: #ff0000;
    display: block;
}


/*หน้าข้อมูล*/
.pagination {
    display: inline-block;
    width: 100%;
    background: #d0f0ff;
    margin-bottom: 10px;
    padding: 10px 0;
}
.pagination .links {
    float: left;
}
.pagination .results {
    float: right;
}
.pagination .links, .pagination .results {
    padding: 7px;
}
.pagination .links a {
    border: 1px solid #ccc;
    padding: 4px 7px;
    text-decoration: none;
    color: #000;
}
.pagination .links b {
    border: 1px solid #ccc;
    padding: 4px 7px;
    text-decoration: none;
    color: #000;
    background: #fff;
}
.sort{
    padding: 15px;
}