/* Table OF Contents
------------------------------------
1 > GENERAL
------ typography
------ Buttons
------ Inputs
------ Lists
------ Sections
------ Breadcrumb
2 > HEADER
------ Top header
------ Logo
------ Search header
------ Account header
------ Cart header
3 > NAVIGATION
------ Category nav
------ Menu nav
------ Dropdowns
------ Mobile Nav
4 > BANNERS
5 > HOME SLIDER
6 > PRODUCT
------ Single product
------ Product Grid
------ Widget product
------ Product slick
7 > PRODUCTS PAGE
------ Aside
------ Store
8 > PRODUCT DETAILS PAGE
------ Product view
------ Product details
------ Product tab
9 > CHECKOUT PAGE
10 > FOOTER
11 > SLICK
------ Arrows
------ Dots
12. > RESPONSIVE
13. > IMAGE
14. > NOTIFY
15. > ADMIN
------------------------------------*/

/*=========================================================
        01 -> GENERAL
===========================================================*/

body{
    margin: auto;
    font-family: "thongterm",sans-serif;
    font-weight: 300;
    font-style: normal;
}

p{
    margin: 0px;
}

.akt{
    font-family: aktiv-grotesk-thai, sans-serif;
}

/*----------------------------*\
        Typography
\*----------------------------*/

.indent{
    text-indent: 3vw;
}

a:hover{
    color: #ff0000 !important;
}


h1, h2{
    font-family: aktiv-grotesk-thai, sans-serif;
    font-weight: 600;
}
/*----------------------------*\
        Container
\*----------------------------*/

.w-85{
    width: 85%;
    margin: inherit;
}
.w-80{
    width: 80%;
    margin: inherit;
}

.w-84{
    width: 84%;
    margin: inherit;
}

.w-70{
    width: 70%;
    margin: inherit;
}

.w-60{
    width: 60%;
    margin: inherit;
}

.w-40{
    width: 40%;
    margin: inherit;
}

.w-30{
    width: 30%;
    margin: inherit;
}


.w-25{
    width: 25%;
    margin: inherit;
}

.w-20{
    width: 20%;
    margin: inherit;
}
.w-16{
    width: 16%;
    margin: inherit;
}
.w-15{
    width: 15%;
    margin: inherit;
}
.w-10{
    width: 10%;
    margin: inherit;
}
.w-5{
    width: 5%;
    margin: inherit;
}

/*=========================================================
        02 -> HEADER
===========================================================*/



/*=========================================================
        03 -> NAVIGATION
===========================================================*/

/*----------------------------*\
        fixed
\*----------------------------*/

.nav-fixed{
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.301) 0px 3px 8px;
    z-index: 99999;
}

.nav-fixed a{
    font-family: aktiv-grotesk-thai, sans-serif;
    padding: 0px 24px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    color: #000000;
    transition: 0.3s;
}

nav a:hover{
    text-decoration: underline;
}

/*----------------------------*\
        scroll
\*----------------------------*/


.nav-scroll{
    display: none;
    transition: transform 0.3s ease-in-out, background-color 0.3s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
}

.nav-scroll a{
    font-family: aktiv-grotesk-thai;
    padding: 0px 24px;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    color: #000000;
    transition: 0.3s;
}


.scroll-inner{
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    background-color: #ffffff;
    padding: 12px 24px;
    margin: 8px 36px;
    border-radius: 30px;
}

.nav-scroll.scrolled {
    display: unset;
    position: fixed; 
    top: 1;
    animation: slideDown 0.3s ease-out forwards;
}


@keyframes slideDown {
        from {
            transform: translateY(-100%); /* เริ่มจากซ่อนอยู่ด้านบน */
        }
        to {
            transform: translateY(0); /* เลื่อนลงมาที่ตำแหน่งปกติ */
        }
    }

.nav-line{
    width: 100%;
    height: 10px;
    background-color: #525252;
}

.foot-title p{
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    padding-bottom: 24px;
}

footer{
    padding: 12px 0px;
    margin: auto;
    background-color: red;
    border-top: rgb(255, 217, 0) solid 3px;

}

img.icon{
    width: 36px;
    height: 36px;
    margin-right:18px ;
}

img.icon-social{
    width: 42px;
    height: 42px;
    margin-right:18px ;
}

.foot-icon li, .social{
    padding-bottom:8px ;
}

p.icon{
    font-size: 20px;
    margin: 0px;
    color: #ffffff;
}

.pro-star{
    padding: 6px 0px;
}
.pro-star a{
    font-size: 20px;
    margin: 0px;
    color: #ffffff;
    text-decoration: none;
}

.pro-star a:hover{
    text-decoration: underline;
    color: #ffffff !important;
}

.social{
    padding: 6px;
    border: 2px solid #ffffff;
    border-radius: 50px;
    margin-bottom: 16px;
    text-decoration: none;
}


/*----------------------------*\
        product
\*----------------------------*/

.dl-inner{
    border-radius: 8px;
    padding: 12px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    justify-items: center;
}


footer{
    margin-top: 32px;
}

.about{
    padding-top: 36px;
}

.about-1{
    background: #ff303e;
background: radial-gradient(circle, rgba(255, 48, 62, 1) 60%, rgba(209, 0, 0, 1) 100%);
}

.about-2, .about-3{
    display:flex;
    flex-wrap: nowrap;
}

.about-cell img{
    width: 100%;
}

.topic{
    font-size: 28px;
    font-weight: 600;
}

.about-cell-w, .about-1{
    color:#ffffff;
    font-size: 18px;
    padding: 24px;
    align-content: center;
    justify-items: center;
}

.about-cell-b{
    color:#1d0101;
    font-size: 18px;
    padding: 24px;
    align-content: center;
    justify-items: center;
}

.pro-cell{
    width: 25%;
}

.cat-more-cell{
    width: 25%;
    padding: 0px 28px;
}
.cell2-2{
    background: #fff5f9;
background: linear-gradient(203deg, rgba(255, 245, 249, 1) 40%, rgba(255, 179, 186, 1) 100%);
}

.cell2-1{
    background: #ffc7c7;
background: linear-gradient(203deg, rgba(255, 199, 199, 1) 40%, rgba(242, 92, 107, 1) 100%);
}

.cell3-1{
    background: #ff8a7d;
background: linear-gradient(325deg, rgba(255, 138, 125, 1) 20%, rgba(235, 72, 66, 1) 80%);
}

.cell3-2{
    background: #ff424f;
background: linear-gradient(325deg, rgba(255, 66, 79, 1) 20%, rgba(255, 71, 71, 1) 80%);
}
/*----------------------------*\
        catalogue
\*----------------------------*/

.product{
    width: 20%;
    padding: 12px;
}

.product-inner{
    padding: 12px;
}

.product a, .pro-cell a{
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    transition-duration: 0.3s;
}

.product img, .pro-cell img{
    width: 100%;
    padding-bottom: 16px;
}

.pro-cell{
    padding: 0px 8px;
}

.pro-cell p{
    font-size: 18px;
    font-weight: 600;
}

img{
    max-width: 100%;
}

.product-title{
    padding-left: 42px;
    padding-top: 24px;
}


/*----------------------------*\
        sidebar menu
\*----------------------------*/

.sidebar{
    padding: 24px 24px 12px 36px;
}

div.breadcrumb{
    padding-left: 32px;
}

.sidebar a{
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    transition-duration: 0.3s;
}

.more{
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    transition-duration: 0.3s;
}

.spacer{
    width: 100%;
}

.vdo-cell{
    padding: 12px 8px;
    width: 33%;
}