/* START Main css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121212; /* สีพื้นหลังธีมมืด */
    color: #b0b0b0; /* #e0e0e0 สีข้อความในธีมมืด */
    font-size: 18px; /* เพิ่มขนาดตัวอักษร */
}

a {
    text-decoration: none;
}

a {
    text-decoration:none;
    color:#a8a86f;
}
  
a:hover{
      color:#f8fcc4;
}

h1 {
    font-size: 22px;
    font-weight: normal; 
}

.container {
    max-width: 100%; /* 1200px */
    margin: 0 auto;
    padding: 10px; /* ลด padding */
    display: flex;
    flex-wrap: wrap;
    justify-content: left; /*center */
}

.topic {
    width: calc(100% - 0px);
    margin: 10px;
    background-color: #1e1e1e; /* สีพื้นหลังของสินค้าในธีมมืด */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease;
    padding: 15px 25px 20px 15px;
    text-align:left!important
}

.topic-cont {
    width: calc(100% - 0px);
    text-align:left!important
}

.product {
    width: calc(25% - 20px);
    margin: 10px;
    background-color: #1e1e1e; /* สีพื้นหลังของสินค้าในธีมมืด */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.product:hover {
    transform: translateY(-5px);
}

.product img {
    width: 100%; /* กำหนดให้รูปภาพมีความกว้างเต็มพื้นที่ */
    height: auto; /* กำหนดความสูงของรูปภาพ */
    object-fit: cover; /* ใช้ให้รูปภาพปรับขนาดตามขนาดกล่อง */
    display: block;
    border-bottom: 1px solid #333; /* สีขอบล่างของรูปภาพในธีมมืด */
}

.product-info {
    padding: 10px 3px 0px 3px;
}

.product-title {
    font-size: 18px; /* เพิ่มขนาดตัวอักษรของชื่อสินค้า */
    font-weight: normal; /* bold */
    margin: 0px 0px 5px 0px;
    color: #e0e0e0; /* สีข้อความของชื่อสินค้าในธีมมืด */
}

.product-price,
.product-brand,
.product-category,
.product-search {
    font-size: 18px; /* เพิ่มขนาดตัวอักษร */
    color: #b0b0b0; /* สีข้อความของยี่ห้อ หมวดหมู่ และคำค้นในธีมมืด */
    /*margin-bottom: 5px;*/
}

.product-date-add, 
.product-update {
    font-size: 18px;
    color: #b0b0b0;
}

.product-title a{
    text-decoration:none;
    color:#a8a86f;
}
  
.product-title a:hover{
      color:#f8fcc4;
}

.product-price a{
    font-size: 18px;
    color:#ffffff;
}

.product-price a:hover{
    font-size: 18px;
    color:#fd0000;
}

.product-brand a{
    color: #69B532; /* #adff2f สีลิงค์ของยี่ห้อ */
}

.product-brand a:hover{
    color:#adff2f;
}

.product-category a{
    color: #69B532; /* #ffa07a สีลิงค์ของหมวดหมู่ */
}

.product-category a:hover{
    color:#adff2f;
}


.product-search a {
    color: #ff6600; /* #87cefa สีลิงค์ของคำค้น */
}
  
.product-search a:hover{
    color:#ffe6d5;
}

.s-mobile-hide{
    display: block;
}

.s-input{
    padding:8px;
    display:block;
    border:none;
    border-bottom:1px solid #ccc;
    width:95%;
    font-size: 16px;
}

.s-border{
    border:1px solid #ccc!important
}

.s-round-large{
    border-radius:8px
}

.s-button{
    border:none;
    display:inline-block;
    padding: 5px 10px 5px 10px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
    font-size: 16px;
}

.s-green{
    color:#fff!important;
    background-color:#4CAF50!important
}

.s-show{
    display:block!important
}

.s-check,.s-radio{
    width:24px;
    height:24px;
    position:relative;
    top:6px
}

.s-medium{
    font-size:20px!important
}

.s-large{
    font-size:22px!important
}

.s-hover-green:hover{
    color:#fff!important;
    background-color:#4CAF50!important
}

.s-hide{
    display:none!important
}

.s-main-link{
    float:left;
    width:32%
}

.s-button:hover{
    color:#000!important;
    background-color:#ccc!important
}

.s-block{
    display:block;
    width:100%
}

.s-left-align{
    text-align:left!important
}

.s-small {
    color:#b0b0b0;
    font-size: 12px;
}

.s-row-padding:after,.s-row-padding:before{
    content:"";
    display:table;
    clear:both
}




.less-more-cont {
	overflow: hidden; 
	height: 150px;

}
.tag-less-more-cont {
	overflow: hidden; 
	height: 150px;

}
.less-more-cont img {
	width: 30%; 
    height: auto;
}

.tag-less-more-cont img {
	width: 100%; 
    height: auto;
}


.less-more-button {
    width: 100px;
    margin: 0px  0px  0px 0px;
    padding:5px 5px 5px 5px;
    text-align: center;
    font-size:18px;
    background-color:#008000;
    color:#FFFFFF;
    cursor: pointer;
}


.reset-style, .reset-style * {
    all: revert;
}

@media (max-width: 991px) {
    .product {
        width: calc(33.33% - 20px);
    }
    .s-main-link{
        float:left;
        width:48%
    }
}

@media (max-width: 767px) {
    .product {
        width: calc(50% - 20px);
    }
    .s-main-link{
        float:left;
        width:99%
    }
    .s-mobile-hide{
        display: none;
    }
}

@media (max-width: 479px) {
    .container {
        padding: 0; /* เอา padding ของ container ออก */
    }

    .product {
        width: calc(100% - 10px); /* ลด margin ให้ชิดขอบ */
        margin: 5px; /* ลด margin ให้เหลือน้อยที่สุด */
    }

    .product-info {
        padding: 10px; /* ลด padding ใน product-info */
    }

    .s-main-link{
        float:left;
        width:99%
    }
}
/* END Main css */

/* END Responsive Navigation Bar css */
nav {
    background-color: black;
    box-shadow: 1px 0px 10px 0px gray;
    border-top: 2px solid #85888C;
    border-bottom: 2px solid #85888C;
    position: sticky;
    top: 0;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px 15px 18px;
    margin-bottom: 10px;
}

.logo {
    font-size: 1.5rem;
}

ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
    margin-right: 20px;
}

ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

ul li a:hover {
    color: lightgreen;
}

.checkbtn {
    font-size: 25px;
    color: white;
    cursor: pointer;
    display: none;
}

#check {
    display: none;
}

@media (max-width: 768px) {
    .checkbtn {
        display: block;
        order: 1;
        margin: 2px -10px -5px 0px;
    }

    ul {
        position: fixed;
        top: 55px;
        right: -100%;
        background-color: black;
        width: 100%;
        height: auto; /* 100vh */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.3s;
    }

    ul li {
        margin: 20px 0;
    }

    ul li a {
        font-size: 18px;
    }

    #check:checked ~ ul {
        right: 0;
    }
}
/* END Responsive Navigation Bar css */