@charset "utf-8";
@media screen and (max-width: 670px){

.title-all {
	height: auto;
	width: 100%;
	background-color: #cea0de;
	font-family: "FC Lamoon Bold";
	font-size: 2rem;
	color: #333;
	text-align: center;
	float: left;
	padding-top: 1.5%;
	padding-bottom: 1.5%;
	/* เทคนิคสร้างขอบที่เนียนที่สุด */
	-webkit-text-stroke: 6px #fff; /* สร้างขอบสีขาวหนา 6px */
	paint-order: stroke fill;     /* สั่งให้วาดขอบไว้ข้างหลังตัวอักษร (สำคัญมาก) */
	/* เพิ่มเงาจางๆ ให้ตัวหนังสือลอยออกมา */
	filter: drop-shadow(0 4px 3px rgba(0,0,0,0.1));
	margin-bottom: 2%;
}
.box-all-main-product {
	float: left;
	height: auto;
	width: 98%;
	border-radius: 15px;
	background-color: #E9D3ED;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #cea0de;
	margin-top: 1%;
	margin-right: 1%;
	margin-bottom: 3%;
	margin-left: 1%;
	padding-bottom: 2%;
}
.box-all-main-product-list {
	float: left;
	height: auto;
	width: 100%;
	border-bottom-width: 0px;
	padding-bottom: 2%;
}
.title-product-step {
	/* ปรับให้เต็มจอ */
	width: 99.5%;
	height: auto;
	border: 1px solid #cea0de;
	border-radius: 15px;
	padding: 10px; /* ใช้หน่วย px เพื่อความนิ่งของระยะ */
	box-sizing: border-box; /* ป้องกัน padding ดันขนาดจนเลยหน้าจอ */
	background-color: #cea0de;
	background-image: url(../images/bg-line-02.png);
	background-repeat: repeat;
	float: left;
}
.title-product-step-list {
	/* ปรับให้เต็มจอ */
	width: 99.5%;
	height: auto;
	border: 1px solid #cea0de;
	border-radius: 15px;
	padding: 10px; /* ใช้หน่วย px เพื่อความนิ่งของระยะ */
	display: flex;
	align-items: center; /* จัดให้อยู่กลางแนวตั้ง */
	box-sizing: border-box; /* ป้องกัน padding ดันขนาดจนเลยหน้าจอ */
	float: left;
	background-color: #cea0de;
	background-image: url(../images/bg-line-02.png);
	background-repeat: repeat;
}
.title-product-step-list-etc {
	/* ปรับให้เต็มจอ */
	width: 99.5%;
	height: auto;
	border: 1px solid #cea0de;
	border-radius: 15px;
	padding: 10px; /* ใช้หน่วย px เพื่อความนิ่งของระยะ */
	display: flex;
	align-items: center; /* จัดให้อยู่กลางแนวตั้ง */
	box-sizing: border-box; /* ป้องกัน padding ดันขนาดจนเลยหน้าจอ */
	float: left;
	background-color: #cea0de;
	background-image: url(../images/bg-line-02.png);
	background-repeat: repeat;
}
.title-product-step-list-cart {
	/* ปรับให้เต็มจอ */
	/* ปรับให้เต็มจอ */
	width: 99.5%;
	height: auto;
	border: 1px solid #cea0de;
	border-radius: 15px;
	padding: 10px; /* ใช้หน่วย px เพื่อความนิ่งของระยะ */
	box-sizing: border-box; /* ป้องกัน padding ดันขนาดจนเลยหน้าจอ */
	background-color: #cea0de;
	background-image: url(../images/bg-line-02.png);
	background-repeat: repeat;
	float: left;
}


.title-product-step-01 {
	background-image: url(../images/icon-list.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px;
	/* ขยายตามเนื้อหา */
	width: 80%;
	flex-shrink: 0;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333333;
	float: left;
	height: auto;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 30px;
}

.title-product-step-02 {
	/* ขยายตามเนื้อหา */
	width: 80%;
	flex-shrink: 0;
	font-family: serithairegular;
	font-size: 1rem;
	color: #8F268C;
	float: left;
	height: auto;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 30px;
}


.title-product-step-03 {
	/* ขยายตามเนื้อหา */
	width: 80%;
	flex-shrink: 0;
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFFFFF;
	float: left;
	height: auto;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 30px;
}

.title-product-type-01 {
	float: right;
	height: auto;
	max-width: 200px;
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFFFFF;
	width: 30%;
	font-weight: normal;
	background-color: #AC76C4;
	text-align: center;
	border: 1px solid #CEA0DE;
	padding: 2%;
	margin-bottom: 2%;
}
.title-product-type-02 {
	float: right;
	height: auto;
	max-width: 200px;
	padding: 2%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFFFFF;
	margin-bottom: 2%;
	width: 30%;
	font-weight: normal;
	background-color: #e26cb4;
	text-align: center;
	border: 1px solid #CEA0DE;		
}

.box-slide-product {
	float: left;
	height: auto;
	width: 100%;
	position: relative;
	z-index: 888;
	margin-top: 1%;
	margin-bottom: 1%;
}
.box-product-list-all {
	float: left;
	height: auto;
	width: 100%;
}


.box-product-list {
	background-color: #FFF;
	border-radius: 15px;
	float: left;
	height: auto;
	width: 94%;
	padding: 3%;
	display: inline-block;
	cursor: pointer;
	border: 1px solid #d7d7d7;
	margin-top: 1%;
	margin-bottom: 5%;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.10);
	transition: box-shadow 0.5s ease;
}
.box-product-list:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.30);
	
	}
.box-pagination {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 8%;
	margin-bottom: 10%;
}

/* Pagination links */
.pagination a {
	color: black;
	text-decoration: none;
	transition: background-color .3s;
	font-family: serithairegular;
	font-size: 1rem;
	margin-right: auto;
	margin-left: auto;
	padding-top: 8px;
	padding-right: 12px;
	padding-bottom: 8px;
	padding-left: 12px;
}

/* Style the active/current link */
.pagination a.active {
	background-color: #fde594;
	color: #333;
}

/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {background-color: #ddd;}
/* --- CSS เดิมที่ให้มา --- */
.title-product-detail {
	font-family: serithairegular;
	font-size: 1.1rem; /* ปรับขนาดให้ชัดขึ้นเล็กน้อย */
	color: #333;
	background-color: #EEB8DA;
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 1%;
	margin-bottom: 1%;
	border-radius: 12px;
	padding-top: 10px;
	padding-bottom: 10px;
	display: flex; /* ใช้ flex เพื่อจัดให้ icon อยู่ระดับเดียวกับตัวอักษร */
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

/* --- ส่วน Icon (โครงเดิมแต่ปรับ Animation ให้นุ่มขึ้น) --- */
.noti-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    margin-left: 12px;
    cursor: pointer;
    vertical-align: middle;
}

.noti-icon img {
    width: 100%;
    height: auto;
    animation: bellShake 3s infinite ease-in-out;
}

@keyframes bellShake {
    0%, 100% { transform: rotate(0); }
    5%, 15% { transform: rotate(12deg); }
    10%, 20% { transform: rotate(-12deg); }
    25% { transform: rotate(0); }
}

/* --- ส่วน Popup ใหม่ --- */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* พื้นหลังเข้มขึ้นเพื่อเน้น Popup */
    backdrop-filter: blur(4px); /* เพิ่มความเบลอให้พื้นหลังดูแพง */
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
animation: fadeInOverlay 0.3s ease-out;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

.popup-content {
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    text-align: center;
    
    /* เน้นความลื่นแบบนิ่งๆ ไม่มีการ Scale (ขยาย) */
    animation: popupSmoothSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes popupSmoothSlide {
    0% {
        opacity: 0;
        transform: translateY(20px); /* เริ่มต้นจากข้างล่างนิดเดียว */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* กลับมาที่ตำแหน่งปกติ */
    }
}

.popup-header {
	font-size: 1.2rem;
	font-weight: bold;
	color: #333;
	margin-bottom: 20px;
	border-bottom: 2px solid #EEB8DA;
	padding-bottom: 10px;
	font-family: serithairegular;
}

.popup-body {
	font-size: 1rem; /* ตัวอักษรใหญ่ขึ้น */
	color: #555;
	line-height: 1.8; /* เว้นบรรทัดให้โปร่งอ่านง่าย */
	text-align: left; /* เนื้อความยาวอ่านแบบชิดซ้ายจะง่ายกว่า */
	margin-bottom: 25px;
	word-break: break-word;
	font-family: "Noto Sans Thai";
}

.close-btn {
	width: 100%;
	padding: 14px;
	background-color: #92278F; /* เปลี่ยนเป็นสีเข้มให้ตัดกับพื้นหลัง ดูหรูขึ้น */
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s;
	font-family: serithairegular;
}

.close-btn:hover {
	background-color: #CEA0DE;
	transform: translateY(-2px);
}

.tooltip::after, .tooltip::before {
        display: none;
    }
.picture-product-detail {
	float: left;
	height: auto;
	width: 100%;
	border: 1px solid #92278f;
}
.picture-product-detail img {
	height: auto;
	width: 100%;
}
.title-text-product-detail {
	float: left;
	height: auto;
	width: 92%;
	background-image: url(../images/icon-title.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px;
	margin-bottom: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	padding-left: 8%;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #e26cb4;
}
.title-text-product-detail-etc {
	float: right;
	height: auto;
	width: 60%;
	background-image: url(../images/icon-title.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 4%;
	margin-bottom: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	padding-left: 40px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #e26cb4;
}

.text-product-detail {
	float: right;
	height: auto;
	width: 100%;
	margin-bottom: 2%;
	font-family: serithairegular;
	font-size: 1rem;
	line-height: 160%;
	color: #666;
}

.text-product-detail-etc {
	float: right;
	height: auto;
	width: 60%;
	margin-bottom: 5%;
	font-family: serithairegular;
	font-size: 1rem;
	line-height: 160%;
	color: #666;
}

.box-select-product {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 1%;
	border: 2px solid #CEA0DE;
	padding-bottom: 1%;
}
.show-picture-product-detail {
	float: left;
	height: auto;
	width: 92%;
	padding: 2%;
	background-color: #CEA0DE;
	margin: 2%;
}
.show-picture-product-detail img {
	height: auto;
	width: 100%;
}
.box-cart-all {
	float: left;
	height: auto;
	width: 100%;
	padding-bottom: 2%;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
}

.title-show-product-detail {
	background-image: url(../images/icon-footer-07.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px;
	float: left;
	height: auto;
	width: 85%;
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 8%;
	margin-top: 2%;
	margin-right: 5%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #e26cb4;
	margin-bottom: 1%;
	margin-left: 2%;
}
.title-show-product-detail-cart {
	background-image: url(../images/icon-footer-07.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1.1rem;
	float: left;
	height: auto;
	width: 92%;
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 25px;
	margin-top: 2%;
	margin-right: 0%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #e26cb4;
	margin-bottom: 1%;
}

.box-select-item {
	float: left;
	height: auto;
	width: 92%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	background-color: #F9F2FB;
	padding: 2%;
	transition: background-color 0.3s ease, color 0.3s ease;

	margin: 2%;
}
/* สถานะเมื่อจำนวนตั้งแต่ 1 เป็นต้นไป (Class นี้จะถูกเติมโดย JS) */
.box-select-item.is-selected {
	background-color: #F0DEF5; /* สีม่วงเข้ม */
	color: #92278f; /* เปลี่ยนตัวอักษรเป็นสีขาว */
}

/* ปรับสีปุ่มหรือข้อความภายในเมื่อพื้นหลังเข้มขึ้น (Optional) */
.box-select-item.is-selected .select-item-02,
.box-select-item.is-selected  {
    color: #92278f;
}
.box-select-item-02 {
	float: right;
	height: auto;
	width: 93%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	background-color: #F9F2FB;
	padding-top: 2%;
	padding-right: 5%;
	padding-bottom: 2%;
	padding-left: 2%;
}


.select-item-01 {
	float: left;
	height: auto;
	width: 40%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #FCC;
	border: 1px solid #CEA0DE;
}
.select-item-01 img {
	height: auto;
	width: 100%;
}

.select-item-01-01 {
	float: left;
	height: auto;
	width: 88%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #92278f;
	padding-bottom: 2%;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CEA0DE;
	background-image: url(../images/icon-title.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 15px;
	padding-left: 20px;
	margin-bottom: 2%;
}

.btn-select-item {
	height: 25px;
	width: 25px;
	border: 1px solid #fde594;
	padding-top: 1px;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 2px;
	
}
.btn-select-item-etc {
	height: 18px;
	width: 18px;
	border: 1px solid #fde594;
	padding-top: 1px;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 2px;
	
}
.btn-select-item-cart {
	height: 18px;
	width: 18px;
	border: 1px solid #fde594;
	padding-top: 1px;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 2px;
	
}
.select-item-02 {
	float: left;
	height: auto;
	width: 40%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	margin-top: 5%;
	text-align: left;
	margin-bottom: 5%;
	margin-left: 2%;
}
.box-num-01 {
	float: left;
	height: auto;
	width: 55%;
	margin-left: 2%;
}
.box-num-01-etc {
	float: left;
	height: auto;
	width: 95%;
	margin-left: 2%;
}
.box-num-02 {
float: right;
	height: auto;
	width: 55%;
}
.box-num-02-etc {
	float: left;
	height: auto;
	width: 90%;
	margin-left: 3%;
}


.select-item-03 {
	float: left;
	height: auto;
	width: 100%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #F00;
	text-align: left;
	margin-top: 2%;
}
.select-item-04 {
	float: left;
	height: auto;
	width: 100%;
	font-family: serithairegular;
	font-size: 0.8rem;
	color: #999;
}
.select-item-05-out {
	float: right;
	height: auto;
	width: 55%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #F90;
	text-align: left;
	display: flex;
	justify-content: left;
	align-items: center;
	margin-top: 1%;
	margin-bottom: 2%;
}
.select-item-05-out-etc {
	float: left;
	height: auto;
	width: 50%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #F90;
	text-align: left;
	display: flex;
	justify-content: left;
	align-items: center;
	margin-top: 4%;
	margin-bottom: 4%;
}
.box-sum-price-01 {
	float: right;
	height: auto;
	width: 60%;
	margin-right: 2%;
	margin-bottom: 2%;
}
.box-sum-price-02 {
	float: right;
	height: auto;
	width: 95%;
	background-color: #EAD5F0;
	padding-right: 5%;
	background-image: url(../images/bg-line-01.png);
	background-repeat: repeat;
}
.box-size-detail{
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 2%;
	
	}
.title-size-detail {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 1%;
}
.picture-size-detail {
	float: left;
	height: auto;
	width: 50%;
}
.picture-size-detail img {
	height: auto;
	width: 100%;
}




.sum-price-detail {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #FFFFFF;
	float: right;
	height: auto;
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
	text-align: center;
	border-radius: 15px;
	border: 2px solid #39F;
	line-height: 160%;
	padding-top: 1%;
	padding-bottom: 1%;
}
.pay-later {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #FFFFFF;
	float: right;
	height: auto;
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
	text-align: center;
	border-radius: 15px;
	border: 2px solid #F90;
	line-height: 160%;
	padding-top: 1%;
	padding-bottom: 1%;
}



.next-detail{
	float: left;
	height: auto;
	width: 48%;
	margin-bottom: 3%;
	position: relative;
	display: inline-flex;
	margin-top: 3%;
}
.btn-next-detail {
	background-color: #FFFFFF;
	height: auto;
	width: 100%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	border-radius: 15px;
	padding-top: 7%;
	padding-right: 1%;
	padding-bottom: 5%;
	padding-left: 1%;
	background-image: url(../images/icon-bag.png);
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 18px;
	border: 2px solid #FCE493;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.btn-next-detail:hover {
	background-color: #fde594;
}
.buy-now-01{
	float: right;
	height: auto;
	width: 48%;
	margin-bottom: 10%;
	position: relative;
	display: inline-flex;
	margin-top: 3%;
}
.btn-buy-now-01 {
	background-color: #e26cb4;
	height: auto;
	width: 100%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFF;
	border-radius: 15px;
	padding-top: 7%;
	padding-right: 1%;
	padding-bottom: 5%;
	padding-left: 1%;
	background-size: 10%;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	border: 2px solid #92278f;
}
.btn-buy-now-01:hover {
	background-color: #D73195;
	color: #FFF;
}
.buy-now-02{
	float: left;
	height: auto;
	width: 80%;
	margin-bottom: 3%;
	position: relative;
	display: inline-flex;
	margin-left: 10%;
}

.btn-buy-now-02 {
    background-color: #92278f;
    width: 100%;
    font-family: 'serithairegular', sans-serif;
    font-size: 1rem;
    color: #FFF;
    border-radius: 15px;
    padding: 15px 10px;
    box-shadow: 0 4px 15px rgba(146, 39, 143, 0.3);
    border: 2px solid #cea0de;
    cursor: pointer;
    display: block;
    outline: none;
    
    /* หัวใจสำคัญ: ใช้ transition คุมทุกอย่าง */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* อนิเมชั่น Pulse เฉพาะแสงเงา ไม่ให้กระทบตัวปุ่ม */
    animation: pulse-purple-glow 2s infinite;
}

@keyframes pulse-purple-glow {
    0% { box-shadow: 0 0 0 0 rgba(146, 39, 143, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(146, 39, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(146, 39, 143, 0); }
}

.btn-buy-now-02:hover {
    background-color: #cea0de;
    color: #92278f;
    border: 2px solid #92278f;
    /* การยกตัวที่นุ่มนวล */
    transform: translateY(-7px);
    box-shadow: 0 12px 25px rgba(146, 39, 143, 0.5);
    font-weight: bold;
}

.btn-buy-now-02:active {
    transform: translateY(-2px);
    transition: all 0.1s; /* จังหวะกดให้ตอบสนองไวขึ้น */
}

.btn-buy-now-03 {
    /* เปลี่ยนจากสีเขียวเป็นสีเทา (Disabled Look) */
    background-color: #cccccc; 
    border: 2px solid #b3b3b3;
    color: #666666; /* ปรับสีตัวอักษรให้ดูจางลงเล็กน้อย */
    
    height: auto;
    width: 100%;
    font-family: serithairegular, sans-serif;
    font-size: 1.1rem;
    border-radius: 15px;
    padding: 16px 10px 16px 45px; 
    
    /* ลดความเด่นของเงาลงเพื่อให้ปุ่มดูแบนและนิ่ง */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    /* รูปพื้นหลัง (check.png) ยังคงอยู่แต่ปรับให้นิ่ง */
    background-image: url(../images/check.png);
    background-repeat: no-repeat;
    background-position: 15% center;
    background-size: 20px; 
    
    /* กรองสีรูปไอคอนให้เป็นขาวดำ (ถ้าบราวเซอร์รองรับ) เพื่อให้เข้ากับปุ่มสีเทา */
    filter: grayscale(1);
    opacity: 0.8;

    display: flex;
    align-items: center;
    justify-content: center;
    
    /* ปรับเมาส์ให้เป็นปกติ และป้องกันการกด */
    cursor: default;
    pointer-events: none; /* ทำให้คลิกไม่ได้เลย */
    
    /* ลบ transition ออกเพื่อให้ปุ่มนิ่งสนิท */
    transition: none;
}

/* ลบเอฟเฟกต์ Hover ออกทั้งหมด */
.btn-buy-now-03:hover {
    background-color: #cccccc; /* ล็อกสีเดิมไว้ */
    color: #666666;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.comment-01 {
	font-family: serithairegular;
	font-size: 1rem;
	color: #F00;
	text-align: right;
	float: right;
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
}
.comment-02 {
	font-family: serithairegular;
	font-size: 1rem;
	color: #F00;
	text-align: right;
	float: right;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 2%;
}
.comment-03 {
	font-family: serithairegular;
	font-size: 1rem;
	color: #F00;
	text-align: right;
	float: right;
	width: 100%;
	margin-bottom: 3%;
}
.box-icon-title-cart {
	float: left;
	height: auto;
	width: 90%;
	margin-bottom: 2%;
	margin-left: 5%;
}
.icon-title-cart {
	float: left;
	height: auto;
	width: 25%;
	text-align: center;
	filter: grayscale(100%);
}
.icon-title-cart img {
	height: auto;
	width: 60%;
}
.icon-title-cart-back {
	font-family: "Noto Sans Thai";
	font-size: 0.9rem;
	color: #999;
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 1%;
	margin-bottom: 1%;
	}
.icon-title-cart-back a{
	color: #999;
	text-decoration: none;
}

.icon-title-cart-active-01 {
	float: left;
	height: auto;
	width: 30%;
	text-align: center;
	animation: moveAndBack 2s ease-in-out infinite alternate;
}
.icon-title-cart-active-01 img {
	height: auto;
	width: 60%;
}
@keyframes moveAndBack {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(20px);
  }
}
.icon-title-cart-active-02 {
	float: left;
	height: auto;
	width: 25%;
	text-align: center;
	animation: swing 3s ease-in-out infinite;
}
.icon-title-cart-active-02 img {
	height: auto;
	width: 70%;
}
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  25% {
    /* หมุนไปทางขวา 15 องศา */
    transform: rotate(15deg);
  }
  50% {
    /* กลับมาจุดเริ่มต้น */
    transform: rotate(0deg);
  }
  75% {
    /* หมุนไปทางซ้าย 15 องศา (-15) */
    transform: rotate(-15deg);
  }
  100% {
    /* จบที่จุดเริ่มต้นเพื่อเริ่มลูปใหม่แบบเนียนๆ */
    transform: rotate(0deg);
  }
}
.icon-title-cart-next {
	float: left;
	height: auto;
	width: 10%;
	text-align: center;
	margin-top: 4%;
}
.icon-title-cart-next img {
	height: auto;
	width: 42%;
}






.box-cart-list {
	border: 4px solid #cea0de;
	float: left;
	height: auto;
	width: 95%;
	padding: 2%;
	margin-bottom: 3%;
	border-radius: 15px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.num-cart {
	font-family: "FC Lamoon Bold";
	font-size: 1.5rem;
	color: #333;
	background-color: #fde594;
	text-align: center;
	float: left;
	height: auto;
	width: 10%;
	padding-top: 0.8%;
	padding-right: 1%;
	padding-bottom: 0.8%;
	padding-left: 1%;
}

.box-cart-show-detail {
	float: left;
	height: auto;
	width: 100%;
}
.box-cart-show-detail-02 {
	float: left;
	height: auto;
	width: 100%;
}
.box-cart-show-detail-in {
	float: left;
	height: auto;
	width: 97%;
	background-color: #FAF4FB;
	padding-top: 3%;
	padding-right: 1%;
	padding-bottom: 3%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #cea0de;
	margin-bottom: 2%;
	padding-left: 1%;
}
.cart-item-01 {
	float: left;
	height: auto;
	width: 7%;
	font-family: serithairegular;
	font-size: 0.8rem;
	color: #92278f;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-top: 1%;
	margin-right: 1%;
	border: 1px dotted #CEA0DE;
}
.cart-item-01-01 {
	float: left;
	height: auto;
	width: 80%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	margin-top: 1.5%;
	margin-bottom: 2%;
}



.cart-item-02 {
	float: left;
	height: auto;
	width: 25%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	margin-top: 4%;
	text-align: left;
	margin-left: 9%;
}

.cart-item-03 {
	float: left;
	height: auto;
	width: 40%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #F00;
	text-align: center;
	margin-top: 0px;
}
.cart-item-03-01 {
	float: left;
	height: auto;
	width: 20%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	text-align: center;
	margin-top: 8px;
}


.cart-item-04 {
	float: left;
	height: auto;
	width: 10%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	margin-top: 1.5%;
	margin-left: 1%;
}
.cart-item-05-out {
	float: left;
	height: auto;
	width: 60%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #F90;
	text-align: left;
	margin-top: 1.5%;
	display: flex;
	justify-content: left;
	align-items: center;
}
.cart-delete {
	float: right;
	height: auto;
	width: 4%;
	margin-top: 5px;
}
.cart-delete img {
	height: auto;
	width: 100%;
}
.cart-delete-02 {
	float: right;
	height: auto;
	width: 25px;
	margin-top: 5px;
}
.cart-delete-02 img {
	height: auto;
	width: 100%;
}
/* ตกแต่ง Container หลัก */
.quantity-picker {
	display: inline-flex;
	align-items: center;
	background-color: #CEA0DE; /* สีพื้นหลังเข้มตามรูป */
	border-radius: 12px;
	padding: 2px;
	border: 1px solid #30363d;
}

/* ตกแต่งปุ่มบวกลบ */
.quantity-picker button {
	background: transparent;
	border: none;
	color: #ffffff;
	font-size: 1.2rem;
	width: 30px;
	height: 30px;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Tahoma, Geneva, sans-serif;
}

.quantity-picker button:hover {
	background-color: #92278f;
	border-radius: 8px;
}

/* ตกแต่งช่องใส่ตัวเลข */
.quantity-input {
	width: 40px;
	background: transparent;
	border: none;
	border-left: 1px solid #30363d;
	border-right: 1px solid #30363d;
	color: #ffffff;
	text-align: center;
	font-size: 1rem;
	outline: none;
	appearance: textfield; /* ซ่อนลูกศร default ของ browser */
	font-family: serithairegular;
}

/* ซ่อนลูกศรของ input type number สำหรับ Chrome/Safari */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.box-select-address {
	float: right;
	height: auto;
	width: 35%;
	padding-left: 2%;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CEA0DE;
	display: none;
}
.address-group {

}
.box-select-address-list {
	float: left;
	height: auto;
	width: 95%;
	margin-bottom: 2%;
	transition: background 0.2s;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	cursor: pointer;
	padding-top: 5px;
	padding-right: 1px;
	padding-bottom: 5px;
	padding-left: 5px;
}
/* เมื่อกล่องถูกเลือก (Active) */
.box-select-address-list.active {
	background-color: #f0f7ff;
	border-top-color: #CC9EDB;
	border-right-color: #CC9EDB;
	border-bottom-color: #CC9EDB;
	border-left-color: #CC9EDB;
}
/* จัดระเบียบหัวข้อและปุ่มเลือกให้อยู่บรรทัดเดียวกัน */
.select-address, .title-select-address {
    display: inline-block;
    vertical-align: middle;
}
.box-select-address-list-m {
	float: left;
	height: auto;
	width: 99%;
	margin-bottom: 2%;
}
.select-address {
	float: left;
	height: auto;
	width: 30px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 2%;
}
.title-select-address {
	font-family: serithairegular;
	font-size:1rem;
	color: #92278f;
	float: left;
	height: auto;
	width: 80%;
	margin-bottom: 1%;
	margin-top: 1%;
	display: inline-block;
    vertical-align: middle;
    

}

.select-address-text {
	font-family: "Noto Sans Thai";
	font-size: 0.9rem;
	color: #666;
	float: left;
	height: auto;
	width: 94%;
	border: 1px dotted #CCC;
	line-height: 120%;
	display: none;
	margin-top: 1px;
	color: #666;
	line-height: 1.6;
	padding: 2%;
	margin-bottom: 5px;
	border-radius: 10px;
}
/* แสดงข้อมูลเฉพาะอันที่ active เท่านั้น */
.box-select-address-list.active .select-address-text {
    display: block;
}
.selece-address-text-01 {
	float: left;
	height: auto;
	width: 90%;
	margin-bottom: 5%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	margin-top: 3%;
	margin-left: 5%;
	line-height: 140%;
}

.btn-selece-address-text-01 {
	font-family: "Noto Sans Thai";
	font-size: 0.9rem;
	line-height: 120%;
	color: #999;
	height: auto;
	width: 100%;
	padding-top: 2%;
	padding-bottom: 2%;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #E6E6E6;
	border-top-width: 0px;
	border-right-width: 0px;
	border-left-width: 0px;
	box-sizing: border-box;
}
.btn-selece-address-text-02 {
	font-family: "Noto Sans Thai";
	font-size: 0.9rem;
	line-height: 120%;
	color: #999;
	height: 4em;
	width: 100%;
	padding-top: 2%;
	padding-bottom: 2%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	box-sizing: border-box;
	min-height: 100px;
    resize: vertical;
}



.product-detail-sum-price-detail {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #FFFFFF;
	float: right;
	height: auto;
	width: 30%;
	margin-top: 2%;
	margin-bottom: 2%;
	padding-top: 1.5%;
	padding-right: 1%;
	padding-bottom: 1.5%;
	padding-left: 1%;
	text-align: center;
	border-radius: 15px;
	border: 2px dotted #39F;
	margin-left: 60%;
}
.product-detail-pay-later {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #FFF;
	float: right;
	height: auto;
	width: 30%;
	padding-top: 1.5%;
	padding-right: 1%;
	padding-bottom: 1.5%;
	padding-left: 1%;
	text-align: center;
	border-radius: 15px;
	margin-left: 2%;
	border: 2px dotted #F90;
	margin-bottom: 2%;
}
.cart-sum-price-detail {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #FFFFFF;
	float: right;
	height: auto;
	width: 30%;
	margin-top: 2%;
	margin-bottom: 1%;
	padding-top: 1.5%;
	padding-right: 1%;
	padding-bottom: 1.5%;
	padding-left: 1%;
	text-align: center;
	border-radius: 15px;
	border: 2px dotted #39F;
	margin-left: 50%;
}
.cart-pay-later {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #FFF;
	float: right;
	height: auto;
	width: 30%;
	margin-top: 2%;
	padding-top: 1.5%;
	padding-right: 1%;
	padding-bottom: 1.5%;
	padding-left: 1%;
	text-align: center;
	border-radius: 15px;
	margin-left: 50%;
	border: 2px dotted #F90;
}
.box-wait-pay {
	float: left;
	height: auto;
	width: 99%;
	padding-top: 1%;
	padding-bottom: 5%;
	margin-bottom: 5%;
	border: 1px dashed #999999;
	border-radius: 15px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);	
}
.box-wait-pay-logistic {
	float: left;
	height: auto;
	width: 99%;
	padding-top: 1%;
	padding-bottom: 5%;
	margin-bottom: 5%;
	border: 1px dashed #999999;
	border-radius: 15px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);	
}
.blinking-text {
  display: inline-block;
  animation: blinkAndHold 3s linear infinite;
}
@keyframes blinkAndHold {
  0%, 70% { opacity: 1; }   /* 70% แรก (ประมาณ 2 วินาทีกว่า) ให้แสดงปกติ */
  75%, 95% { opacity: 0; }  /* ช่วงสั้นๆ ให้หายไป (กระพริบ) */
  100% { opacity: 1; }      /* กลับมาแสดงใหม่เพื่อเริ่ม Loop ถัดไป */
}
.text-wait-pay {
	float: left;
	height: auto;
	width: 90%;
	margin-bottom: 1%;
	margin-left: 5%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #92278f;
	text-align: center;
	line-height: 140%;

}
.text-wait-pay img {
	height: auto;
	width: 12%;
	margin-bottom: 1%;

}


@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.box-logistic {
	float: left;
	height: auto;
	width: 99%;
	padding-top: 2%;
	margin-bottom: 4%;
	border: 3px dashed #E26DB4;
	padding-bottom: 2%;
	background-image: url(#);
	background-size: 20%;
	border-radius: 15px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
	margin-top: 1%;
}
.box-logistic-02 {
	float: left;
	height: auto;
	width: 99%;
	padding-top: 2%;
	margin-bottom: 4%;
	border: 3px dashed #E26DB4;
	padding-bottom: 2%;
	background-image: url(../images/stand-03.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 20%;
	border-radius: 15px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
	margin-top: 1%;
}
.logistic-address {
	float: left;
	height: auto;
	width: 90%;
	margin-left: 5%;
}

.logistic-add {
	float: left;
	height: auto;
	width: 90%;
	margin-left: 5%;
	margin-top: 5%;
}
.logistic-title {
	font-family: "Noto Sans Thai";
	font-size: 1.05rem;
	color: #92278f;
	float: left;
	height: auto;
	width: 83%;
	margin-bottom: 3%;
	padding-bottom: 2%;
	background-image: url(../images/icon-down-02.png);
	background-position: 20px center;
	background-size: 4%;
	padding-left: 45px;
	background-repeat: no-repeat;
	line-height: 120%;
	padding-top: 3%;
	border-radius: 8px;
	transition: background 0.3s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative; /* เพื่อให้จุดแดงอ้างอิงตำแหน่งได้ */
	border: 4px double #92278f;
}

/* เพิ่มจุดแจ้งเตือน */
.logistic-title::after {
    content: "";
    width: 18px;
    height: 18px;
    background-color: #ff5252; /* สีแดง */
    border-radius: 50%;
    position: absolute;
    top: -10px;
    right: -10px;
    border: 3px solid white;
	animation: pulse-red 1.5s infinite;
}

.box-select-logistic {
	float: left;
	height: auto;
	width: 90%;
	margin-bottom: 5%;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	padding-bottom: 1%;
	transition: all 0.2s ease;
	cursor: pointer; /* ทำให้รู้ว่าคลิกได้ */
	margin-left: 5%;
}
/* เมื่อมี checkbox ข้างในถูกเช็ค ให้เปลี่ยนพื้นหลังของกล่องนั้น */
.box-select-logistic:has(.btn-select-item:checked) {
    background-color: #f0f7ff; /* สีฟ้าอ่อน */
    border-color: #3b82f6;     /* เปลี่ยนสีเส้นขอบเป็นสีฟ้าเข้มขึ้น */
}
.box-select-logistic:has(.btn-select-item-etc:checked) {
    background-color: #f0f7ff; /* สีฟ้าอ่อน */
    border-color: #3b82f6;     /* เปลี่ยนสีเส้นขอบเป็นสีฟ้าเข้มขึ้น */
}
/* สไตล์เมื่อถูกเลือก (จะถูกเติมด้วย JavaScript) */
.box-select-logistic.active {
    background-color: #f0f7ff; /* สีฟ้าอ่อน */
    border-color: #3b82f6;     /* ขอบสีฟ้า */
}
.select-logistic {
	float: left;
	width: 75%;
	display: flex;
	justify-content: left;
	align-items: center;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
}
.price-logistic {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	float: left;
	height: auto;
	width: 20%;
	margin-top: 1%;
	text-align: right;
}
.add-on-logistic {
	float: left;
	height: auto;
	width: 100%;
	font-family: serithairegular;
	font-size: 0.9rem;
	display: flex;
	justify-content: left;
	align-items: center;
	margin-top: 1%;
	margin-bottom: 2%;
	color: #666;
}
.add-on-logistic-term a {
	color: #999;
	margin-left: 2%;
	float: left;
	height: auto;
	width: 90%;
	font-family: serithairegular;
	font-size: 0.9rem;
}








.out-pay-left {
	float: left;
	height: auto;
	width: 80%;
	margin-left: 10%;
}
.out-pay-later {
	font-family: serithairegular;
	font-size: 1rem;
	color: #666;
	background-color: #FFFFFF;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 1%;
	margin-bottom: 1%;
	text-align: center;
	border: 1px solid #CCCCCC;
	padding: 1%;
	line-height: 160%;
	border-radius: 15px;
}
.out-pay-right {
	float: left;
	height: auto;
	width: 80%;
	margin-left: 10%;
	margin-top: 5%;
}
.out-pay-shiping {
	font-family: serithairegular;
	font-size: 1rem;
	color: #666;
	background-color: #FFFFFF;
	float: right;
	height: auto;
	width: 100%;
	margin-top: 1%;
	margin-bottom: 1%;
	text-align: center;
	padding: 1%;
	line-height: 160%;
	border: 1px solid #CCCCCC;
	border-radius: 15px;
}
.out-pay-shiping-02 {
	font-family: serithairegular;
	font-size: 1rem;
	color: #666;
	background-color: #FFFFFF;
	float: left;
	height: auto;
	width: 80%;
	margin-top: 1%;
	margin-bottom: 1%;
	text-align: center;
	border: 1px solid #CCCCCC;
	line-height: 160%;
	margin-left: 10%;
	padding-top: 1%;
	padding-bottom: 1%;
	border-radius: 15px;
}
.out-pay-final {
	float: left;
	height: auto;
	width: 96%;
	margin-top: 1%;
	margin-bottom: 5%;
	border: 5px solid #cea0de;
	padding-top: 3%;
	padding-right: 1%;
	padding-bottom: 5%;
	padding-left: 1%;
	border-radius: 15px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
	background-image: url(../images/bg-line-02.png);
	background-repeat: repeat;
	background-color: #EAD5F0;
}

.out-sum-price-detail {
	font-family: serithairegular;
	font-size: 2rem;
	color: #333;
	background-color: rgba(255, 255, 255, 0.5);
	float: left;
	height: auto;
	width: 80%;
	margin-top: 3%;
	margin-bottom: 3%;
	text-align: center;
	border-radius: 15px;
	border: 2px solid #e26cb4;
	line-height: 160%;
	padding-top: 2%;
	padding-bottom: 2%;
	margin-left: 10%;
}
.font-small-01 {
	font-family: serithairegular;
	font-size: 1rem;
}
.title-sum-text {
	font-family: "Noto Sans Thai";
	font-size: 1.05rem;
	color: #666;
	text-align: right;
	float: right;
	height: auto;
	width: 80%;
	padding-bottom: 2%;
	border-bottom-width: 1.5px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
	margin-top: 2%;
	margin-bottom: 5%;
	margin-right: 5%;
}

.box-show-list-item {
	float: right;
	height: auto;
	width: 95%;
	margin-bottom: 2%;
	margin-right: 5%;
}
.name-show-list-item {
	text-align: right;
	float: left;
	height: auto;
	width: 65%;
	font-family: serithairegular;
	font-size: 1rem;
	color: #666;
}
.price-show-list-item {
	font-family: serithairegular;
	font-size: 1rem;
	color: #92278f;
	float: right;
	width: 30%;
	text-align: right;
}



.call-01 {
	font-family: Noto Sans Thai;
	font-size: 1.05rem;
	color: #333333;
	text-align: center;
	float: left;
	height: auto;
	width: 98%;
	margin-bottom: 1%;
	background-color: #E4E4E4;
	padding-top: 3.5%;
	padding-bottom: 3%;
	margin-left: 1%;
	border-radius: 15px;
}
.call-02 {
	font-family: Noto Sans Thai;
	font-size: 1.05rem;
	color: #FFFFFF;
	text-align: center;
	float: left;
	height: auto;
	width: 98%;
	margin-bottom: 3%;
	background-color: #e26cb4;
	padding-top: 3.5%;
	padding-bottom: 3%;
	margin-left: 1%;
	border-radius: 15px;
	
}
.editor-01 {
	font-family: Noto Sans Thai;
	font-size: 1rem;
	line-height: 120%;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 5%;
}
.editor-02 {
	font-family: Noto Sans Thai;
	font-size: 1rem;
	line-height: 120%;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 5%;
}
.box-review {
	background-color: #e26cb4;
	background-image: url(../images/bg-line-01.png);
	background-repeat: repeat;
	background-position: center center;
	float: left;
	height: auto;
	width: 100%;
	padding-top: 3%;
	padding-bottom: 3%;
}
.title-review {
	float: left;
	height: auto;
	width: auto;
	margin-top: 5%;
	margin-bottom: 2%;
	padding-top: 2%;
	padding-right: 5%;
	padding-bottom: 2%;
	padding-left: 40px;
	border: 1px solid #fde594;
	border-radius: 15px;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #FFF;
	text-align: center;
	background-image: url(../images/icon-list.jpg);
	background-repeat: no-repeat;
	background-position: 20px center;
	background-size: 8%;
}
.picture-review {
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 5%;
}
.box-cutomer-review {
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 1%;
	margin-top: 1%;
	padding-top: 5%;
	padding-bottom: 1%;
}
.box-tracking-search {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 2%;
}
.title-name-contactus {
	font-family: "FC Lamoon Bold";
	font-size: 2rem;
	color: #FFF;
	background-color: #e26cb4;
	float: left;
	height: auto;
	width: 80%;
	text-align: center;
	border-radius: 15px;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-top: 2%;
	margin-right: 20px;
	margin-left: 10%;
}
.stand-contact {
display:none;
}

.stand-contact-m {
	float: right;
	height: auto;
	width: 40%;
	margin-left: 5%;
	position: fixed;
	z-index: 99999;
	bottom: 100px;
	right: 0px;
}
.stand-contact-m img {
	height: auto;
	width: 100%;
}
.box-contact {
	float: left;
	height: auto;
	width: 80%;
	margin-top: 5%;
	margin-bottom: 2%;
	margin-left: 10%;
}
.title-contact {
	font-family: "FC Lamoon";
	font-size: 1.8rem;
	color: #333;
	float: left;
	height: auto;
	width: 45%;
	margin-bottom: 10%;
	border: 1px solid #92278f;
	padding-top: 1%;
	padding-right: 4%;
	padding-bottom: 1%;
	padding-left: 4%;
	border-radius: 15px;
	text-align: center;
	margin-top: 5%;
}
.contact-list-01 {
	background-image: url(../images/icon-contact-01.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 13%;
	float: left;
	width: 80%;
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 50px;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	height: auto;
	margin-bottom: 6%;
}
.contact-list-03 {
	background-image: url(../images/icon-contact-03.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 13%;
	float: left;
	width: 80%;
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 50px;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	height: auto;
	margin-bottom: 6%;
}
.contact-list-04 {
	background-image: url(../images/icon-contact-04.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 13%;
	float: left;
	width: 80%;
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 50px;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	height: auto;
	margin-bottom: 6%;
}
.contact-list-05 {
	background-image: url(../images/icon-contact-05.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 13%;
	float: left;
	width: 80%;
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 50px;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	height: auto;
	margin-bottom: 6%;
}
.contact-list-06 {
	background-image: url(../images/icon-contact-06.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 13%;
	float: left;
	width: 80%;
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 50px;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	height: auto;
	margin-bottom: 6%;
}




.contact-list-02 {
	background-image: url(../images/icon-contact-02.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 13%;
	float: left;
	width: 80%;
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 50px;
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	height: auto;
	margin-bottom: 5%;
}
.box-social {
	float: left;
	height: auto;
	width: 80%;
	border-left-width: 0px;
	margin-top: 5%;
	margin-bottom: 5%;
	margin-left: 10%;
}
.box-login-center {
	float: left;
	height: auto;
	width: 100%;
	border: 1px solid #cea0de;
	margin-top: 10%;
	padding-top: 10%;
	padding-bottom: 10%;
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
	margin-bottom: 10%;
}
.box-register {
	float: left;
	height: auto;
	width: 100%;
	border: 1px solid #cea0de;
	margin-top: 5%;
	padding-top: 6%;
	padding-bottom: 5%;
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
	margin-bottom: 10%;
}
.box-username {
	float: left;
	height: auto;
	width: 90%;
	margin-bottom: 2%;
	margin-left: 5%;
}
.title-username {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	padding-top: 12px;
}
.input-username {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 10px;
}
.input-username-show {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 10px;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #999;
}
.btn-input-username {
	font-family: Noto Sans Thai;
	font-size: 0.9rem;
	color: #333;
	text-align: left;
	height: auto;
	width: 90%;
	border: 1px solid #CCC;
	border-radius: 15px;
	padding-top: 3%;
	padding-right: 5%;
	padding-bottom: 3%;
	padding-left: 5%;
}
.btn-input-review {
	font-family: Noto Sans Thai;
	font-size: 0.9rem;
	color: #333;
	text-align: left;
	height: 5em;
	width: 90%;
	border: 1px solid #CCC;
	border-radius: 5px;
	padding-top: 3%;
	padding-right: 5%;
	padding-bottom: 3%;
	padding-left: 5%;
}


.forgot-password a{
	font-family: serithairegular;
	font-size: 1rem;
	color: #666;
	text-align: left;
	float: right;
	height: auto;
	width: 25%;
	margin-top: 2%;
	text-decoration: none;
}
.register-go a {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	padding-top: 5%;
	padding-bottom: 5%;
	background-color: #fde594;
	text-align: center;
	margin-top: 1%;
	margin-bottom: 15%;
	border-radius: 15px;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.register-go a:hover {
	background-color: #FBCD2F;
}
#inputcontainer {
	display: flex;
}
#inputcontainer > svg {
	margin-left: 10px;
}
.field-icon {
	float: right;
	margin-left: -40px;
	margin-top: -29px;
	position: relative;
	z-index: 2;
	left: -10px;
}
.pay-shipping-now {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}
.pay-shipping-now-02 {
	float: left;
	height: auto;
	width: 80%;
	margin-left: 10%;
	margin-top: 2%;
}

.btn-pay-shipping-now {
    background-color: #92278f;
    width: 100%;
    font-family: 'serithairegular', sans-serif;
    font-size: 1rem;
    color: #FFF;
    border-radius: 15px;
    padding: 15px 10px;
    box-shadow: 0 4px 15px rgba(146, 39, 143, 0.3);
    border: 2px solid #cea0de;
    cursor: pointer;
    display: block;
    outline: none;
    
    /* หัวใจสำคัญ: ใช้ transition คุมทุกอย่าง */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* อนิเมชั่น Pulse เฉพาะแสงเงา ไม่ให้กระทบตัวปุ่ม */
    animation: pulse-purple-glow 2s infinite;
}

@keyframes pulse-purple-glow {
    0% { box-shadow: 0 0 0 0 rgba(146, 39, 143, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(146, 39, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(146, 39, 143, 0); }
}

.btn-pay-shipping-now:hover {
    background-color: #cea0de;
    color: #92278f;
    border: 2px solid #92278f;
    /* การยกตัวที่นุ่มนวล */
    transform: translateY(-7px);
    box-shadow: 0 12px 25px rgba(146, 39, 143, 0.5);
    font-weight: bold;
}

btn-pay-shipping-now:active {
    transform: translateY(-2px);
    transition: all 0.1s; /* จังหวะกดให้ตอบสนองไวขึ้น */
}




.box-status-product-tracking {
	float: left;
	height: auto;
	width: 98%;
	padding-top: 2%;
	padding-bottom: 2%;
	margin-bottom: 1%;
	border-radius: 15px;
	border: 2px dotted #FFCC00;
	background-color: #FDE594;
	background-image: url(../images/bg-line-01.png);
	background-repeat: repeat;
}
.box-status-product-tracking-m{
	float: left;
	height: auto;
	width: 99%;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	margin-bottom: 1%;
	border-radius: 15px;
	border: 2px dotted #FFCC00;
	background-color: #FDE594;
	background-image: url(../images/bg-line-01.png);
	background-repeat: repeat;
	display: inline;
	}
.icon-status-product-tracking {
	float: left;
	height: auto;
	width: 10%;
	animation: tilt 2s ease-in-out infinite;
	margin-right: 3%;
	margin-left: 4%;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #333;
}
@keyframes tilt {
  0%, 100% { transform: rotate(0deg); } /* ท่าตรง */
  25%      { transform: rotate(-10deg); } /* ตะแคงซ้าย */
  75%      { transform: rotate(10deg); } /* ตะแคงขวา */
}
.icon-status-product-tracking img {
	height: auto;
	width: 100%;
}



.status-product-tracking {
	font-family: "FC Lamoon Bold";
	font-size: 1.4rem;
	color: #92278f;
	background-size: 15%;
	float: left;
	height: auto;
	width: 70%;
	text-align: left;
	padding: 1%;
	margin-top: 1%;
}
.box-show-num-cart {
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 5%;
	margin-top: 5%;
}


.box-point {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 5%;
	margin-bottom: 5%;
	padding-bottom: 3%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #cea0de;
}
.text-point-01 {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	float: left;
	height: auto;
	width: 40%;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-left: 0%;
}
.text-point-03 {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	float: left;
	height: auto;
	width: 15%;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-left: 2%;
}
.text-point-02 {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	text-decoration: blink;
	text-align: center;
	float: left;
	height: auto;
	width: 30%;
	padding-right: 1%;
	padding-left: 1%;
	border: 1px dotted #cea0de;
	border-radius: 15px;
	padding-top: 1%;
	padding-bottom: 1%;
}



/* --- ปุ่มรีวิวสินค้า (สะสมแต้ม) --- */
.go-review {
	display: flex;
	justify-content: center; /* ใช้ margin auto แทนการใช้ float เพื่อจัดกลาง */
	float: left;
	margin-top: 2%;
	margin-bottom: 5%;
	height: auto;
	width: 100%;
}

.go-review a {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    color: #ff69b4;
    text-decoration: none;
    font-family: 'serithairegular', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 12px;
    border: 2px solid #ffb6c1;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.go-review a::before {
    content: "✨";
    font-size: 1.3rem;
    display: inline-block;
    animation: star-wiggle 1.5s infinite ease-in-out;
}

@keyframes star-wiggle {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50% { transform: rotate(10deg) scale(1.2); }
}

.go-review a:hover {
    background-color: #fff0f5;
    border-color: #ff69b4;
    color: #ff1493;
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(255, 105, 180, 0.25);
}
.reviewed {
	display: flex;
	justify-content: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 5%;
}

.reviewed a {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    color: #ff69b4;
    text-decoration: none;
    font-family: 'serithairegular', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 12px;
    border: 2px solid #ffb6c1;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
    transition: all 0.3s ease;
    cursor: default; /* เปลี่ยนลูกศรให้เป็นแบบปกติเพราะรีวิวไปแล้ว */
}

/* ตั้งค่าไอคอนเครื่องหมายถูก */
.reviewed a::before {
    content: "✅";
    font-size: 1rem;
    display: inline-block;
    /* แอนิเมชั่นเด้งเบาๆ แบบนุ่มนวล */
    animation: check-bounce 2s infinite ease-in-out;
}

/* คีย์เฟรมให้เครื่องหมายถูกยืด-หดแบบสมูท */
@keyframes check-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* เมื่อ Hover ให้ดูนิ่งและมั่นคง */
.reviewed a:hover {
    background-color: #fff9fb;
    border-color: #ff69b4;
    box-shadow: 0 6px 15px rgba(255, 105, 180, 0.2);
}

.reviewed a:hover::before {
    animation-play-state: paused; /* หยุดขยับเมื่อเมาส์วาง */
    transform: scale(1.1);
}
.btn-file {
	font-family: serithairegular;
	font-size: 1rem;
	margin-bottom: 3%;
}
.box-select-item-list-01 {
	float: left;
	height: auto;
	width: 100%;
}

.select-item-list {
	float: left;
	height: auto;
	width: 100%;

}
/* 1. ตั้งค่าพื้นฐาน */
        .adv-selection-wrapper {
	width: 100%;

	font-family: serithairegular;
	position: relative;
	margin-top: 1%;
	margin-bottom: 1%;
	float: left;
        }

        /* 2. ตัวปุ่มกดหลัก (Select Box) */
        .adv-modern-select {
            width: 100%;
            min-height: 60px; /* ความสูงช่องหลัก */
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #ffffff;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-sizing: border-box;
            font-size: 16px;
            color: #333;
        }

        .adv-modern-select:hover {
            border-color: #d8b4fe;
        }

        .adv-modern-select.active {
            border-color: #a855f7;
            box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.1);
        }

        /* ลูกศร */
        .adv-arrow {
            border: solid #64748b;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(45deg);
            transition: transform 0.3s;
        }

        .adv-modern-select.active .adv-arrow {
            transform: rotate(-135deg);
            margin-top: 5px;
        }

        /* 3. รายการลีสย่อย (The List) */
        .adv-options-list {
            position: absolute;
            top: calc(100% + 8px); /* เว้นระยะห่างจากตัวบนเล็กน้อย */
            left: 0;
            width: 100%;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border: 1px solid #e2e8f0;
            overflow: hidden;
            z-index: 1000;
            display: none; /* ปิดไว้ก่อน */
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .adv-options-list.show {
            display: block;
            animation: fadeIn 0.2s ease-out;
        }

        /* 4. รายการย่อย - เพิ่มความสูงบนล่างที่นี่ */
        .adv-option-item {
            padding: 18px 20px; /* เพิ่มความห่าง บน-ล่าง ตรงนี้ */
            font-size: 16px;
            color: #4a5568;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #f8fafc;
        }

        .adv-option-item:last-child {
            border-bottom: none;
        }

        /* เมาส์วางเปลี่ยนเป็นสีม่วงอ่อน */
        .adv-option-item:hover {
            background-color: #f3e8ff; /* สีม่วงอ่อน */
            color: #7e22ce;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
.box-product-detail-etc {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 2%;
}
.detail-item-01 {
	color: #999;
	margin-left: 5px;
	font-size: 0.9rem;
}
.arrow-select-01 {
	font-family: Noto Sans Thai;
	font-size: 1.05rem;
	color: #333;
	background-image: url(../images/icon-back.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 5%;
	float: left;
	height: auto;
	width: 90%;
	padding-left: 7%;
	border-bottom-width: 1.5px;
	border-bottom-style: solid;
	border-bottom-color: #cea0de;
	padding-bottom: 1%;
	padding-top: 1%;
	margin-bottom: 4%;
	margin-top: 2%;
}
.status-product-ready {
	float: left;
	height: auto;
	width: 90%;
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: 5%;
}

.how-step-num {
	font-family: "Noto Sans Thai";
	font-size: 1.8rem;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 5%;
	margin-bottom: 1%;
	padding-bottom: 1%;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #333;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
}
.terms-step-num {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 5%;
	margin-bottom: 0.5%;
	padding-bottom: 0.5%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	font-weight: bold;
	text-align: left;
}
.picture-review #slide .splide__track .splide__list .splide__slide img {
	height: auto;
	width: 100%;
	margin-right: 1%;
	margin-left: 1%;
}
/* จัดข้อความให้อยู่แถวเดียวกัน */
.title-show-text-review, 
.title-show-num-review {
    display: inline-block;  /* สั่งให้ div ไม่ขึ้นบรรทัดใหม่ */
    vertical-align: middle; /* จัดให้ข้อความตรงกันในแนวตั้ง */
    font-family: 'serithairegular', sans-serif;
    font-size: 1rem;
}

/* เพิ่มระยะห่างและสไตล์ให้หัวข้อ */
.title-show-text-review {
    color: #333;
    font-weight: bold;
    margin-right: 8px;      /* เว้นระยะห่างจากตัวเลข */
}

/* สไตล์สำหรับตัวเลข */
.title-show-num-review {
    color: #92278f;         /* สีม่วงตามธีมหลักของคุณ */
    font-weight: normal;
}
.title-show-back-review {
    font-family: serithairegular, sans-serif;
    font-size: 1rem;
    color: #666;
    float: left;
    height: auto;
    width: 100%;
    margin-top: 2%;
}

.title-show-back-review a {
    color: #666;
    text-decoration: none;
    display: inline-flex;    /* ช่วยให้จัดตำแหน่งไอคอนและข้อความง่ายขึ้น */
    align-items: center;
    transition: all 0.3s ease; /* หัวใจสำคัญ: ทำให้การขยับนุ่มนวล */
}.box-point-all {
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 5%;
}

.box-item-point {
	padding: 1%;
	float: left;
	height: auto;
	width: 46%; /* ล็อคขนาดเดิม */
	border: 1px solid #cea0de;
	border-radius: 15px;
	background-color: #fff;
	transition: border-color 0.3s, box-shadow 0.3s; /* ตัด transform ออกจากตัวแม่ */
	box-sizing: border-box;
	overflow: hidden; /* กักเก็บการขยายให้อยู่แค่ข้างใน */
	position: relative;
	margin: 1.2%;
}

/* เมื่อ Hover: เปลี่ยนแค่สีขอบและเพิ่มเงา (ไม่ขยายตัวกล่อง) */
.box-item-point:hover {
    border-color: #92278f;
    box-shadow: 0 4px 15px rgba(146, 39, 143, 0.15);
    cursor: pointer;
}

/* จัดการส่วนรูปภาพให้ขยาย "ข้างใน" แทน */
.picture-point {
    width: 100%;
    overflow: hidden; /* บังคับให้รูปที่ขยายไม่ล้นขอบกล่อง */
    border-radius: 10px;
}

.picture-point img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease; /* ให้รูปค่อยๆ ซูมเข้า */
}

/* เอฟเฟกต์ซูมรูปเมื่อ Hover ที่กล่องแม่ */
.box-item-point:hover .picture-point img {
    transform: scale(1.1); /* รูปขยายขึ้น 10% แต่ขนาดกล่อง 20% เท่าเดิม */
}

/* เมื่อ Checkbox ถูกเลือก (Checked) */
.box-item-point:has(.check-point:checked) {
    /* ใช้ border 2px แต่ต้องระวังเรื่องขนาดกล่องขยับ */
    /* วิธีแก้คือใช้ outline หรือยอมให้ border หนาขึ้นแต่ขนาดเท่าเดิมด้วย box-sizing */
    border: 2px solid #92278f;
    background-color: #fdf8ff;
    padding: calc(1% - 1px); /* ลบ padding ออก 1px ชดเชยขอบที่หนาขึ้น */
}

.show-point {
    font-family: serithairegular, sans-serif;
    font-size: 1rem;
    color: #333;
    text-align: center;
    width: 100%;
    margin-top: 10%;
    margin-bottom: 5%;
}

.select-point {
    width: 100%;
    margin-top: 1%;
    margin-bottom: 2%;
    text-align: center;
}

/* ส่วนของตัว Checkbox */
.check-point {
    width: 25px;
    height: 25px;
    cursor: pointer;
    accent-color: #92278f;
    transition: transform 0.2s ease;
    vertical-align: middle;
}

/* Checkbox ขยายได้เพราะมันอยู่ตรงกลาง ไม่ดันขอบกล่อง */
.check-point:hover {
    transform: scale(1.2);
}

/* --- ส่วนของปุ่มหลัก (แก้ไขข้อมูล) --- */
.box-login-go {
	float: left; /* ยกเลิก float เพื่อใช้ margin auto ในการจัดกลาง */
	width: 90%;
	max-width: 400px;
	margin: 5%;
}

.btn-login-go {
    background-color: #e26cb4;
    width: 100%;
    padding: 15px 10px; /* ใช้ px แทน % เพื่อความคงที่ของรูปทรงปุ่ม */
    border-radius: 15px;
    border: none;
    font-family: 'serithairegular', sans-serif;
    font-size: clamp(1rem, 4vw, 1.2rem); /* ปรับขนาดตามความกว้างจอ */
    color: #FFF;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(226, 108, 180, 0.3);
}

.btn-login-go:hover {
    background-color: #D93C9A;
    transform: translateY(-2px);
}

.btn-login-go:active {
    transform: scale(0.95); /* เอฟเฟกต์ปุ่มยุบเมื่อกด */
}

/* --- ส่วนของ Popup Responsive --- */
.p-redeem-overlay {
    display: none; /* ปิดไว้ก่อน */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    align-items: center; /* จัดกึ่งกลางแนวตั้ง */
    justify-content: center; /* จัดกึ่งกลางแนวนอน */
}

.p-redeem-box {
    background-color: #e9d3ed;
    width: 85%; /* กว้าง 85% ในมือถือ */
    max-width: 420px; /* ไม่เกิน 420px ในคอม */
    padding: 30px 20px;
    border-radius: 25px;
    border: 4px solid #ffffff;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    animation: pPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ปรับปรุงกลุ่มปุ่มใน Popup */
.p-redeem-btn-group {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.p-redeem-btn-confirm, 
.p-redeem-btn-cancel {
    flex: 1; /* ให้ปุ่มกว้างเท่ากันทั้งสองฝั่ง */
    padding: 12px 5px;
    border-radius: 50px;
    font-family: 'serithairegular', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: 0.2s;
}

.p-redeem-btn-confirm {
    background: linear-gradient(135deg, #92278f 0%, #6d1c6a 100%);
    color: white;
}

.p-redeem-btn-cancel {
    background: #fff;
    color: #888;
    border: 1px solid #ccc;
}

/* Animation */
@keyframes pPopIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.box-sub-detail-00 {
	float: left;
	height: auto;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;

}
.box-sub-detail-01 {
	float: left;
	height: auto;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}
.box-sub-detail-02 {
	float: left;
	height: auto;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}
.box-sub-detail-row {
	flex-direction: column;
}
}