* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.container-con {
    max-width: 600px;
    margin: 15px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.top-container h4 h3 h2  {
    color: #1c12a8;
    text-shadow: #a09f9f;
    font-size: 30px;
    justify-content: word-spacing ;

}
.hr {
    margin: 2rem;
}
.div {
    display: inline-block;
    background-color: rgb(246, 247, 246);
    color: antiquewhite;
    padding: .5rem 1rem;
    border-radius: 5px;

    text-decoration: none;
}
.div1 {  /*ตัวเอียง หนา*/
    text-shadow: 2px 2px #a09f9f;
    font-size: 2rem;
    color:rgb(54, 11, 199);
    font: italic small-caps bold 1.5em/100% Times;
 }
 .div2 {  /*ตัวเอียง หนา*/
    text-shadow: 2px 2px #a09f9f;
    font-size: 1rem;
    color:rgb(54, 11, 199);
    font: italic small-caps bold 1rem/100% Times;
 }
 .div3 {  /*ตัวเอียง หนา no shadow*/
    font-size: .5rem;
    color:rgb(54, 11, 199);
    font: italic small-caps bold 1.5em/100% Times;
 }
 .div4 { /*ตัวเอียง หนา*/
    text-shadow: 2px 2px #a09f9f;
    font-size: 2rem;
;   color: red;
    font: italic small-caps bold 6.5em/200% Times;
 }
 .div5 { /*ตัวเอียง หนา*/
    font-size: 1rem;
    font: italic small-caps bold 1.5em/20% Times;
    font-display: color="red";
 }
 h3 {  /*หนา ขนาดตัวอักษร รูปแบบตัวอักษร*/
    font: bold 40px/.94 Arial;
 }
 
 h5 {  /*หนา ขนาดตัวอักษร รูปแบบตัวอักษร*/
    font: bold 40px Arial;
 }

.blog {
    display: inline;
    margin: 0 10px;/*ระยะห่างระหว่างกรอบ กับ padding*/
    max-width: 95%;
    padding: 10 10px;/*ระยะห่างระหว่าง padding กับ content*/
    justify-content: space-between;/*สั่งแยกการแสดงผล */
    align-items: center;
    
}
.view {
    margin: 5 5;
    padding: 0 5px;
    display: inline-flex;   /* ให้ไปแสดงผลด้านขวา */
    justify-content: space-between;/*สั่งแยกการแสดงผล */
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    align-items: center;
    text-decoration: none;
}
.view-info .view-btn {
    display: inline-block;
    background-color:rgb(54, 11, 199);
    color: antiquewhite;
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;
}

.blog-title {
    margin: 1rem 5rem;
    margin-bottom: 2rem 0;
}
.blog-item {
    margin: 2rem 0;
}
.blog-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius:  10px;
}

.blog-info h4 {
    text-shadow: 2px 2px #a09f9f;
    font-size: 2rem;
    color:rgb(54, 11, 199);
}
.blog-info h3 {
    font-size: 1rem;
    text-shadow: 2px 2px #caaeae;
    color:rgb(54, 11, 199);
}
.blog-info p {
    font-size: ;
    color:rgb(54, 11, 199);
    text-decoration: none;
}
.blog-info p-1 {
    font-size: ;
    margin: 1rem 0;
    color:rgb(184, 5, 5);
    text-decoration: none;
}
.blog-info  {
    display: contents;
    background-color:rgb(245, 244, 248);
    color: rgb(41, 18, 175);
    margin: 1rem 0;
    padding: .5rem .5rem;
    border-radius: 5px;   
    text-decoration: none;
}
/* .blog-border-red  ใช้ที่ CustomerDashboard.php เพื่อให้เกิดกรอบนอก */
.blog-border {
    display: block;
    background-color:rgb(245, 244, 248);
    color: rgb(41, 18, 175);
    padding: .5rem 1rem;    
    border-radius: 5px;   
    text-decoration: none;
}
.border-1 {
    margin-top: 1rem;
    border-radius: 5px;
    border-style: solid;
    border-color: rgb(216, 231, 250);
}
.blog-btn-white-1 {
    display: flex;
    margin-top: .5rem;
    margin-bottom: .5rem;
    background-color:rgb(245, 244, 248);
    color: rgb(48, 31, 204);
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;
}
.blog-btn-blue {
    display: inline-block;
    background-color:rgb(54, 11, 199);
    color: antiquewhite;
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;  
}
.blog-btn-lite {
    display: inline-block;
    background-color:rgb(214, 231, 247);
    color: rgb(7, 15, 133);
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;  
}
.blog-btn-white {
    display: inline-block;
    background-color:rgb(245, 244, 248);
    color: rgb(48, 31, 204);
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;
}
.blog-btn-red {
    display: inline-block;
    background-color:rgb(201, 13, 13);
    color: antiquewhite;
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;
}
.blog-btn-green {
    display: inline-block;
    background-color:rgb(14, 105, 41);
    color: antiquewhite;
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;
}

.blog-btn-green {
    display: inline-block;
    background-color:rgb(70, 158, 85);
    color: antiquewhite;
    padding: .5rem 1rem;
    border-radius: 5px;
    box-shadow: 2px 2px #caaeae;
    text-decoration: none;
}
/* Add some basic styling for the delete button */
.btn-danger {
    background-color: #a30a19;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
}

.btn-danger:hover {
    background-color: #e40f24;
}
.indent1{  
    text-indent: -30px;  /*ทำให้บรรทัดแรกหลุดออกไปด้านนอกจนมองไม่เห็น*/
 }
 .indent2{  
    text-indent: 30px;  /*บรรทัดแรกย่อหน้าเข้ามาตามจำนวนค่าที่เรากำหนด*/
 }
 .indent3{  
    text-indent: 30%;  /*บรรทัดแรกย่อหน้าเข้ามาตามอัตราส่วนเปอร์เซ็นที่เรากำหนด*/
 }
 .indent4{  
    text-indent: -30%;  /*ทำให้บรรทัดแรกหลุดออกไปด้านนอกตามอัตราส่วนเปอร์เซ็นที่เรากำหนด*/
 }
 .decoration1{  
    text-decoration: line-through;  /*ขีดเส้นข้อความตรงกลาง*/
 }
 .decoration2{  
    text-decoration: overline;  /*ขีดเส้นข้อความด้านบน*/
 }
 .decoration3{  
    text-decoration:bold ;
    text-decoration: underline;  /*ขีดเส้นข้อความด้านล่าง*/
 }
 .decoration4{  
    text-decoration: none;  /*ปกติ ไม่มีขีดเส้นอะไรทั้งนั้น*/
 }

 
.body {
            font-family: Arial, sans-serif;
            margin-top: 50px;
            display: inline-flexbox;
        }

        .form-container {
            max-width: 600px;            
            margin: 30px 30px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #ffffff;
        }
        .form-container a  p {
            color: rgb(34, 7, 158);
            text-decoration: none;
        }

        .form-container p-red {
            color: rgb(158, 7, 7);
            text-decoration: none;
        }
        a {
            box-shadow: inset 0 0 0 0 #8088f8;
            color: #1c12a8;
            padding: 0 .25rem;
            margin: 0 -.25rem;
            transition: color .2s ease-in-out, box-shadow .2s ease-in-out;
          }
          a:hover {
            color: #dddce0;
            box-shadow: inset 200px 0 0 0 #6663f3;;
          }
        .form-container h2 {
            text-align: center;
        }
        .form-container label {
            font-weight: bold;
            display: block;
            margin: 5px 0.5px;
        }
        .form-container input[type="text"],
        .form-container textarea,
        .form-container select {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .form-container input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
        }
        .form-container input[type="submit"]:hover {
            background-color: #4e41c5;
        }

        .product-container {
            margin: 0 10px;/*ระยะห่างระหว่างกรอบ ovd กับ padding*/
            max-width: 95%;
            padding: 0  .5px;/*ระยะห่างระหว่าง padding กับ content*/
            align-items: center;
        }
        .product-con{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 1rem;
        }
        @media screen and (max-width: 650px) {
            .product-con {
                grid-template-columns: 1fr 1fr;
                grid-gap: 0;
            }
        }
        @media screen and (max-width: 400px) {
            .product-con {
                grid-template-columns: 1fr ;
                grid-gap: 0;
            }
        }
        
        .product-title {
            margin: 1rem 0;
            margin-bottom: 2rem 0;
        }
        .product-item {
            margin: 2rem 0;
        }
        .product-item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius:  10px;
        }

        .product-info h4 {
            text-shadow: 2px 2px #a09f9f;
            font-size: 2rem;
            color:rgb(54, 11, 199);
        }
        .product-info h3 {
            font-size: 1rem;
            text-shadow: 2px 2px #caaeae;
            color:rgb(54, 11, 199);
        }
        .product-info p {
            font-size: ;
            margin: 1rem 0;
            color:rgb(5, 5, 133);
        }
        .product-info p1 {
            font-size: ;
            margin: 1rem 0;
        }
        .product-infop2 { /*ตัวเอียง หนา*/
            font-size:5cap;
            font: italic small-caps bold 1.5em/5% Times;
            color: #c20a14;
         }
        .product-btn a {
            display: inline-block;
            background-color:rgb(54, 11, 199);
            color: rgb(247, 247, 248);
            padding: .5rem 1rem;
            border-radius: 5px;
            box-shadow: 2px 2px #caaeae;
            text-decoration: none;
        }

        .card {
            width: 350;
            border: 1px solid #f9f9f9;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        
        }
        .card-img img {
            width: 80%;
            height: 80%;
            border-radius: 5px;
            object-fit: cover;
        }
        img {
            width:inherit;
        }