<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* --------------- Thumbnail -------------- */
.pdtthumb {
	margin-left:auto;
	margin-right:auto;
}

.pdtt {
	float:left;
	width:25%;
	/* height:435px; */
	margin-bottom:20px;
}

.pdttm {
	width:20%;
}

.pdtts {
	width:16.5%;
}

.pdttr {
	float:left;
	/* height:435px; */
}

.pdtz {					/* Box For Absolute Change */	
	width:100%;
	/* background:#ffffff; */
}

.pdtz2 {					/* Box For Absolute Change */	
	width:100%;
	/* background:#ffffff; */
}

.pdtx {					/* Product Container */	
	position:relative;
	width:100%;
	padding:10px;
	box-sizing: border-box;
	transition: box-shadow 0.3s;
}

.pdtxx {					/* Product Container ใช้ในกรณีเปิดใน mobile ไม่ต้องการให้มี hover */	
	position:relative;
	width:100%;
	padding:10px;
	box-sizing: border-box;
	transition: box-shadow 0.3s;
}

.pdtx2 {					/* Product Container */	
	position:relative;
	width:100%;
	padding:10px;
	box-sizing: border-box;
	border:#ffffff solid 1px;
	transition: border 0.3s;
}

.pdtxsn {					/* Product Status New */
	position:absolute;
	z-index:1;
	width:55px;
	height:55px;
	background:url(../../template/0000/images/tag-new5.png);
}

.pdtxsh {					/* Product Status Hot */
	position:absolute;
	z-index:1;
	width:55px;
	height:55px;
	background:url(../../template/0000/images/tag-hot.png);
}

.pdtxsp {					/* Product Status Pre Order */
	position:absolute;
	z-index:1;
	margin-top:5px;
	margin-left:5px;
	width:42px;
	height:42px;
	background:url(../../template/0000/images/tag-preorder.png);
}

.pdtxi {				/* Product Image */
	width:100%;
	/* height:280px; */
	text-align:center;
	overflow:hidden;
}

.pdtxi img {				/* Product Image */
	max-width:100%;
	transition: all .3s ease-in-out;
}

.pdtxn {				/* Product Name */
	margin-left:auto;
	margin-right:auto;
	width:93%;
	height:50px;
	padding-top:10px;
	padding-bottom:10px;
	line-height:20px;
	font-family: Tahoma;
	font-size: 1.15em;
	color:#434444;
	text-align:center;	
	border-bottom:#cccccc dotted 1px;
	word-wrap:break-word;
	overflow:hidden;
	
	max-height:50px;
	transition: max-height 0.3s ease;
}

.pdtxr {				/* Product Rating */
	margin-left: auto;
	margin-right: auto;
	width: 93%;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom:#cccccc dotted 1px;
	display:none;
}

.pdtxr1 {				/* Product Rating(Star) */
	float:left;
	height:15px;
}

.pdtxr2 {				/* Product Rating(Qty Review) */
	float:right;
	padding-left:10px;
	height:15px;
	line-height:15px;	
	color:#C4C4C4;
	font-family:Tahoma;
	font-size:12px;		
}

.pdtd {
	float:left;
	width:79%;
	word-wrap:break-word;
	padding:10px;
	padding-left:0px;
	box-sizing:border-box;	
	font-family:Tahoma;
	font-size:1em;
	color:#555555;
}

.pdtxp {				/* Product Price */
	width:100%;
	height:25px;
	line-height:25px;
	overflow:hidden;
	text-align:center;	
}


.pdtxp span:nth-child(1) {				/* Product Price(Real) */
	font-family:Tahoma;
	font-size:1.1em;
	font-weight:bold;
	color:#EC117A;	
}

.pdtxp span:nth-child(2) {				/* Product Price(Fake) */
	padding-left:10px;
	font-family:Tahoma;
	font-size:1.1em;
	text-decoration:line-through;
	color:#999999;	
}

.pdtx:hover {
		-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	padding-bottom:40px;
}

.pdtx:hover .pdtxn {
	height:auto;
	min-height:43px;	
	/* padding-bottom:10px; */
    	max-height: 500px;
}


.pdtx:hover .pdtxi img {
	transform: scale(1.3);
}

.pdtx2:hover {
	box-sizing: border-box;
	border:#66afe9 solid 1px;
}

.pdtx2:hover .pdtxi img {
	transform: scale(1.3);
}

.pdtbt {
	width:100%;
	height:1px;	
	visibility:hidden;
	opacity:0;
	transition:visibility 0s linear 0.5s,opacity 0.5s linear;	
}

.pdtbttn {
	float:left;
	width:24%;
	height:1px;
	border:#eeeeee solid 1px;	
	border-left:none;
	cursor:pointer;
	transition: max-height 0.3s ease-in;
	transition: background-color 0.4s ease;
	/* transition: background-position 0.3s ease; */
}

.pdtx2 .pdtbt {
	height:41px;
}

.pdtx2 .pdtbttn {
	height:41px;
}


.pdtbttn:first-child {
	border-left:#eeeeee solid 1px;
}

.pdtbc {
	background:url(../../template/0000/images/bttn_cart1.png) no-repeat center;
}

.pdtbc:hover {
	background:url(../../template/0000/images/bttn_cart2.png) no-repeat center;
}

.pdtbw {
	background:url(../../template/0000/images/bttn_wishlist1.png) no-repeat center;
}

.pdtbw:hover {
	background:url(../../template/0000/images/bttn_wishlist2.png) no-repeat center;
}

.pdtbs {
	background:url(../../template/0000/images/bttn_share1.png) no-repeat center;
}

.pdtbs:hover {
	background:url(../../template/0000/images/bttn_share2.png) no-repeat center;
}

.pdtbi {
	background:url(../../template/0000/images/bttn_info1.png) no-repeat center;
}

.pdtbi:hover {
	background:url(../../template/0000/images/bttn_info2.png) no-repeat center;
}

.pdtbttn:hover {	
	background-color:#ff5777;
}

.pdtbz {
	width:40px;
	height:40px;
	background:url(../../template/0000/images/bttn_zoom.png);
	position:absolute;
	z-index:2;
	top:25px;
	right:22px;
	cursor:pointer;
	visibility:hidden;
	opacity:0;
	transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}

.pdtx:hover .pdtxr {
	display:block;
}

.pdtx:hover .pdtbt {
	height:41px;
	visibility:visible;
	opacity:1;
	transition-delay:0s;
}

.pdtx:hover .pdtbttn {
	height:39px;
}

.pdtx:hover .pdtbz {
	visibility:visible;
	opacity:1;
	transition-delay:0s;
}

.pdtbz:hover {
	background:url(../../template/0000/images/bttn_zoom2.png);
}

.pdtx2:hover .pdtbz {
	visibility:visible;
	opacity:1;
	transition-delay:0s;
}

.pdtbz2:hover {
	background:url(../../template/0000/images/bttn_zoom2.png);
}

.pdtx2:hover .pdtbt {
	visibility:visible;
	opacity:1;
	transition-delay:0s;
}

.pdtx2:hover .pdtxr {
	display:block;
}

/*
.pdtbq {
	width:31px;
	height:31px;
	background:url(../../template/0000/images/bttn_quickview.png);
	position:absolute;
	top:61px;
	right:20px;
	cursor:pointer;
	visibility:hidden;
	opacity:0;
	transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}

.pdtx:hover .pdtbq {
	visibility:visible;
	opacity:1;
	transition-delay:0s;
}
*/

/* ------- Thumbnail (ต้องเซ็ตเพิ่ม เพราะถ้าไม่เซ็ต จะเกิดปัญหา image overlap ตอนที่เริ่มต้น start masonry เพราะมันจะไม่รู้ว่ารูปภาพสูงเท่าไหร่จนกว่าจะโหลดเสร็จ ทำให้เกิดปัญหาการคำนวณความสูงของ div และเกิด overlap ขึ้น) ------- */

/* ขนาดรูปจะเล็กกว่าขนาดกรอบอยู่ 20 pixel (ขนาดภาพปกติคือ 300 x 300 pixel) */







/* -------------------------- Thumbnail Horizontal (Content) -------------------------- */

.pdtth {
	float:left;
	width:100%;
	margin-bottom:20px;
}

.pdtxih {
	float:left;
	width: 25%;
	max-width:300px;
	margin-right:1%;
	text-align: left;
}

.pdtxihs {
	width: 20%;
}

.pdtxrss {
	width:79%;	
}

.pdtxnh {				/* Product Name */
	float:left;
	width:100%;
	text-align:left;
}

.pdtbzh {
	top:80px;
	left:22px;
}

.pdtxrh {				/* Product Rating */
	float:left;
	display:inline-block;
	padding-top:10px;
	padding-bottom:10px;
	width:100%;
	border-bottom:none;
}

.pdtxr2h {				/* Product Rating(Qty Review) */
	float:left;
	padding-left:20px;
}

.pdtdh {
	display:block;
}

.pdtxh:hover .pdtxnh {
	height:auto;
	min-height:43px;			
	padding-bottom:0px;
	max-height: 500px;
}

.pdtxph {				/* Product Price */
	float:left;
	width:100%;
	text-align:left;
	height:auto;
	line-height:none;
	padding-top:5px;
	padding-bottom:5px;
}

.pdtxph span:nth-child(1) {				/* Product Price(Real) */
	font-size:1.2em;
}

.pdtxph span:nth-child(2) {				/* Product Price(Fake) */
	font-size:1.2em;
}

.pdtxrs {
	float:left;
	width:74%;	
}

.pdtbth {
	float:left;
	clear:both;
	margin-top:20px;
	max-width:300px;
}

.pdtzh {
	width:100%;
	/* background:#ffffff; */
	border-bottom:#cccccc dotted 1px;
}














/* ---------- Tool Tips ---------- */
		.tooltiptxt{
   			display: inline;
    		position: relative;
		}
		
		.tooltiptxt:hover:after{
    		background: #333;
    		background: rgba(0,0,0,.8);
    		border-radius: 5px;
    		bottom: 45px;
    		color: #fff;
    		/* content: attr(title); */
    		left: 5%;
    		padding: 5px 15px;
    		position: absolute;
    		z-index: 98;
			font-family:Tahoma;
			font-size:12px;
    		text-align:center;
			content: attr(tooltiptxt);
		}
		
		.tooltiptxt:hover:before{
    		border: solid;
    		border-color: #333 transparent;
    		border-width: 6px 6px 0 6px;
    		bottom: 39px;
    		content: "";
    		left: 40%;
    		position: absolute;
    		z-index: 99;
		}</pre></body></html>