body {
    font-family: Tahomalocal, "Times New Roman", Times, serif;
    /*background-color: #fef9e7;*/
}

@font-face {
    font-family: Tahomalocal;
    src: local('Tahomalocal'),
        url("../../assets/font/tahoma.ttf") format("truetype");
}

p,
br,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    padding: 0px;
}

a {
    color: #000000;
    text-decoration: none;
}

#wrapper {
    position: relative;
    margin: 0px auto 0px auto;
    padding: 0 20px 0 20px;
    /*min-width: 650px;*/
    /*max-width: 1210px;*/
    /*width: 1200px;*/
    /*border:1px solid blue;*/
    transition: margin-left .5s;
}

/*****************
/* sticky-top
*****************/
#sticky-top {
    position: sticky;
    top: 0;
    /* bottom: 0; change top to bottom for fixed at bottom*/
    z-index: 100;
    min-width: 650px;
    max-width: 1210px;
    /*width: 1200px;*/
    border-radius: 0px 0px 3px 3px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#brand-top {
    text-align: center;
    padding: 10px 0 10px 0;
    /*border: 1px solid red;*/
    border-radius: 0px 0px 30px 30px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: none;
}

/*****************
/* .contact-us-top
*****************/
#contact-us-top {
    display: flex;
    justify-content: center;
}

#contact-us-top>a {
    display: flex;
    text-decoration: none;
    align-items: center;
    font-weight: bold;
    font-size: 35px;
    /*1.5em;*/
    background-color: #FFFFFF;
    padding: 0px 3px 0px 0px;
    margin: 5px 2px 10px 3px;
    border: 1px solid;
    border-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

#contact-us-top>a>img {
    width: auto;
    height: 45px;
}

/**********************
* navbar 
***********************/
.navbar {
    /*display: flex;
    flex-direction:row;*/
    overflow: hidden;
    /*background-color: #333;*/
    background-color: #003366;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: middle;
}

.navbar>a.menu-item {
    float: left;
    font-size: 20px;
    font-weight: bold;
    /*color: white;*/
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a.menu-item:hover {
    background-color: #004080;
}

.navbar>a>img {
    padding: 14px 16px;
    margin: auto;
}

/*
.navbar>button {
    text-align: center;
    padding: 14px 16px;
}
*/

.openbtn {
    font-size: 1.7em;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
    float: right;
}

.openbtn:hover {
    background-color: #444;
}

.item-sm {
    display: none;
}

/**********************
* menu-group
***********************/
.menu-group {
    /*color: inherit;*/
    background-color: #003366;
}

.menu-group>a {
    float: left;
    font-size: 20px;
    font-weight: bold;
    color: inherit;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/**********************
* dropdown
***********************/
.dropdown-1,
.dropdown-2,
.dropdown-3,
.dropdown-4 {
    /*float: left;*/
    overflow: hidden;
}

.dropbtn-1,
.dropbtn-2,
.dropbtn-3,
.dropbtn-4 {
    /*color: inherit;*/
    font-size: 18px;
    font-weight: bold;
}

.menu-btn {
    color: #ffffff;
}

.dropdown-1 .dropbtn-1,
.dropdown-2 .dropbtn-2,
.dropdown-3 .dropbtn-3,
.dropdown-4 .dropbtn-4 {
    cursor: pointer;
    border: none;
    outline: none;
    /*color: white;*/
    padding: 14px 16px;
    background-color: inherit;
    /*font-size: 16px;*/
    /*font-family: inherit;*/
    margin: 0;
}

.dropdown-1:hover,
.dropbtn-1,
.dropbtn-1:focus,
.dropdown-2:hover,
.dropbtn-2,
.dropbtn-2:focus,
.dropdown-3:hover,
.dropbtn-3,
.dropbtn-3:focus,
.dropdown-4:hover,
.dropbtn-4,
.dropbtn-4:focus {
    background-color: #004080;
}

.dropdown-content {
    display: none;
    /*position: absolute;*/
    /*color: #000000 !important;*/
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content {
    max-height: 300px;
    overflow: scroll;
}

.dropdown-content a {
    float: none;
    /*color: inherit;*/
    color: #000000 !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    /*text-align: left;*/
    text-align: center;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

.overlay {
    color: #FFFFFF;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    /*color: #f1f1f1;*/
    background-color: #004080;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
    .overlay a {
        font-size: 20px
    }

    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

/**********************
* #slideshow
***********************/
#slideshow {
    min-height: 300px;
    display: none;
}

/**********************
* menu-footer
***********************/
#menu-footer {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#menu-footer>ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#menu-footer li {
    display: inline;
    float: left;
    border: 1px solid #bbb;
}

#menu-footer li a {
    background-color: #333;
    display: block;
    color: white;
    text-align: center;
    padding: 4px 6px;
    text-decoration: none;
}

#menu-top li a:hover {
    background-color: #111;
}

/*************************
* form-search
*************************/
#form-search {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 5px auto 0 auto;
    padding: 5px 10px 10px 10px;
    /*background-color: #229954;*/
    border: 1px solid;
    border-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#form-search>select,
input {
    /*appearance: none;*/
    /*<= hide arrow*/
    /* safari */
    /*-webkit-appearance: none;*/
    /*<= hide arrow*/
    /* other styles for aesthetics */
    /*width: 100%;*/
    /*font-size: 1.2rem;*/
    /*padding: 0.3em 0em 0.3em 0.1em;*/
    background-color: #fff;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #000;
    cursor: pointer;
    margin: 5px 5px 0 5px;
}

#form-search>#platetxt {
    flex: 47%;
}

#form-search>#platenum {
    flex: 47%;
}

#form-search>#price {
    flex: 20%;
}

#form-search>#summary {
    flex: 20%;
}

#form-search>#category_sq {
    flex: 20%;
}

#form-search>button {
    flex: 30%;
    font-size: 2em;
    font-weight: bold;
    margin: 20px 10px 10px 10px;
}

.btn-gradient,
.btn-gradient2 {
    display: block;
    /*border-color:#6a3093; /* purple-drak */
    /*background-image: linear-gradient(to right, #6a3093 0%, #a044ff  51%, #6a3093  100%); /* purple-drak ,pulple , purple-drak*/
    background-size: 200% auto;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    border: 1px solid;
    border-radius: 10px;
    /*margin: 10px;*/
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    /*color: white;*/
}

.btn-gradient:hover,
.btn-gradient2:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

/******************************/
/* Go to Top Page Button
/******************************/
#goToppage {
    display: none;
    position: fixed;
    bottom: 35px;
    right: 50px;
    z-index: 99;
    border: none;
    outline: none;
}

/*************************
* for tabean-list display
* (tabean is image ifle)
*************************/
.tabean-contianer {
    min-width: 688px;
    display: flex;
    flex-flow: row wrap;
    row-gap: 2px;
    margin: auto;
    /*border:1px solid red;*/
}

.tabean-contianer>h1 {
    flex: 100%;
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 10px;
    padding: 2px 0 2px 20px;
    /*color: #FFFFFF;*/
    /*background-color:#0b5345;*/
    /*border-color:#FFFFFF;*/
    border-radius: 10px 10px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.tabean_box {
    margin: 0 1px 0 1px;
    background-color: #FFFFFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /*border: 1px solid;*/
    border-color: #FFFFFF;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.tabean-img {
    position: relative;
    /* ตั้งค่าให้เป็นตัวอ้างอิง */
    width: 170px;
    /*190px;*/
    height: 87px;
    /*auto;*/
    text-align: center;
}

.tabean-img>img {
    /*border: 1px solid;*/
    border-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.tabean-text-onplate {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 170px;
    /*190px;*/
    font-size: 3.8em;
    background-color: rgba(0, 0, 0, 0);
    /* transparent background */
}

.tabean-price-onplate {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 170px;
    /*190px;*/
    font-size: 2.5em;
    background-color: rgba(0, 0, 0, 0);
    /* transparent background */
}

.tabean_summary {
    z-index: 99;
    position: absolute;
    /*left: 161px;*/
    right: 0px;
    /*top:57px;*/
    bottom: 0px;
}

@font-face {
    font-family: tabean;
    src: local('tabean'),
        url("../../libs/dadidea.mog") format("truetype");
    /* Other properties like font-weight, font-style, font-display can also be included */
}

/*url("../../assets/font/tahoma.ttf") format("truetype");*/
.tabean-text-onplate-XXXX {
    /*position: absolute;*/
    margin: 0 auto 0 auto;
    text-align: center;
    font-size: 3.8em;
    background-color: rgba(0, 0, 0, 0);
    /* transparent background */
}

.pickup {
    color: #034f17;
}

.van {
    color: #22078f;
}

.tabean-price {
    margin: 0 auto 0 auto;
    font-weight: bold;
    width: 95%;
    text-align: center;
    font-size: 1.5em;
    background-color: #FFFFFF;
    border: 1px solid;
    border-color: #FFFFFF;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

/****************
* tabean-detail
****************/
#tabean-detail {
    position: relative;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 0.3em auto 1em auto;
    padding: 0.5em 0 1em 0;
    border: 1px solid;
    border-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#tabean-detail>picture>img {
    object-fit: contain;
    border: 1px solid;
    border-color: #818181;
    border-radius: 18px;
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;*/
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

/*****************************
* For information       
******************************/
#info {
    position: relative;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
}

#info .info_h1 {
    font-size: 1.2em;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    background-color: #9932CC;
}

#info .info_h2 {
    font-size: 1.1em;
    color: #006400;
}

/*****************************
* For payment       
******************************/
#payment {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
}

#payment .pay_h1 {
    font-size: 1.2em;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    background-color: #666666;
}

#payment .pay_h2 {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

#payment h1 {
    font-size: 1.5em;
    font-weight: bold;
    color: blue;
    margin-top: 0;
    margin-bottom: 0;
}

#pay1 {
    margin-top: 1.5em;
    margin-left: 1em;
    float: left;
    width: 30%;
    text-align: center;
    font-size: 1.1em;
    border: 1px solid green;
}

#pay2 {
    margin-top: 1.5em;
    margin-right: 1em;
    float: left;
    width: 30%;
    text-align: center;
    font-size: 1.1em;
    border: 1px solid green;
}

/*****************************
* For method           
******************************/
#method {
    position: relative;
    margin: 10px 0 0 0;
}

#method table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #228B22;
}

#method tr td {
    border: 1px solid #228B22;
}

#method th {
    text-align: center;
    border: 1px solid #228B22;
}

#method h1 {
    font-size: 1.5em;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    padding: 3px 0 3px 0;
    background-color: #228B22;
}

span.h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: #000000;
    text-align: center;
    padding: 0 0 0 0;
}

#method .group1 {
    width: 50%;
    background-color: #A9A9A9;
}

#method .group2 {
    background-color: #FFB6C1;
}

#method .group3 {
    background-color: #98FB98;
}

#method .group4 {
    background-color: #C5FFC5;
}

/******************************
* download_doc             
*******************************/
#download_doc {
    position: relative;
    margin: 10px 0 10px 0;
}

#download_doc_header {
    font-size: 1.5em;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    background-color: #59a3fc;
}

#download_doc_list table {
    margin-right: auto;
    margin-left: auto;
    border-collapse: collapse;
    width: 100%;
    border: 1px solid green;
}

#download_doc_list td {
    border: 1px solid #73C0D4;
    height: 1.7em;
}

.clear_float {
    clear: both;
}

/* สไตล์พื้นฐานสำหรับปุ่มทั้งหมด */
/*
-สีน้ำเงิน/ฟ้า (Primary/Info): การกระทำหลัก, ข้อมูลทั่วไป, ไปต่อ, ดูรายละเอียด
    <button class="btn-primary">ดำเนินการต่อ</button>
-สีเขียว (Success/Add): การกระทำที่สำเร็จ, เพิ่ม, ยืนยัน, ทำรายการต่อ
    <button class="btn-success">เพิ่มรายการ</button>
-สีแดง (Danger/Delete): การกระทำอันตราย, ลบ, ยกเลิก, หยุด
    <button class="btn-warning">แก้ไขข้อมูล</button>
-สีเหลือง/ส้ม (Warning/Edit): แก้ไข, ตั้งค่า, แจ้งเตือน, ระวัง
    <button class="btn-danger">ลบรายการ</button>
-สีเทา/ขาว (Secondary/Default): การกระทำรอง, ปิด, กลับ, ปุ่มทั่วไปที่ไม่เน้น
    <button class="btn-secondary">กลับหน้าหลัก</button>
*/
.btn {
    border: none;
    padding: 10px 20px;
    margin: 0px;
    /*5px*/
    border-radius: 5px;
    /* มุมมนเล็กน้อย */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
    color: white;
    /* เริ่มต้นใช้ตัวอักษรสีขาว */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* เพิ่มเงาเล็กน้อย */
}

.btn:hover {
    transform: translateY(-1px);
    /* ขยับขึ้นเล็กน้อยเมื่อโฮเวอร์ */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* เพิ่มเงาให้ชัดขึ้น */
}

/* --- 1. สีน้ำเงิน/ฟ้า (Primary/Info) --- */
/* การกระทำหลัก, ไปต่อ, ดูรายละเอียด */
.btn-primary {
    /* สีน้ำเงินมาตรฐาน */
    background-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    /* เข้มขึ้นเมื่อโฮเวอร์ */
}

/* --- 2. สีเขียว (Success/Add) --- */
/* เพิ่ม, ยืนยัน, ทำรายการต่อ */
.btn-success {
    background-color: #28a745;
    /* สีเขียวมาตรฐาน */
}

.btn-success:hover {
    background-color: #218838;
    /* เข้มขึ้นเมื่อโฮเวอร์ */
}

/* --- 3. สีแดง (Danger/Delete) --- */
/* ลบ, ยกเลิก, หยุด, อันตราย */
.btn-danger {
    background-color: #dc3545;
    /* สีแดงมาตรฐาน */
}

.btn-danger:hover {
    background-color: #c82333;
    /* เข้มขึ้นเมื่อโฮเวอร์ */
}

/* --- 4. สีเหลือง/ส้ม (Warning/Edit) --- */
/* แก้ไข, ตั้งค่า, แจ้งเตือน */
.btn-warning {
    background-color: #ffc107;
    /* สีเหลือง/ส้มมาตรฐาน */
    color: #333;
    /* เปลี่ยนสีตัวอักษรเป็นสีเข้มเพื่อให้ตัดกับสีพื้นหลัง */
}

.btn-warning:hover {
    background-color: #e0a800;
    /* เข้มขึ้นเมื่อโฮเวอร์ */
}

/* --- 5. สีเทา/ขาว (Secondary/Default) --- */
/* การกระทำรอง, ปิด, กลับ */
.btn-secondary {
    background-color: #6c757d;
    /* สีเทามาตรฐาน */
}

.btn-secondary:hover {
    background-color: #5a6268;
    /* เข้มขึ้นเมื่อโฮเวอร์ */
}