@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap'); 

:root{
    --header-height: 3.5rem;

    --title-color: #1b2332cf;
    --text-color: hsl(250, 8%, 35%);
    --body-color: hsl(0deg 0% 89.76%);
	--nav-color: hsl(0deg 0% 95% / 90%);
    --container-color: #FFFFFF;
    --shadow: hsla(0, 0%, 15%, .1);
    --scrollbar-color: hsl(250, 12%, 90%);
    --scrollbar-thumb-color: hsl(250, 12%, 80%);

    --body-font: 'Poppins', sans-serif;
    --signature-font: 'Turret Road', sans-serif;
    --biggest-font-size: 4rem;
	--hh1-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
	--small-tag-font-size: .7rem;
    --smaller-font-size: .813rem;

    --font-medium: 500;
    --font-bold: 600;

    --mb0-5: .5rem;
    --mb0-75: .75rem;
    --mb1: 1rem;
    --mb1-5: 1.5rem;
    --mb2: 2rem;
    --mb2-5: 2.5rem;
    --mb3: 3rem;

    --z-tooltip: 10;
    --z-fixed: 100;
}


@media screen and (max-width: 992px){
    :root{
        --biggest-font-size: 3rem;
		--hh1-font-size: 2rem;
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: 1rem;
        --normal-font-size: .938rem;
        --small-font-size: .813rem;
		--small-tag-font-size: .4rem
		
        --smaller-font-size: .75rem;
    }
}

/* Color 1 */
:root {
    --hue: 0;
    --first-color: hsl(var(--hue), 88%, 61%);
    --first-color-alt: hsl(var(--hue), 88%, 58%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, input, button { font-family: var(--body-font); font-size: var(--normal-font-size); }
    button, input { border: none; outline: none; }
        body { background-color: var(--body-color); color: var(--text-color); }
        button { cursor: pointer; }
h1, h2, h3, h4 { color: var(--title-color); font-weight: var(--font-medium); }
ul { list-style: none; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

.section { padding: 5rem 0 2rem; }
.section-title, .breadcrumb-title, .breadcrumb-subtitle { text-align: center; }
.section-title, .breadcrumb-title { font-size: var(--hh1-font-size); font-weight: 900; letter-spacing: 2px; color: #3F4556;}
.breadcrumb-subtitle { margin-bottom: var(--mb1); }
.container { max-width: 968px; margin-left: auto; margin-right: auto; }
.grid { display: grid; }
.button { display: inline-block; 
/*background: var(--first-color);*/
color: #FFFFFF; padding: 1rem 1.75rem; border-radius: .5rem; font-weight: var(--font-medium); transition: .3s; }
    .button:hover {
/*	background: var(--first-color-alt); */
	}
.button-icon { font-size: 1.25rem; }
.button-link { color: var(--title-color); }
.button-flex { display: inline-flex; align-items: center; column-gap: 0; }
.swiper-pagination { position: initial !important; margin-top: 0.3rem; }
.swiper-pagination-bullet { width: 5px !important; height: 5px !important; background: var(--title-color) !important; opacity: 1 !important; }
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0.3rem !important; }

.swiper-pagination-bullet-active { width: 1.5rem !important; height: 5px !important; border-radius: .5rem !important; }

/* Header */
.header { 
    /* width: 100%; */
    background: transparent;
    position: sticky;
    top: 12px;
    left: 0;
    z-index: var(--z-fixed);

}


.nav { height: calc(var(--header-height) + 1.5rem); display: flex; justify-content: space-between; align-items: center; column-gap: 3rem; }
.login-toggle, .nav-logo, .nav-toggle, .nav-shop, .nav-close { color: var(--title-color); }
    .nav-logo { text-transform: lowercase; font-weight: var(--font-bold); letter-spacing: 1px; display: inline-flex; align-items: center; column-gap: .25rem; margin-left: 0.3rem; z-index: 1500;}
.nav-logo-icon { font-size: 1.25rem; }
.nav-btns { display: flex; align-items: center; column-gap: 1rem; margin-left: auto; }
.nav-toggle, .login-toggle, .nav-shop { font-size: 1.25rem; cursor: pointer; }
.nav-list { display: flex; align-items: center; column-gap: 2rem; }
.nav-link { color: var(--title-color); font-weight: var(--font-medium); font-size: var(--normal-font-size); transition: .3s; }
    .nav-link:hover { color: var(--first-color); }
.nav-close { font-size: 2rem; position: absolute; top: 0.9rem; right: 1.25rem; cursor: pointer; }
    .nav-toggle, .nav-close { display: none; }
.active-link { position: relative; }
    .active-link::before { content: ''; position: absolute; bottom: -.75rem; left: 45%; width: 5px; height: 5px; background: var(--title-color); border-radius: 50%; }
::-webkit-scrollbar { width: 0.6rem; background: var(--scrollbar-color); border-radius: .5rem; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: .5rem; }

/* Cart */

.cart { 
    position: fixed; 
    background-color: var(--body-color); 
    z-index: var(--z-fixed); 
    width: 420px; 
    box-shadow:  -2px 0 4px var(--shadow); 
    height: 100%; 
    top: 0; 
    right: -100%; 
    padding: 3.5rem 2rem; 
    transition: .4s; 
}
.cart-title-center { font-size: var(--h2-font-size); text-align: center; margin-bottom: var(--mb3); }
.cart-close { font-size: 2rem; color: var(--title-color); position: absolute; top: 1.25rem; right: 0.9rem; cursor: pointer; }
.cart-container { display: grid; row-gap: 1.5rem; }
.cart-card { display: flex; align-items: center; column-gap: 1rem; }
.cart-box { background-color: var(--container-color); padding: 0.75rem 1.25rem; display: flex; align-items: center; }
.cart-img { width: 85px; }
.cart-title { font-size: var(--normal-font-size); margin-bottom: var(--mb0-5); }
.cart-price { display: block; font-size: var(--small-font-size); color: var(--first-color); margin-bottom: var(--mb1-5); }
.cart-amount, .cart-amount-content { display: flex; align-items: center; }
    .cart-amount { column-gap: 3rem; }
    .cart-amount-content { column-gap: 1rem; }
.cart-amount-box { display: inline-flex; padding: 0.25rem; background: var(--container-color); cursor: pointer; }
.cart-amount-trash { font-size: 1.15rem; color: var(--first-color); cursor: pointer; }
.cart-prices { margin-top: 6rem; display: flex; align-items: center; justify-content: space-between; }
.cart-prices-item, .cart-prices-total { color: var(--title-color); }
    .cart-prices-item { font-size: var(--small-font-size); }
    .cart-prices-total { font-size: var(--h3-font-size); font-weight: var(--font-medium); }
.show-cart { right: 0; }

/* Login */

.login { 
    position: fixed; 
    background-color: var(--body-color); 
    z-index: var(--z-fixed); 
    width: 420px; 
    box-shadow:  -2px 0 4px var(--shadow); 
    height: 100%; 
    top: 0; 
    right: -100%; 
    padding: 3.5rem 2rem; 
    transition: .4s; 
}
.login-title-center { font-size: var(--h2-font-size); text-align: center; margin-bottom: var(--mb3); }
.login-close { font-size: 2rem; color: var(--title-color); position: absolute; top: 1.25rem; right: 0.9rem; cursor: pointer; }
.login-form { row-gap: 1.5rem; }
.login-content { background-color: var(--container-color); border-radius: .5rem; padding: 0.75rem 1rem .25rem; }
.login-label { font-size: var(--small-font-size); color: var(--title-color); }
.login-input { width: 100%; background: var(--container-color); color: var(--text-color); font-size: var(--normal-font-size); padding: 0.25rem .5rem .5rem 0; }
.signup { color: var(--title-color); font-size: var(--small-font-size); font-weight: var(--font-medium); }
    .signup a { color: var(--first-color); }
.show-login { right: 0; }

/* Home */
.home-container{ max-width: 1300px;}
.home-data{padding:2rem;}

.home-content { padding: 3rem 2rem;
grid-template-columns:repeat(2,1fr);
column-gap: 3rem; margin-top: 3rem;
border-radius: 2rem;
background: #fff;
}

.home-group { display: grid; position: relative; padding-top: 2rem; }
.home-img { height: 450px; transform: translateY(-3rem); justify-self: center; }
.home-indicator { width: 8px; height: 8px; background: var(--title-color); border-radius: 50%; position: absolute; bottom: 15%; left: 45%; }
    .home-indicator::after { content: ''; position: absolute; width: 1px; height: 75px; background: var(--title-color); top: 0; right: 45%; }
.home-details-img { position: absolute; bottom: 0; right: 58%; }
.home-details-title, .home-details-subtitle { display: block; font-size: var(--small-font-size); text-align: right; }
.home-subtitle { font-size: var(--h3-font-size); text-transform: uppercase; margin-bottom: var(--mb1); }
.home-title { font-size: var(--hh1-font-size); font-weight: var(--font-bold); line-height: 109%; margin-bottom: var(--mb1-5); }
.home-description { margin-bottom: var(--mb2-5); padding-right: 2rem; }
.color-description { padding-right: 2rem; font-size: 1.5rem; }
.home-buttons { display: flex; justify-content: space-between; }
.scroll-header {  
/*box-shadow: 0 0px 20px var(--shadow); */
}
.txt-description{text-align: center; font-size: 1.1rem;} 

/*Color*/
.fill-red{color: #FF3636; }

/* color-BOX */
.color-box{ padding-left: 1rem;}

/*Close up*/
.close-up{background-color: #fff; width: 100%; margin: 5rem auto; padding: 5rem 0;}
.closeup-container {  grid-template-columns: repeat(2, 1fr); width: 90%; justify-content: center; align-items: center; column-gap: 5rem;  padding: 2rem 1rem; border-radius: 3rem; }

.closeup-img { height: auto; width: 400px;}
.closeup-data {  text-align: left; }
.closeup-detail{font-family: "Noto Sans Thai Looped", sans-serif;  color: #606266; font-size: 1.5rem;   }
.closeup-h1 { font-size: var(--h1-font-size); color: #3D4351 ; font-weight: 600;}
.closeup-hh1 { font-size: var(--hh1-font-size); color: #3D4351 ; font-weight: 800;}



/*discount */

.discount-container { grid-template-columns: repeat(2, max-content); justify-content: center; align-items: center; column-gap: 5rem; background-color: #ffb81e26; padding: 3rem 1rem; border-radius: 3rem; }
.discount-img { height: 200px; }
.discount-data { padding-left: 6rem; text-align: center; }
.discount-title { font-size: var(--h3-font-size);  color: #FF4144; font-weight: 600;}
.discount-price { font-size: var(--h1-font-size); color: #3D4351 ; font-weight: 900;}
.discount-pricedown{ font-size: var(--hh1-font-size); color: #3D4351 ; font-weight: 800;}

.discount-detail{font-family: "Noto Sans Thai Looped", sans-serif;  color: #606266;   }

/*show price*/
.show-discount { color: #ff9999; font-size: var(--h1-font-size); text-decoration: line-through!important; font-weight: var(--font-medium); }
.big-price{color: #4c946cf2;}

/*list-swipper*/
.list-container { width: 90%; padding-top: 1rem;  margin: auto; position: relative;}
.list-container-width{ width: 90% !important; margin: auto;  }




.list-content { width: auto; height: 100px;  background-color: #fff; padding: 2rem 1rem; border-radius: 2rem; text-align: center; cursor: pointer; line-break: anywhere; }
.list-content:hover{background-color: #FFB01D10;}
.list-title { font-size: var(--h2-font-size); font-weight: var(--font-bold); color: #3D4351; padding: 0 1rem; line-height: 1.3; }
 
 button .head{background: none;}
/* New */

.new-container { padding-top: 1rem; width: 80%; margin: auto;}
.new-img {width: 100%; height: 140px;  transition: .3s; object-fit: cover; border-radius: 5px;}
.event-img {width: 100%;   transition: .3s; object-fit: cover; border-radius: 5px;}
.new-content { position: relative !important; background-color: var(--container-color); width: 310px; height: inherit!important; padding:0.3rem; border-radius: 0.5rem;cursor: pointer; text-align: center; overflow: hidden; line-break: anywhere; }
.new-title {font-size: var(--normal-font-size);  font-weight: var(--font-medium); padding: 0 0.3rem; word-wrap: break-word; height: 45px; line-height: 1.4;  overflow: auto; margin-bottom: 0.2rem; }
.new-subtitle { display: block; font-size: var(--small-font-size); margin-bottom: var(--mb1); }
 
/*.swiper-slide{height: auto!important;}*/
.new-prices { display: inline-flex; align-items: center; column-gap: .5rem; }
.new-price { font-weight: var(--font-bold); font-size:var(--h3-font-size);  color: #4267b2;}
.new-discount { color: var(--first-color); font-size: var(--smaller-font-size); text-decoration: line-through!important; font-weight: var(--font-medium); }
.new-button { display: inline-flex; padding: 0.5rem; border-radius: .25rem .25rem .75rem .25rem; position: absolute; bottom: 0; right: -3rem; }
.new-icon { font-size: 1.25rem; }
.new-content:hover .new-img {	
    transform: scale(1.2); /* ซูมภาพให้ใหญ่ขึ้น 10% (1.1 เท่า) */
    transform-origin: center center; /* กำหนดจุดศูนย์กลางของการซูม */
    transition: transform 0.3s ease-in-out; /* เพิ่ม transition เพื่อให้การซูมดูนุ่มนวล */
	cursor: pointer;
}
.new-button:hover,
.new-content:hover,
.swiper-slide:hover {
  cursor: pointer!important;
}


	/* --- Product Details Section --- */
.product-details {    padding: 10px;    display: flex;    flex-direction: column;    /* gap: 15px; */	}

/* --- Product Price Section --- */
.product-price-section {    display: flex;    align-items: flex-start;    gap: 10px;    justify-content: space-between;}
.product-price-section-dis {    display: flex;    align-items: flex-start;    gap: 10px;    justify-content: flex-start;}
.price-label {    font-size:1rem;    color: #888888;    line-height: 1;}
.price-label-dis {    font-size:1rem;    color: #888888;}
.product-price {  font-weight: bold;  line-height: 1; /* ปรับ line-height เพื่อให้จัดตำแหน่งง่ายขึ้น */}
.currency {  font-size: 0.8em;  color: #888888;  line-height: 1.2;  text-align: right;  margin-bottom: 2px; /* ปรับตำแหน่งเล็กน้อยให้ดูสมดุล */}
	

.best-buy{background: #FF1E3A; color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; }
.new-pro{background: #40C91F; color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; }
.pro-buy{background: #00D7B9; color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; }
.pre-pro{background: #FFBD43; color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; }
.all-tag{background: #A4A4A4;}

.red-bg {
    background: rgba(98,17,18,1.00); /* Sets the text color to rgba(140,68,68,1.00) */
	color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; 
}
.red2-bg {
    background: rgba(177,30,32,1.00); /* Sets the text color to rgba(140,68,68,1.00) */
	color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; 
}
.green-bg {
    background: rgba(56,110,56,1.00); /* Sets the text color to rgba(47,85,47,1.00) */
	color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; 
}

.blue-bg {
    background: rgba(13,88,136,1.00); /* Sets the text color to blue */
	color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; 
}



/* Promotion-box---Tag */
.sn-tag{font-size: var(--small-tag-font-size);  display: grid; justify-content: start; padding: 0 0.5rem; }
.pro-box { align-content: center; align-items: center; display: flex;  left: 5%; top: 5%; position: fixed;	}
.intro-tag { background-color: #FFC10C; color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; }
.new-tag { background: #40C91F; color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: .25rem; }
.hot-tag { background: #FF1E3A; color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: 1.5rem; align-items: center; align-content: center; display: flex;}
.pro-tag {color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: 1.5rem;
background:#00D7B9;
}
.bestsale-tag { color: #FFFFFF; font-weight: 300; font-size: var(--small-tag-font-size); padding: 0.2rem .5rem; margin-right: 0.25rem; border-radius: 1.5rem; 
background: #FFBD43
}


.steps-bg { background-color: var(--container-color); padding: 3.5rem 2.5rem; border-radius: 1rem; }
.steps-container { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; padding-top: 1rem; }

/*.steps-card { background-color: var(--body-color); padding: 2.5rem 3rem 2rem 1.5rem; border-radius: 1rem; }*/

.steps-card-number { display: inline-block; background-color: var(--first-color); color: #FFFFFF;
padding: 0.5rem .75rem; border-radius: .25rem; font-size: var(--h2-font-size); margin-bottom: var(--mb1-5); transition: .3s; }
.steps-card-title { font-size: var(--normal-font-size); margin-bottom: var(--mb0-5); }
.steps-card-description { font-size: var(--small-font-size); }
.step-card:hover .steps-card-number { transform: translateY(-0.25rem); }

/* Newsletter */

.newsletter-container { display: grid; grid-template-columns: .5fr; justify-content: center; justify-items:center;  }
.newsletter-description { padding: 0 3rem; text-align: center; margin-bottom: var(--mb1-5); color: #7e92a0;}
.newsletter-form { background-color: var(--container-color); padding: 1rem; display: flex; justify-content: space-between; border-radius: .75rem; }
.newsletter-input { width: 70%; padding: 0 .5rem; background: none;  }
.newsletter-input::placeholder { color: var(--text-color); }


/*content slide  banner*/

.content-slider{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

 @keyframes scroll {
	 0% {
		 transform: translateX(0);
	}
	 100% {
		 transform: translateX(calc(-250px * 7));
	}
}
 .slider {
/*	 background: w;*/
/*	 box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);*/
	 height: 100%;
	 margin: 5rem 2rem;
	  border-radius: 5px;
	 overflow: hidden;
	 position: relative;
}
 .slider::before, .slider::after {
	 background: linear-gradient(to right, rgba(249, 249, 249, 1) 0%, rgba(249, 249, 249, 0) 100%);
	 content: "";
	 height: 100%;
	 position: absolute;
	 width: 100px;
	 z-index: 2;
}
 .slider::after {
	 right: -1px;
	 top: 0;
	 transform: rotateZ(180deg);
}
 .slider::before {
	 left: -1px;
	 top: 0;
}
 .slider .slide-track {
	 animation: scroll 120s linear infinite;
	 display: flex;
	 width: calc(250px * 14);
}
 .slider .slide {
   
    margin: 2rem;
    height: 100%;
    /* width: 500px; */	 
}


/* Footer */

.footer { position: relative; overflow: hidden; }
.footer-container { grid-template-columns: repeat(4, 1fr); justify-content: center; column-gap: 1rem; }
.footer-logo { color: var(--title-color); text-transform: lowercase; font-weight: var(--font-bold); letter-spacing: 1px; display: inline-flex; align-items: center; column-gap: .25rem; margin-bottom: var(--mb1); }
.footer-logo-icon { font-size: 1rem; }

.footer-description a{ color: #939496;}.footer-description a:hover{ color: #FFA43F;}
.footer-social { display: flex; column-gap: .75rem; }
.footer-social-link { display: inline-flex; background-color: var(--container-color); padding: 0.25rem; color: var(--title-color); font-size: 1rem; border-radius: .25rem; }
    .footer-social-link:hover { background-color: var(--first-color); color: #FFFFFF; }
.footer-title { font-size: var(--h3-font-size); margin-bottom: var(--mb1); }
.footer-links { display: grid; row-gap: .35rem; justify-items: start;  }
.footer-link { font-size: var(--small-font-size); color: var(--text-color); transition: .3s; }
    .footer-link:hover { color: var(--first-color); cursor: pointer;}
    a.footer-link:hover { color: var(--first-color); cursor: pointer;}
	    li.footer-link:hover { color: var(--first-color); cursor: pointer;}

.footer-copy { display: block; text-align: center; font-size: var(--smaller-font-size); margin-top: 6rem; }
    .footer-copy a { font-family: var(--signature-font); color: var(--title-color); transition: .3s; }
        .footer-copy a:hover { color: var(--first-color); }

/* Scroll up */

.scrollUp { position: fixed; right: 1rem; bottom: -30%; 
  background: linear-gradient(
        to right, 
        #e81123,     
        #e81123 17%, 
        #f7941d 17%, 
        #f7941d 34%, 
        #fff100 34%, 
        #fff100 51%, 
        #00a650 51%, 
        #00a650 68%, 
        #0054a5 68%, 
        #0054a5 85%, 
        #672d93 85%, 
        #672d93     
    );
	border-radius: .4rem; display: inline-flex; padding: 0.25rem; z-index: var(--z-tooltip); opacity: .8; transition: .4s; }
    .scrollUp:hover { opacity: 1; }
.scrollup-icon { font-size: 1.5rem; color: #FFFFFF; }
.show-scroll { bottom: 3rem; }

/* Media Queries */


@media screen and (max-width: 1200px) {
.new-container { padding-top: 1rem; width: 90%; margin: auto;}
    .home-img { height: 400px; }
    .swiper-pagination { margin-top: 0.3rem; }
	:root{
	--small-tag-font-size: 0.6rem;
	}
}
@media screen and (max-width: 1100px) {
.new-container { padding-top: 1rem; width: 90%; margin: auto;}

}
@media screen and (max-width: 1000px) {
.new-container { padding-top: 1rem; width: 90%; margin: auto;}

}
@media screen and (max-width: 992px) {
    .container { margin-left: var(--mb1-5); margin-right: var(--mb1-5); }
    .section-title { font-size: var(--hh1-font-size); font-weight: 800; letter-spacing: 0.5px;}
    .home-content { padding: 2rem 0 2rem; }
	
    .home-img { width: 450px; transform: translateY(0);  height: auto;}
    .home-indicator { bottom: initial; left: initial; top: 7rem; right: 2rem; }
	.home-indicator::after { top: -3rem; height: 48px; }
    .home-details-img { right: 0.5rem; bottom: initial; }
    .home-description { padding-right: 0; }
    .swiper-pagination { margin-top: 0.3rem; }
    .discount-pagination { margin-top: var(--mb2); }
    .new-content { width: 242px; padding: 1rem 0.3rem 0.3rem; }
	.list-content { padding: 2rem 0 1.5rem 0; }
    .new-img { width: 100%; }
	.new-img, .new-subtitle { margin-bottom: var(--mb0-5); }
    .new-title { font-size: var(--normal-font-size); }
    .steps-bg { padding: 3rem 2rem 2rem; }
    .steps-container { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
		.closeup-detail{font-family: "Noto Sans Thai Looped", sans-serif;  color: #606266; font-size: 1rem;   }

}


@media screen and (max-width: 776px) {
    body { margin: 0px 0 0 0; }
    .section { padding: 4.5rem 0 2rem; }
    .nav { height: var(--header-height); }
    .nav-menu { position: fixed; background-color: var(--body-color); top: 0; right: -100%; width: 100%; height: 100%; padding: 6rem 2rem 3.5rem; transition: .5s; }
    .nav-list { flex-direction: column; row-gap: 2rem; }
    .nav-close, .nav-toggle { display: block; }
    .home-content { padding: 0; grid-template-columns: 1fr; row-gap: 1rem; }
    .show-menu { right: 0; }
    .home-content { padding: 0; grid-template-columns: 1fr; row-gap: 1rem; }
    .home-img { height: auto; width: 100%;}
    .home-title { margin-bottom: var(--mb1); font-size: 1.5rem;}
    .home-description { margin-bottom: var(--mb1-5); }
    .swiper-pagination { margin-top: 0.3rem;}
    .discount-container { grid-template-columns: 1fr; row-gap: 1.25rem; padding: 2.5rem 1rem; border-radius: 1rem; }
    .closeup-container { grid-template-columns: 1fr; row-gap: 1.25rem; padding: 2.5rem 1rem; border-radius: 1rem; }
	.closeup-img{ justify-self: center; order: 1; }
	.button-color{width: 25px; height: 25px;}
	.closeup-data { padding-left: 0; }
	.discount-img { justify-self: center; order: 1; }
    .discount-data { padding-left: 0; }
    .newsletter-container { grid-template-columns: .7fr; }
    .footer-container { grid-template-columns: 1fr; row-gap: 2rem; justify-self: center; align-items: center; }
    .footer-content { text-align: center; }
    .footer-social { justify-content: center; align-items: center; }
    .footer-copy { margin-top: 4.5rem; }
		.closeup-detail{font-family: "Noto Sans Thai Looped", sans-serif;  color: #606266; font-size: 1rem;   }
	.new-container { padding-top: 1rem; width: 90%; margin: auto;}
}

@media screen and (max-width: 576px) {
	.sn-tag{font-size: 0.5rem; }
	.new-container { padding-top: 1rem; width: 95%; margin: auto;}
    .steps-container { grid-template-columns: 1fr; }
    .steps-bg { padding: 3rem 2rem 2rem; }
    .newsletter-container { grid-template-columns: 1fr; }
	.closeup-img{ justify-self: center; order: 1; }
	.closeup-detail{font-family: "Noto Sans Thai Looped", sans-serif;  color: #606266; font-size: 1rem;   }

    .login, .cart { width: 100%; }
	:root{
	--small-tag-font-size: .7rem;
	}
}

@media screen and (max-width: 330px) {
    .container { margin-left: var(--mb1); margin-right: var(--mb1); }
    .nav { column-gap: 0; }
    .home-img { height:100%; }
	.closeup-img{ justify-self: center; order: 1; }
    .home-buttons { flex-direction: column; width: max-content; row-gap: 1rem; }
    .steps-bg { padding: 2rem 1rem; }
    .steps-card { padding: 1.5rem; }
	.product-price-section {    display: flex;    align-items: flex-start;    gap: 0px;    justify-content: space-between;}

	:root{
	--small-tag-font-size: .5rem;
	}
}

@media screen and (min-width: 320px) and (max-width: 600px) {
	.product-price-section {    display: flex;    align-items: flex-start;    gap: 0px;    justify-content:space-between;}

	.price-label {
 		font-size: 0.7rem;
	}
	.currency {  font-size: 0.6em; }

}
@media screen and (max-width: 300px) {
    .container { margin-left: var(--mb1); margin-right: var(--mb1); }
    .nav { column-gap: 0; }
    .home-img { height:100%; }
	.closeup-img{ justify-self: center; order: 1; }
    .home-buttons { flex-direction: column; width: max-content; row-gap: 1rem; }
    .steps-bg { padding: 2rem 1rem; }
    .steps-card { padding: 1.5rem; }
	.product-price-section {    display: flex;    align-items: flex-start;    gap: 10px;    justify-content: space-between;}

	:root{
	--small-tag-font-size: .5rem;
	}
}

/* ----------------------------------------- button set ----------------------------------------*/
.frame {
  width: 90%;
  margin: 1rem auto;
  text-align: center;
}

.custom-btn {
  width: 80px;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  margin: 5px;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 500;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
 outline: none;
}
.custom-btn label{
margin-bottom: 0px;
}

.btn-txt{
width: auto;
  color: #fff;
  font-size: 0.9rem;
  
  border-radius: 7px;
  padding: 5px;
  margin: 5px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  display: inline-block;
 outline: none;
}

.btn-txt label{
  padding: 0 0.5rem ;
  margin-bottom: 0px;
   cursor: pointer;
}

label:hover{color: #3F4656;  }
.btn-txt:hover{ background: #FFF2DB; }



.blinking-text-05 {
  animation: blink 0.5s infinite; /* ชื่อแอนิเมชัน, ระยะเวลา, ทำซ้ำไม่สิ้นสุด */
}

.blinking-text-1 {
  animation: blink 1s infinite; /* ชื่อแอนิเมชัน, ระยะเวลา, ทำซ้ำไม่สิ้นสุด */
}
.blinking-text-15 {
  animation: blink 1.5s infinite; /* ชื่อแอนิเมชัน, ระยะเวลา, ทำซ้ำไม่สิ้นสุด */
}
.blinking-text-2 {
  animation: blink 2s infinite; /* ชื่อแอนิเมชัน, ระยะเวลา, ทำซ้ำไม่สิ้นสุด */
}
@keyframes blink {
  0% {
    opacity: 1; /* เริ่มต้นที่ทึบ 100% */
  }
  50% {
    opacity: 0; /* ที่ 50% ของเวลา ให้โปร่งใส 0% (หายไป) */
  }
  100% {
    opacity: 1; /* กลับมาทึบ 100% อีกครั้ง */
  }
}



/* 16 */
.btn-16 {
  border: 1px;
  color: #000;
}
.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
label:hover{
  color: #fff;
/*  background-color: rgba(255,247,234,0);*/
/*  box-shadow: 0 0 0 1px rgba(255,189,65,1.00);, 0 10px 60px 0 rgba(0, 0, 0, .1); */


}
.btn-16:hover {
  color: #fff;
  background-color: rgba(255,247,234,0);
  box-shadow: 0 0 0 1px rgba(255,189,65,1.00);, 0 10px 60px 0 rgba(0, 0, 0, .1); 

}
.btn-select.active { /* เพิ่ม .active ต่อท้าย .btn-16 */
  box-shadow: none;
  background: transparent; /* เปลี่ยนจาก transform เป็น transparent หากต้องการพื้นหลังโปร่งใส */
  color: rgba(255, 194, 16, 1.00);
  border: solid 1px rgba(255, 194, 16, 1.00);
  /* top: 2px; */ /* หากต้องการใช้ ให้ uncomment บรรทัดนี้ */
}

.btn-16.active { /* เพิ่ม .active ต่อท้าย .btn-16 */
  box-shadow: none;
  background: #fff;
  color: rgba(255, 194, 16, 1.00);
  border: solid 2px rgba(255, 194, 16, 1.00);
  /* top: 2px; */ /* หากต้องการใช้ ให้ uncomment บรรทัดนี้ */
}

/* Basic styling for the search bar container */
.search-bar {
    display: flex; /* Use flexbox to arrange items */
    width: 100%; /* Take full width of its parent */
    max-width: 600px; /* Optional: Limit max width on large screens */
    margin: 20px auto; /* Center the search bar */
    border: 1px solid #ccc;
    border-radius: 25px;
    overflow: hidden; /* Ensures borders are rounded correctly */
}

/* Styling for the input field */
.search-bar input[type="search"] {
    flex-grow: 1; /* Allows the input to take available space */
    border: none;
    padding: 10px 15px;
    font-size: 1rem; /* Responsive font size */
    outline: none; /* Remove outline on focus */
}

/* Styling for the search button */
.search-bar .search-button {
    background-color: #FFFFFF;
    color: white;
    border: none;
}

.input-icon:hover {
    background-color: #FFEBA3;
}
.input-icon{
width: 40px;
height: 40px;
background: #FFFFFF;
border-radius: 50%;
    cursor: pointer;
	margin: 0.5rem;
/*    font-size: 1rem;*/
    display: flex; /* To center icon/text inside button */
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

/* Hide screen reader text visually */
.sr-only {
    position: absolute;
    width: 2px;
    height: 2px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --- Media Queries for smaller screens --- */
@media (max-width: 768px) {
    .search-bar {
        /* On smaller screens, maybe make it slightly less wide, or use 90% */
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
	.btn-see-more{background: #FFE17B; }

    .search-bar input[type="search"] {
/*        padding: 8px 12px;*/
        font-size: 0.9rem;
    }

    .search-bar .search-button {
/*        padding: 8px 12px;*/
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    /* For very small screens, you might want to adjust more */
    .search-bar {
        /* Even narrower or just adjust padding */
        border-radius: 50px; /* Make it more pill-shaped on mobile */
    }

    .search-bar input[type="search"] {
        /* Adjust padding for touch targets */
/*        padding: 10px 15px;*/
    }

    /* Example: Hide the "Search" text on small screens, just show icon */
    .search-bar .search-button .sr-only {
        display: none; /* Hide the text */
    }
    .search-bar .search-button i {
        /* Ensure icon is visible and sized correctly */
        font-size: 1.2rem;
    }
}
/*--------------------------------------------------------------------------------------------------------------------  btn more*/

.button-seemore{
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: flex-end;
	}
	
.btn-see-more{background: #DFDFDF; padding: 0.5rem 1rem; border-radius: 2rem; font-size: 0.8rem;}
.btn-see-more:hover{background: #FFE17B; }

.new-button{background: #6B6C72}

 input.button-color{
  display: none;
}

.button-color {
  display: inline-block;
  position: relative;
  width: 35px;
  height: 35px;
  margin: 5px;
  
  cursor: pointer;
}

.button-color span {
  display: block;
  position: absolute;
  width: 35px;
  height: 35px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button-color span:hover {
  padding: 10px;
}

.old-green .button-color span {
  background: #3B6442;
}

.black333 .button-color span {
  background: #333;
}

.black666 .button-color span {
  background: #666;
}
.retro-white .button-color span {
  background: #F7F7F7;
}

.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin-top: 5rem;
  background: transparent;
  transition: ease .3s;
  z-index: -1;
}
.carbon {
	 background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
	 background-color: #131313;
	 background-size: 20px 20px;
	 background-clip: content-box;
}