/* body {font-family:Arial,Helvetica,sans-serif;background:url(../img/page_bg.gif) repeat} */
p{font-size:12px; line-height:21px; margin-bottom:18px}



/*  _______________________________________

    01 MENU BUTTON
    _______________________________________  */



/* 1. Mega Menu Container */


.megamenu_container {
	width:115px;
	height:44px;
	margin:0;
	position:relative;
	float:left;
	z-index:9;
	background: #3d3d3d; /* Old browsers */
	background: -moz-linear-gradient(top, #3d3d3d 0%, #282828 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d3d3d), color-stop(100%,#282828)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #3d3d3d 0%,#282828 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #3d3d3d 0%,#282828 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #3d3d3d 0%,#282828 100%); /* IE10+ */
	background: linear-gradient(to bottom, #3d3d3d 0%,#282828 100%); /* W3C */
	border:solid 1px #434343;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;	
	-webkit-box-shadow: 0 2px 3px #cccccc;
	-moz-box-shadow: 0 2px 3px #cccccc;
	-o-box-shadow: 0 2px 3px #cccccc;
	box-shadow: 0 2px 3px #cccccc;
}
	.megamenu_container:hover {
		cursor:pointer;
	}
	.megamenu_container a {
		text-decoration: none;
	}
		.megamenu_container a:focus {
			outline:none;
		}


/* 2. Mega Menu Button */


.megamenu {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	list-style:none;
	padding:0;
	margin:0;
}
	.megamenu .top_level {
		display:inline;
		border:none;
		margin:0;
		padding: 14px 0 15px 15px;
	}
		.megamenu .top_level > span {
			font-size:12px;
			color:#ffffff;
			line-height:44px;
			text-transform:uppercase;
			outline:0;
			text-decoration:none;
			text-shadow:1px 1px 1px #000000;
			background:url("../images/arrow_down.png") no-repeat 80px 18px;
			padding:14px 32px 20px 0;
		}



/*  _______________________________________

    02 DROP DOWNS
    _______________________________________  */



/* 1. Drop Downs Default Behavior */

.megamenu .megamenu_main,
.megamenu .megamenu_main ul {
	position:absolute;
	top:-9999em; /* Used to avoid scrollbars */
	left:-9999em;
	width: 235px;
	height: 465px;
	margin:0 0 40px -1px;
	padding:10px 0 0 0;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;	
	-webkit-box-shadow: 0 2px 5px #dddddd;
	-moz-box-shadow: 0 2px 5px #dddddd;
	-o-box-shadow: 0 2px 5px #dddddd;
	box-shadow: 0 2px 5px #dddddd; 
	border:solid 0px #EBEBEB;
	/* border-top:solid 3px #000398; */
	background:#fff; 
	opacity:0;
}

/* Keep the first category panel inside the viewport and scroll only when needed. */
.megamenu > li > .megamenu_main {
	height: auto;
	max-height: min(465px, calc(100vh - 150px));
	padding-bottom: 10px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: #ed008c #f7edf3;
}
.megamenu > li > .megamenu_main::-webkit-scrollbar {
	width: 7px;
}
.megamenu > li > .megamenu_main::-webkit-scrollbar-track {
	background: #f7edf3;
	border-radius: 10px;
}
.megamenu > li > .megamenu_main::-webkit-scrollbar-thumb {
	background: #ed008c;
	border: 2px solid #f7edf3;
	border-radius: 10px;
}

/* Zoom กล่องหมวดหลักแบบเดียวกับกล่อง login */
.catx > .x-cat {
	transform: scale(.86);
	transform-origin: top left;
	transition: transform 180ms cubic-bezier(.2, .75, .25, 1), opacity 180ms ease;
}
.catx:hover > .x-cat,
.catx > .x-cat.megamenu_panel_ready,
.catx > .x-cat.megamenu_panel_waiting {
	transform: none;
}
.catx > .x-cat.megamenu_panel_waiting {
	opacity: 1;
	pointer-events: none;
}

/* Fixed flyouts are not clipped by the scrollable first-level category panel. */
.megamenu .megamenu_main ul.megamenu_flyout_open {
	position: fixed;
	top: var(--megamenu-flyout-top) !important;
	left: var(--megamenu-flyout-left) !important;
	height: var(--megamenu-flyout-height);
	max-height: var(--megamenu-flyout-height);
	box-sizing: border-box;
	margin: 0;
	padding-bottom: 10px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	opacity: 1;
	transform: none;
	transform-origin: var(--megamenu-flyout-origin, top left);
	z-index: 1100;
}
.megamenu .megamenu_main ul.megamenu_flyout_open.megamenu_flyout_closing {
	opacity: 0;
	transform: scale(.88);
	pointer-events: none;
}
.megamenu .megamenu_main ul.megamenu_flyout_open::-webkit-scrollbar {
	width: 7px;
}
.megamenu .megamenu_main ul.megamenu_flyout_open::-webkit-scrollbar-track {
	background: #f7edf3;
	border-radius: 10px;
}
.megamenu .megamenu_main ul.megamenu_flyout_open::-webkit-scrollbar-thumb {
	background: #ed008c;
	border: 2px solid #f7edf3;
	border-radius: 10px;
}
.megamenu .megamenu_main li .megamenu_2col {
	width: 400px;
}
.megamenu .megamenu_main li .megamenu_3col {
	width: 600px;
}
.megamenu > li .megamenu_main {
	top:0px;
	left:0;
	opacity:1;
}
.megamenu .megamenu_main li:hover > ul {
	top:-3px;
	left:100%;
	opacity:1;
}
.megamenu .megamenu_main li:hover > .left_dropdown {
	left:-100%;
}

.megamenu > li .main_opened {
	top:42px;
	left:0;
	opacity:1;
}

/* 2. Fade Transition */

.megamenu_fade .megamenu_main,
.megamenu_fade .megamenu_main ul {
	-webkit-transition: opacity 0.4s 0.2s;
	-moz-transition: opacity 0.4s 0.2s;
	-o-transition: opacity 0.4s 0.2s;
	-ms-transition: opacity 0.4s 0.2s;
	transition: opacity 0.4s 0.2s;
}

/* 3. Slide Transition */

.megamenu_slide .megamenu_main {
	top:30px;
	-webkit-transition: top 0.3s 0.2s, opacity 0 0.2s;
	-moz-transition: top 0.3s 0.2s, opacity 0 0.2s;
	-o-transition: top 0.3s 0.2s, opacity 0 0.2s;
	-ms-transition: top 0.3s 0.2s, opacity 0 0.2s;
	transition: top 0.3s 0.2s, opacity 0 0.2s;
}
.megamenu_slide .megamenu_main ul {
	left:80%;
	-webkit-transition: left 0.2s 0.2s, opacity 0 0.2s;
	-moz-transition: left 0.2s 0.2s, opacity 0 0.2s;
	-o-transition: left 0.2s 0.2s, opacity 0 0.2s;
	-ms-transition: left 0.2s 0.2s, opacity 0 0.2s;
	transition: left 0.2s 0.2s, opacity 0 0.2s;
}
.megamenu_slide .megamenu_main li > .left_dropdown {
	left:-80%;
}

/* 4. Toggle Transition */

.megamenu_toggle .megamenu_main {
	top:30px;
	-webkit-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	-moz-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	-o-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	-ms-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	transition: opacity 0.4s 0.2s, top 0.3s 0.2s;

}
.megamenu_toggle .megamenu_main ul {
	left:90%;
	-webkit-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	-moz-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	-o-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	-ms-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
}
.megamenu.megamenu_toggle .megamenu_main ul {
	transform: scale(.88);
	transform-origin: var(--megamenu-flyout-origin, top left);
	transition: opacity 170ms ease, transform 170ms cubic-bezier(.2, .75, .25, 1);
}
.megamenu.megamenu_toggle .megamenu_main ul.megamenu_flyout_open {
	transform: none;
}
.megamenu.megamenu_toggle .megamenu_main ul.megamenu_flyout_open.megamenu_flyout_closing {
	transform: scale(.88);
}
.megamenu_toggle .megamenu_main li > .left_dropdown {
	left:-90%;
}



/*  _______________________________________

    03 DROP DOWN ELEMENTS
    _______________________________________  */



/* 1. Arrows */


.megamenu .dropdown_arrow {
	background-image:url("../images/arrow_left.png");
	background-repeat: no-repeat;
	background-position: 95% 48%;
}
.megamenu .dropdown_arrow:hover {
	background-image:url("../images/arrow_left_hover.png");
}

.megamenu > li .megamenu_main a {
	text-decoration: none;
	color:#333333;
}


/* 2. List Elements */


.megamenu > li ul {
	list-style: none;
	padding:0 0 0 18px;
	margin:0 0 18px 0;
}
.megamenu > li ul li {
	/* font-size:12px; */
	position:static;
	color:#333333;
	padding: 8px 8px 8px 20px;
	-webkit-transition: background-color 0.3S;
	-moz-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
.megamenu > li ul li:hover {
	background-color: #F6F6F6;
}

/* Zoom in/out สำหรับหมวดหลัก หมวดย่อย และหมวดระดับที่สาม */
.megamenu .megamenu_main .category-menu-label {
	display: inline-block;
	max-width: 100%;
	transform: translateZ(0) scale(1);
	transform-origin: left center;
	transition: transform 180ms cubic-bezier(.2, .75, .25, 1), color 180ms ease;
	will-change: transform;
}

.header-quick-categories .menux {
	transform: translateZ(0) scale(1);
	transform-origin: center;
	transition: transform 180ms cubic-bezier(.2, .75, .25, 1),
		background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.megamenu .megamenu_main li:hover > a {
		color: #ed008c;
	}

	.megamenu .megamenu_main li:hover > a > .category-menu-label {
		transform: translateZ(0) scale(1.06);
	}

	.megamenu .megamenu_main ul li:hover > a > .category-menu-label {
		transform: translateZ(0) scale(1.055);
	}

	.header-quick-categories .menux:hover {
		transform: translateZ(0) scale(1.06);
		box-shadow: 0 5px 13px rgba(237, 0, 140, .22);
	}
}

.megamenu .megamenu_main a:focus-visible > .category-menu-label,
.header-quick-categories .menux:focus-visible {
	transform: translateZ(0) scale(1.06);
	outline: 2px solid rgba(237, 0, 140, .35);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.megamenu .megamenu_main .category-menu-label,
	.header-quick-categories .menux,
	.catx > .x-cat,
	.megamenu.megamenu_toggle .megamenu_main ul {
		transition: none;
	}
}

.megamenu > li ul .relative_dropdown {
	position:relative;
}


/* 3. Typography */


.megamenu p {
	padding:0;
	margin:0 0 12px 0;
}
.megamenu h3 {
	font-size: 14px;
	font-weight:bold;
	padding:0;
	margin:6px 0 12px 0;
}
.megamenu .new {
	font-size:xx-small; 
	vertical-align:text-top;
	color:#e10000;
}
.megamenu .small {
	font-size: 11px;
	color: #888888;
	display: block;
	padding: 0;
	margin-top: 4px;
}
.megamenu .title {
	display: block;
	font-size: 14px;
	line-height: 12px;
}


/* 4. Icons */


.megamenu .icon_bookmark,
.megamenu .icon_bubble,
.megamenu .icon_charts,
.megamenu .icon_check,
.megamenu .icon_cross,
.megamenu .icon_favorite,
.megamenu .icon_help,
.megamenu .icon_info,
.megamenu .icon_magnifier,
.megamenu .icon_mail,
.megamenu .icon_marker,
.megamenu .icon_pencil,
.megamenu .icon_settings {
	padding-left:38px;
	background-repeat: no-repeat;
	background-position: 12px 50%;
}
.megamenu .icon_bookmark {
	background-image:url("../img/icons/icon_bookmark.png");
}
.megamenu .icon_bubble {
	background-image:url("../img/icons/icon_bubble.png");
}
.megamenu .icon_charts {
	background-image:url("../img/icons/icon_charts.png");
}
.megamenu .icon_check {
	background-image:url("../img/icons/icon_check.png");
}
.megamenu .icon_cross {
	background-image:url("../img/icons/icon_cross.png");
}
.megamenu .icon_favorite {
	background-image:url("../img/icons/icon_favorite.png");
}
.megamenu .icon_help {
	background-image:url("../img/icons/icon_help.png");
}
.megamenu .icon_info {
	background-image:url("../img/icons/icon_info.png");
}
.megamenu .icon_magnifier {
	background-image:url("../img/icons/icon_magnifier.png");
}
.megamenu .icon_mail {
	background-image:url("../img/icons/icon_mail.png");
}
.megamenu .icon_marker {
	background-image:url("../img/icons/icon_marker.png");
}
.megamenu .icon_pencil {
	background-image:url("../img/icons/icon_pencil.png");
}
.megamenu .icon_settings {
	background-image:url("../img/icons/icon_settings.png");
}


/* 5. Large Icons */


.megamenu .megamenu_main .large_icons {
	width: 534px;
}
.megamenu .large_icons li {
	width: 128px;
	float: left;
	text-align:center;
	position:relative;
	padding: 25px;
}
.megamenu .large_icons li span {
	font-weight: bold;
	font-size: 14px;
	padding-top:10px;
	display: block;
}
.megamenu img {
	border:none;
}