.iappcreation-home .home-navigation-bar li.active{
    color: rgb(236, 171, 180);
    font-family: 'SukhumvitTHBold';
}

.iappcreation-home .home-navigation-bar-active-line{
    height: 4px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.iappcreation-home .home-navigation-bar li.active .home-navigation-bar-active-line{
    background-color: rgb(236, 171, 180);
}

.iappcreation-home .home-navigation-bar {
    list-style-type: none;
    margin: auto;
    padding: 0;
    position:relative;
}

.iappcreation-home .home-navigation-bar li{
    display: inline-block;
    position:relative;
    width:32%;
    text-align: center;
    padding: 8px 0;
    font-size: 1.2em;
    font-weight: 500;
}

.iappcreation-home ul.square-products-container{
    margin: 0;
} 

.iappcreation-home ul.square-products-container li.square-product{
    display: inline-block;
    width: 32%;
} 

.iappcreation-home ul.square-products-container li.square-product:last-child{
    margin-top: 20px;
} 

.iappcreation-home ul.square-products-container li.square-product img{
    margin: auto;
    width: 90%;
} 

.iappcreation-home .howto-banner{
    margin: 20px 0;
    border-radius: 4%;
}

.iappcreation-home ul.home-navigation-bar:hover{
    cursor: pointer;
}

.iappcreation-home .square-products-container{
    list-style: none;
}


.iappcreation-home ul.products{
    overflow-y: hidden;
}

.iappcreation-home{
    overflow: hidden;
}


body.home .hentry,
body.home .site-main{
    margin-bottom:0;
}


.iappcreation-home .square-banner{
    width: 49%;
    display: inline-block;
}

.iappcreation-home .square-banner img{
    margin: auto;
    border-radius: 10px;
    width: 100%;
}

.iappcreation-home div.square-banner:nth-child(2n){
    padding-left: 10px
}

.iappcreation-home div.square-banner:nth-child(2n+1){
    padding-right: 10px
}

/* ตั้งแต่แถวสองเป็นต้นไปจะมี Margin ด้านบนเพื่อให้มี Gap กับแถวบน */
.iappcreation-home div.square-banner:nth-child(n+3){
    margin-top: 20px
}

/* ในหน้า Home จะเป็นการ edit หน้าจาก admin page และตัวระบบจะทำการเติม <p></p> ให้เองตอนกด Save ทำให้เกิด Gap จาก tag p  จึงต้องทำการ set ค่า display ให้เป็น none */
.iappcreation-home p{
    margin: 0 !important;
    display: none !important;
}

.iappcreation-home ul.products li.product .woocommerce-loop-product__title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}