/*3.80.0*/
/*--Custom Template from theme95--*/
/*--Fonts--*/

@font-face {
    font-family: 'db-adman-x-bd';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: local('db-adman-x-bd'),
         url('../modules/flexi/fonts/db-adman-x-bd-webfont.woff') format('woff'),
         url('../modules/flexi/fonts/db-adman-x-bd-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'db-adman-x';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: local('db-adman-x'),
         url('../modules/flexi/fonts/db-adman-x-webfont.woff') format('woff'),
         url('../modules/flexi/fonts/db-adman-x-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'Circular';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: local('Circular'),
         url('../modules/flexi/fonts/circular-webfont.woff') format('woff'),
         url('../modules/flexi/fonts/circular-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'iannnnnBKK';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: local('iannnnnBKK'),
         url('../modules/flexi/fonts/2006_iannnnnbkk-webfont.woff') format('woff'),
         url('../modules/flexi/fonts/2006_iannnnnbkk-webfont.ttf') format('truetype');
}

/*--Modern Design Tokens--*/
:root {
    --color-primary: #f97316;
    --color-primary-hover: #bd172d;
    --color-primary-dark: #851020;
    --color-secondary: #1f1c1c;
    --color-secondary-light: #2a2525;
    --color-accent: #e96524;
    --color-text: #222;
    --color-text-light: #555;
    --color-bg: #ffffff;
    --color-bg-alt: #f8f9fa;
    --color-border: #e0e0e0;
    --color-link: #064f9e;
    --color-success: #28a745;
    --font-heading: 'iannnnnBKK', Tahoma, 'Noto Sans Thai', sans-serif;
    --font-body: Tahoma, 'Noto Sans Thai', Arial, sans-serif;
    --font-ui: 'Circular', Tahoma, sans-serif;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}
/*--Body--*/
body {
    background-color: #ffffff;
}
#body-bg.onload{
    background-image: url(../images/background/main/crop-1486108936917.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position: center top;
}

/*--Header--*/
#header .header-height-dummy {
    height: 198;
}

#header .header-inner .panel #header-flash {
    display: none;
}
#header .header-inner .panel #siteinfo #sitename {
    min-height: 54px;
    font-family: "db-adman-x-bd";
    font-size: 54px;
    color: #000000;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    text-align: left;
}
#header .header-inner .panel #siteinfo #tagline {
    min-height: 26px;
    font-family: "db-adman-x";
    font-size: 26px;
    color: #f00836;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    text-align: left;
}
#header > .header-inner > .panel,
#header > #topbar {
    background-color: #1f1c1c;
    border-color: #1f1c1c;
    background-image: none;
    position : relative;
    z-index: 1; /*for fix bug z-index in IE10*/
}

#sidebar {
    background-color: #ffffff;
    border-color: #ffffff;
    background-image: none;
    position : relative;
}

/*--Side Menu--*/

ul.sidenav > li {
}

#member-menu-wrap ul > li:hover,
ul.sidenav > li:hover { 
	background-color: #bd172d;
    background-image: none;
}
ul.sidenav > li > a {
    font-family: "Circular";
    font-size: 22px;
    line-height: 22px;
    color: #000000;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

ul.sidenav > li:hover > a {
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

ul.sidenav > li > span {
    font-size: 22px;
    line-height: 22px;
    color: #000000;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul.sidenav > li:hover > span {
    color: #ffffff;
}
ul.sidenav > li > span.subhover {
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background-color: #000000;
}

/*--Side Sub Menu--*/
ul.sidenav > li > ul.subnav {
    background-color: #bd172d;
}

ul.sidenav > li > ul.subnav > li { 
	background-color: #bd172d;
	background-image: none;
	border-top: solid 1px #ffffff; 
}
ul.sidenav > li > ul.subnav > li:hover {
    background-color: #ffffff;
}
ul.sidenav > li > ul.subnav > li > a {
    font-family: "Circular";
    font-size: 22px;
    line-height: 22px;
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul.sidenav > li > ul.subnav > li:hover > a {
    color: #000000;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul.sidenav > li > a:active {
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

/*--Top Menu--*/
ul.topnav > li {
}

ul.topnav > li:hover:not(.nav-add-button) { 
	background-color: #851020;
	background-image: none;
}
ul.topnav > li.nav-add-button > a {
    line-height: 22px;
}
ul.topnav > li:not(.nav-add-button) > a {
    font-family: "Circular";
    font-size: 22px;
    line-height: 22px;
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul.topnav > li:hover:not(.nav-add-button) > a {
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul.topnav > li > span {
    font-size: 22px;
    line-height: 22px;
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul.topnav > li:hover > span {
    color: #ffffff;
}
ul.topnav > li > span.subhover {
    color: #1f1c1c;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background-color: #ffffff;
}

/*--Top Sub Menu--*/
ul.topnav > li > ul.subnav {
    border-color: 100;
    background-color: #851020;
}

ul.topnav > li > ul.subnav > li,
ul.topnav > li > ul.subnav > div > div > li { 
}

ul.topnav > li > ul.subnav > li:hover,
ul.topnav > li > ul.subnav > div > div > li:hover { 
	background-color: #ffffff;
	background-image: none;
}
ul.topnav > li > ul.subnav > li > a,
ul.topnav > li > ul.subnav > div > div > li > a {
    font-family: "Circular";
    font-size: 22px;
    line-height: 22px;
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul.topnav > li > ul.subnav > li:hover > a,
ul.topnav > li > ul.subnav > div > div > li:hover > a {
    color: #bd172d;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

/*-- Middle Menu --*/
ul.midnav {
    background-color: #ffffff;
    //background-color: #ffffff; /* for IE7 */
    border-color: #f97316;
}

ul.midnav > li {
	background-color: #ffffff;
	background-image: none;
}

ul.midnav > li:hover {
	background-color: #ffffff;
}
ul.midnav > li > a {
    font-family: "Circular";
    font-size: 22px;
    line-height: 22px;
    color: #f97316;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul.midnav > li:hover > a {
    color: #f97316;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

/*-- Slide Menu --*/
#slidemenu-menu,
ul.slidemenu,
ul.slidemenu > li > ul.subnav {
    background-color: #1f1c1c;
}
ul.slidemenu > li,
ul.slidemenu > li > ul.subnav > li {
    background-color: #1f1c1c;
    background-image: none;
}
ul.slidemenu > li.blank {
    background-color: #ffffff; /* inverted color */
    height: 3px;
}
ul.slidemenu > li > i,
ul.slidemenu > li > ul.subnav > li > i {
    color: #ffffff;
}
ul.slidemenu > li > a,
ul.slidemenu > li > ul.subnav > li > a {
    font-family: "Circular";
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

ul.slidemenu > li:active,
ul.slidemenu > li:hover,
ul.slidemenu > li > ul.subnav > li:active,
ul.slidemenu > li > ul.subnav > li:hover {
    background-color: #851020;
    background-image: none;
}

ul.slidemenu > li > i:active,
ul.slidemenu > li > i:hover,
ul.slidemenu > li > ul.subnav > li > i:hover,
ul.slidemenu > li > ul.subnav > li > i:active {
    color: #ffffff;
}

ul.slidemenu > li > a:active,
ul.slidemenu > li > a:hover,
ul.slidemenu > li > ul.subnav > li > a:hover,
ul.slidemenu > li > ul.subnav > li > a:active {
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

ul.slidemenu > li.slidemenu-back,
ul.slidemenu > li > ul.subnav > li.slidemenu-back {
    background-color: #ffffff; /* inverted color */
}

ul.slidemenu > li.slidemenu-back:active,
ul.slidemenu > li.slidemenu-back:hover,
ul.slidemenu > li > ul.subnav > li.slidemenu-back:active,
ul.slidemenu > li > ul.subnav > li.slidemenu-back:hover {
    background-color: #ffffff; /* inverted color */
}

ul.slidemenu > li.slidemenu-back > i,
ul.slidemenu > li.slidemenu-back > a,
ul.slidemenu > li > ul.subnav > li.slidemenu-back > a,
ul.slidemenu > li > ul.subnav > li.slidemenu-back > i {
    color: #1f1c1c; /* inverted color */
}

ul.slidemenu > li.slidemenu-back:active > i,
ul.slidemenu > li.slidemenu-back:hover > i,
ul.slidemenu > li.slidemenu-back:active > a,
ul.slidemenu > li.slidemenu-back:hover > a,
ul.slidemenu > li > ul.subnav > li.slidemenu-back:active > a,
ul.slidemenu > li > ul.subnav > li.slidemenu-back:hover > a,
ul.slidemenu > li > ul.subnav > li.slidemenu-back:active > i,
ul.slidemenu > li > ul.subnav > li.slidemenu-back:hover > i {
    color: #851020;
}

/*--Content--*/
#content {
    color: #000000;
    background-color: #ffffff;
}
#content .breadcrumb {
    font-family: "iannnnnBKK";
    color: #f97316;
}
#content .breadcrumb a {
    color: #f97316;
}
#content .title,
#content .product-title,
#content .product-search-result-title {
    font-family: "iannnnnBKK";
    font-size: 44px;
    color: #f97316;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
#content > .title.title-with-text-alignment {
    text-align: left;
}
#content .inner > .search-result .title {
    color: #f97316;
    font-family: "iannnnnBKK";
    font-size: 26px;
    line-height: 26px;
}
#content .inner > .search-result .breadcrumb {
    color: #000000;
}
#content .inner > .search-result .keyword {
	color: #ffffff;
	background-color: #f97316;
}
#content .inner > .search-result .separator {
    border-color: #1f1c1c;
}

        #content .description {
            font-family: "Tahoma";
            font-size: 16px;
            color: #000000;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }

        #content .description a {
            color: #000000;
        }

        #content .images-area.right {
            float: right;
            margin: 0px 0px 10px 10px;
        }
    
        #content .text-section-container .text-section-loader {
            font-family: "Tahoma";
            font-size: 16px;
            color: #000000;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }

        #content .text-section-container .text-section-loader a {
            color: #000000;
        }
    
#content .html-section-container .html-section-loader{
    font-family: "Tahoma";
    font-size: 16px;
    color: #000000;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

#content .html-section-container .html-section-loader a {
    color: #000000;
}

        #content .price-line {
            font-family: "Arial";
            font-size: 20px;
            color: #000000;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }
        #content .original-price-line .price-label,  #content .original-price-line .price-value .price{
            font-family: "Arial";
            font-size: 20px;
            color: #000000;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }
        #content .member-price-line {
            font-family: "Arial";
            font-size: 20px;
            color: #000000;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }
    
			#content .order-button input#btn_order,
			#content .order-button input[type=button],
			#content .order-button input[type=submit]  {
			    background-color: #851020;
			    font-family: "Circular";
			    color: #ffffff;
			    font-weight: normal;
			    font-style: normal;
			    text-decoration: none;
			    border-color: #851020;
			    background-image: none;
			    position: relative;
			    z-index: 0;
			}
			
			#content .order-button input#btn_order{
			    overflow:visible;
			}
			#content .hidable .order-button input#btn_order:hover,
			#content .hidable .order-button input[type=button]:hover,
			#content .hidable .order-button input[type=submit]:hover {
			    background-color: #851020;
			    color: #ffffff;
			    font-weight: normal;
			    font-style: normal;
			    text-decoration: none;
			    border-color: #851020;
			    text-shadow: 0 1px 1px #ffffff;
			}
			
#fancybox-title:not(.fancybox-title-float) {
    font-family: "iannnnnBKK";
    font-weight: normal;
    font-style: normal;
    color: #f97316;
    font-size: 1.5em;
}

/*--showcase, portlet--*/

        .showcase > .portlet {
            border-color: #1f1c1c;
        }
        .showcase > .portlet .separator {
            border-color: #1f1c1c;
        }
        
            .showcase .portlet-header {
            }
        
        .showcase .portlet-header {
            text-align: left;
        }

        .showcase .portlet-header:hover {
            background-image: none\9;
        }
        .showcase .portlet-header > a {
            color: #000000;
            font-family: "iannnnnBKK";
            font-size: 30px;
            line-height: 30px;
        }
        .showcase .portlet-header > a:hover {
            color: #000000;
        }
        .showcase > .portlet.style1  {
            border-color: #bd172d;
        }
        .showcase > .portlet.style1 .portlet-header > a {
            color: #000000;
        }
        .showcase > .portlet.style1 .portlet-header > a:hover {
            color: #000000;
        }
        .showcase > .portlet.style2  {
            border-color: #bd172d;
        }
        .showcase > .portlet.style2 .portlet-header {
        }
        .showcase > .portlet.style2 .portlet-header > a {
            color :#000000;
        }
        .showcase > .portlet.style2 .portlet-header > a:hover{
            color :#000000;
        }
        .showcase > .showcase_border.style2 {
            border : 1px solid #bd172d;
        }
        .showcase > .portlet.style3 .portlet-header > a {
            color :#000000;
        }
        .showcase > .portlet.style3 .portlet-header > a:hover{
            color :#000000;
        }
        .showcase > .portlet.style1 .showcase_border {
            border:none;
        }
        .showcase > .portlet.style2 .showcase_border{
            border: 1px solid #bd172d;
        }

        .showcase > .portlet.style3 .portlet-header-divider{
            display: block;
            padding: 0px 20px;
        }
        .showcase > .portlet.style3 .portlet-header-divider > div {
            border-bottom: solid 1px #bd172d;
        }
    
    /* --end showcase, portlet-- */
    
/*--related contents--*/
    
        #content #portlet-related-contents .text .title,
        #content #portlet-related-contents .text .title a {
            color: #f97316;
            font-family: "iannnnnBKK";
            font-weight: normal;
            font-style: normal;
            font-size: 26px;
            line-height: 26px;
            text-decoration: none;
        }
        #content #portlet-related-contents .text .description {
            color: #000000;
            font-family: "Tahoma";
            font-size: 16px;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }
        #content #portlet-related-contents .price {
            color: #000000;
            font-family: "Arial";
            font-size: 12px;
            font-weight: normal;
            font-style: normal;
            text-decoration: none
        }
        #content #portlet-related-contents .original-price {
            color: #000000;
            font-family: "Arial";
            font-size: 12px;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }
        #content #portlet-related-contents .member-price {
            color: #000000;
            font-family: "Arial";
            font-size: 12px;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }
        #portlet-related-contents legend {
            padding-left: 5px;
            padding-right: 5px;
        }
        #portlet-related-contents  {
            border-radius: 5px 5px 5px 5px;
            border-color: #bd172d;
            color :#bd172d;
        }

        fieldset{
            border:1px solid #c0c0c0;
        }
        #portlet-related-contents .portlet-header {
            border-color: #bd172d;
            color :#000000;
        }
        #portlet-related-contents .showcase_border{
            border: 1px solid #bd172d;
        }

        @media screen and (max-width: 610px) {
            #content #portlet-related-contents .text .title,
            #content #portlet-related-contents .text .title a {
                font-size: 22px;
            }

            #content #portlet-related-contents .price {
                font-size: 10px;
            }

            #content #portlet-related-contents .original-price {
                font-size: 10px;
            }

            #content #portlet-related-contents .member-price {
                font-size: 10px;
}
            .related-contents{
                text-align:center;
            }
        }
    
/* -- START: Cards --*/

        .cards-container .cards-loader ul > li .cards-title {
            font-family: "iannnnnBKK";
            font-size: 26px;
            color: #f97316;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }

        .cards-container .cards-loader ul > li .cards-title > a{
             color: #f97316;
        }

        .cards-container .cards-loader ul > li .cards-title > a:visited {
             color: #f97316;
        }

        .cards-container .cards-loader ul > li.cards-add {
            color: #f97316;
        }

        .cards-container .cards-loader ul > li .cards-text .cards-description {
            font-family: "Tahoma";
            font-size: 16px;
            color: #000000;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }
    
/* -- END: Cards -- */

/*--content tag cloud--*/
#content #content-tag-cloud-container ul#tag_cloud > li a {
	color: #f97316 !important;
}

/*--content visit history--*/
#content-visit-history-container > .portlet  {
    border-color: #1c1b1b;
}

#content-visit-history-container {
    background-color: #ffffff;
}
#content-visit-history-container .portlet-header {
    color :#bd172d;
    font-family: "Circular";
    font-size: 22px;
    line-height: 22px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
#content-visit-history-container .portlet-header-divider > div {
    border-bottom: solid 1px #bd172d;
}
#content-visit-history-container ul.content-visit-history-pages .text .title,
#content-visit-history-container ul.content-visit-history-pages .text .title a {
    color: #f97316;
    font-family: "iannnnnBKK";
    font-weight: normal;
    font-style: normal;
    font-size: 26px;
    line-height: 26px;
    text-decoration: none;
}
#content-visit-history-container ul.content-visit-history-pages .text .price {
    color: #000000;
    font-family: "Arial";
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none
}
#content-visit-history-container ul.content-visit-history-pages .text .original-price {
    color: #000000;
    font-family: "Arial";
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
#content-visit-history-container ul.content-visit-history-pages .text .member-price {
    color: #000000;
    font-family: "Arial";
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
/*--contact form--*/

        #content .contact-form h3 {
        #content .contact-form form a{
            color: #000000;
            background-color: #ffffff;
        }
        #content .contact-form form a:hover{
            color: #ffffff;
            background-color: #000000;
        }
        #content .contact-form input[type=submit]{
            color: ;
        }
        #content .contact-form #consent-container a {
            background-color: transparent;
        }
    
/*--widget form--*/
#sidebar .widget-item .widget-form h3 {
    color: #f97316;
}
#sidebar .widget-item .widget-form form {
    color: #000000;
    font-family: "Tahoma";
}
#sidebar .widget-item .widget-form form input[type=button] {
    background-color: #1f1c1c;
    border-color: #1f1c1c;
	color: #ffffff;
}
#sidebar .widget-item .widget-form form input[type=button]:hover {
	background-color: #851020;
    border-color: #851020;
	color: #ffffff;
}

/*--member login & register--*/
#sidebar .widget-item .member-box input[type=button],
#sidebar .widget-item .member-box input[type=submit] {
	background-color: #1f1c1c;
    border-color: #1f1c1c;
	color: #ffffff;
}
#sidebar .widget-item .member-box input[type=button]:hover,
#sidebar .widget-item .member-box input[type=submit]:hover {
	background-color: #851020;
    border-color: #851020;
	color: #ffffff;
}
#sidebar .widget-item .member-box .signup > a {
	color: #000000;
}
#sidebar .widget-item .member-box .signup > a:hover {
	color: #ffffff;
}
#sidebar .widget-item #member-menu-wrap li > a {
    font-family: "Circular";
    font-size: 22px;
    line-height: 22px;
    color: #000000;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
#sidebar .widget-item #member-menu-wrap li:hover > a {
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
#sidebar .widget-item #member-menu-wrap hr {
	border-top : 1px dashed #1f1c1c;
}
#form-design .preview-panel > .fields > li > .field-input-wrap a,
#sidebar .widget-item .customize-form a{
    color: #000000;
    background-color: #ffffff;
}
#sidebar .widget-item .customize-form a:hover{
    color: #ffffff;
    background-color: #000000;
}
#sidebar .widget-item #consent-container a {
    background-color: transparent;
    color: #0044b0;
}
.member-wrap .member-form .shipping-title{
    background-color: #1f1c1c;
    color: #ffffff;
}
.member-form .member-block-button input[type=button],
.member-form .member-block-button input[type=submit]{
	background-color: #1f1c1c;
	color: #ffffff;
	border-color: #1f1c1c;
}
.member-form .member-block-button input[type=button]:hover,
.member-form .member-block-button input[type=submit]:hover {
	background-color: #851020;
	color: #ffffff;
	border-color: #851020;
	text-shadow: 0 1px 1px #ffffff;
}
.member-wrap .member-menu-title {
	background-color: #1f1c1c;
    color: #ffffff;
}
.member-wrap .order-view .order-list tr.order-list-row:hover {
	background-color: #1f1c1c;
    color: #ffffff;
}
.order-list-row-selected {
	background-color: #1f1c1c;
    color: #ffffff;
}
.member-menu-wrap .member-menu-title {
	background-color: #1f1c1c;
    color: #ffffff;
}
.member-menu-wrap ul > li > a,
.member-menu-wrap .member-menu-form .signup > a {
	color: #f97316;
}
.member-menu-wrap .member-menu-inner ul > li > a {
	background-color: #1f1c1c;
    color: #ffffff;
}
.member-menu-wrap .member-menu-inner ul > li > a:hover {
	background-color: #851020;
    color: #ffffff;
}
.member-menu-wrap .member-menu-form input[type="submit"],
.member-menu-wrap .member-menu-form input[type="button"] {
	background-color: #1f1c1c;
    border-color: #1f1c1c;
	color: #ffffff;
}
.member-menu-wrap .member-menu-form input[type="submit"]:hover,
.member-menu-wrap .member-menu-form input[type="button"]:hover {
	background-color: #851020;
    border-color: #851020;
	color: #ffffff;
}

/*--subpages--*/

        #content ul.subpages .separator {
            border-color: #1f1c1c;
        }
        #content ul.subpages li {
            border: solid 1px #1f1c1c;
        }

        #content ul.subpages .text .title,
        #content ul.subpages .text .title a {
            color: #f97316;
            font-family: "iannnnnBKK";
            font-weight: normal;
            font-style: normal;
            font-size: 26px;
            text-decoration: none;
        }
        #content ul.subpages .text .description {
            color: #000000;
            font-family: "Tahoma";
            font-size: 16px;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }
        #content ul.subpages .text .price {
            color: #000000;
            font-family: "Arial";
            font-size: 12px;
            font-weight: normal;
            font-style: normal;
            text-decoration: none
        }
        #content ul.subpages .text .original-price {
            color: #000000;
            font-family: "Arial";
            font-size: 12px;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }
        #content ul.subpages .text .member-price {
            color: #000000;
            font-family: "Arial";
            font-size: 12px;
            font-weight: normal;
            font-style: normal;
            text-decoration: none;
        }

        #content ul.subpages li.no-children {
            color: #1f1c1c;
        }

        @media screen and (max-width: 610px) {
            #content ul.subpages .text .title,
            #content ul.subpages .text .title a {
                font-size: 22px;
            }

            #content ul.subpages .text .price {
                font-size: 10px;
            }

            #content ul.subpages .text .original-price {
                font-size: 10px;
            }

            #content ul.subpages .text .member-price {
                font-size: 10px;
            }
        }
    
/*--siblings--*/
#content .siblings a {
    color: #f97316;
    font-family: "iannnnnBKK";
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

/*--content-tag--*/
#content ul.content-tag .separator {
    border-color: #1f1c1c;
}
#content ul.content-tag li {
    border: solid 1px #1f1c1c;
}

#content ul.content-tag .text .title,
#content ul.content-tag .text .title a {
    color: #f97316;
    font-family: "iannnnnBKK";
    font-weight: normal;
    font-style: normal;
    font-size: 26px;
    line-height: 26px;
    text-decoration: none;
}
#content ul.content-tag .text .description {
    color: #000000;
    font-family: "Tahoma";
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
#content ul.content-tag .text .price {
    color: #000000;
    font-family: "Arial";
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none
}
#content ul.content-tag .text .original-price {
    color: #000000;
    font-family: "Arial";
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
#content ul.content-tag .text .member-price {
    color: #000000;
    font-family: "Arial";
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

#content a.content-tag-title-link {
	color: #f97316;
	text-decoration: none;
}
#content a.content-tag-title-link:hover {
	text-decoration: underline;
}
#content #content-tag-container .content-tag li.content-tag-load-more-row input.content-tag-load-more {
	background-color: #1f1c1c;
	border-color: #1f1c1c;
    color: #ffffff;
}
#content #content-tag-container .content-tag li.content-tag-load-more-row input.content-tag-load-more:hover {
	background-color: #851020;
	border-color: #851020;
    color: #ffffff;
    text-shadow: 0 1px 1px #ffffff;
}

/*--shopping cart--*/

#content table.cart {
    border: solid 1px #1f1c1c;
}
#content .cart th {
    background-color: #1f1c1c;
    border: solid 1px #1f1c1c;
    color: #ffffff;
}

#content .cart tr.order-head-row{
    background-color: #1f1c1c;
    border: solid 1px #1f1c1c;
    color: #ffffff;
}
#content .cart td {
    border: solid 1px #1f1c1c;
}
#content .cart-button input[type=button],
#content .cart-button input[type=submit]  {
	background-color: #851020;
	font-family: "Circular";
	color: #ffffff;
	font-weight: normal;
    font-style: normal;
    text-decoration: none;
	border-color: #851020;
	background-image: none;
}

#content .cart-button input[type=button]:hover,
#content .cart-button input[type=submit]:hover  {
	background-color: #851020;
	color: #ffffff;
	font-weight: normal;
    font-style: normal;
    text-decoration: none;
	border-color: #851020;
	text-shadow: 0 1px 1px #ffffff;
}
.checkout-form .shipping-title,
.shipping-title {
    background-color: #1f1c1c;
    color: #ffffff;
}
.checkout-form .checkout-block-button input[type=button],
.checkout-form .checkout-block-button input[type=submit]{
	background-color: #1f1c1c;
	color: #ffffff;
	border-color: #1f1c1c;
}
.checkout-form .checkout-block-button input[type=button]:hover,
.checkout-form .checkout-block-button input[type=submit]:hover{
	background-color: #851020;
	color: #ffffff;
	border-color: #851020;
	text-shadow: 0 1px 1px #ffffff;
}
.checkout-form #btn_login_for_checkout {
	background-color: #1f1c1c;
	color: #ffffff;
	border-color: #1f1c1c;
}
.checkout-form #btn_login_for_checkout:hover {
	background-color: #851020;
	color: #ffffff;
	border-color: #851020;
}

/*--Checkout Step--*/
.checkout-step .progress-bar > span {
	background-color: #1f1c1c;
    color: #ffffff;
}
.checkout-step #step-done .circle {
	background-color: #1f1c1c;
	border: 5px solid #1f1c1c;
    color: #ffffff;
}
.viewcart-box {
    background-color: #ffffff;
    color: #000000;
}
.viewcart-box:hover {
    background-color: #bd172d !important;
    color: #ffffff !important;
}
.viewcart-box a {
    color: #000000;
}
.viewcart-box:hover a,
.viewcart-box a:hover {
    color: #ffffff !important;
    text-shadow: 0 1px 1px #ffffff !important;
}
.order-wrap .order-control-btn input[type=button],
.order-wrap .order-control-btn input[type=submit] {
	background-color: #1f1c1c;
	color: #ffffff;
	border-color: #1f1c1c;
}
.order-wrap .order-control-btn input[type=button]:hover,
.order-wrap .order-control-btn input[type=submit]:hover {
	background-color: #851020;
	color: #ffffff;
	border-color: #851020;
	text-shadow: 0 1px 1px #ffffff;
}
.standard-form input[name=submit],
.search-form input[type=button],
.customize-form input[name=submit] {
	background-color: #1f1c1c;
	color: #ffffff;
	border-color: #1f1c1c;
}
.standard-form input[name=submit]:hover,
.search-form input[type=button]:hover,
.customize-form input[name=submit]:hover {
	background-color: #851020;
	color: #ffffff;
	border-color: #851020;
	text-shadow: 0 1px 1px #ffffff;
}
/*--sidebar--*/
#sidebar .button-add-menu > a{
    color: #ffffff;
}
/*--widgets--*/
.widgets {
    background-color: transparent;
    font-family: "Circular";
    font-size: 22px;
    line-height: 22px;
    color: #000000;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
.widgets > li > .widget-item > .tag-cloud-widget-container .tag-cloud-show {
	background-color: #1f1c1c;
	color: #ffffff;
	border-color: #1f1c1c;
}
.widgets > li > .widget-item > .tag-cloud-widget-container .tag-cloud-show:hover {
	background-color: #851020;
	color: #ffffff;
	border-color: #851020;
	text-shadow: 0 1px 1px #ffffff;
}
.widgets > li > .widget-item > .tag-cloud-widget-container .tag-cloud > li > a {
	color: #000000 !important;
}

/*--Footer--*/
#footer {
    background-color: #1c1b1b;
}
#footer-text {
    font-family: "Circular";
    font-size: 16px;
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
#footer-text table {
    text-decoration: none;
    width: 100%;
}
/*--Footer Link--*/
#footer-link {
	background-color: #1c1b1b;
	font-family: "Circular";
    font-size: 16px;
    color: #ffffff;
}
#footer-link td > ul > li > a {
	color: #ffffff;
}
/*--Edit Bar for Customize Form--*/
#form-design .preview-panel {
    background-color: #ffffff;
}
#form-design .preview-panel h3 {
	color: #f97316;
	font-size: 18px;
}
#form-design .preview-panel .description {
	color: #000000;
}
#form-design .preview-panel .fields {
	color: #000000;
}
#form-design .preview-panel .submit {
	background-color: #1f1c1c;
	color: #ffffff;
	border-color: #1f1c1c;
}

/* -- STATIC SITE ACCESSIBILITY AND MENU CONTROLS -- */
#main-content {
    display: block;
    min-width: 0;
}
ul.slidemenu > li > .menu-label,
ul.slidemenu > li > ul.subnav > li > .menu-label {
    display: inline-block;
    width: 80%;
    font-family: "Circular";
    color: #ffffff;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul.slidemenu > li.slidemenu-back > button,
ul.slidemenu > li > ul.subnav > li.slidemenu-back > button {
    border: 0;
    padding: 0;
    background: transparent;
    color: #1f1c1c;
    font: inherit;
    cursor: pointer;
}
ul.slidemenu > li.slidemenu-back:hover > button,
ul.slidemenu > li > ul.subnav > li.slidemenu-back:hover > button {
    color: #851020;
}
#content .breadcrumb-parent {
    color: #f97316;
}
h3.header-left {
    color: #1f1c1c !important;
}

/* Static SEO content: readable on desktop and mobile without adding a form or widget. */
.seo-content {
    clear: both;
    margin: 28px auto 10px;
    padding: 22px 24px;
    max-width: 900px;
    background: #fff;
    border-top: 3px solid #166abd;
    color: #222;
    line-height: 1.75;
}
.seo-content h2,
.seo-content h3 { color: #1f1c1c; line-height: 1.4; }
.seo-content h2 { margin: 0 0 12px; font-size: 1.45em; }
.seo-content h3 { margin: 18px 0 8px; font-size: 1.15em; }
.seo-content p { margin: 0 0 12px; }
.seo-content ul,
.seo-content ol { margin: 0 0 14px 24px; padding: 0; }
.seo-content li { margin-bottom: 5px; }
.seo-content a { color: #064f9e; text-decoration: underline; }
.seo-content-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.seo-content details { border-top: 1px solid #d8d8d8; padding: 10px 0; }
.seo-content details:last-child { border-bottom: 1px solid #d8d8d8; }
.seo-content summary { cursor: pointer; color: #064f9e; font-weight: bold; }
.seo-content details p { margin: 8px 0 0; }
@media (max-width: 700px) {
    .seo-content { margin-top: 20px; padding: 18px 14px; }
    .seo-content-columns { display: block; }
}

/* -- START: COMMENT MODULE -- */

        .comment_container,
        .comment_form {
            border: 1px solid #1f1c1c;
        }
        .comment_container .info {
            color: #f97316;
        }
        .comment_container .comment_description {
            color: #000000;
        }
        #comment .button_save {
            background-color: #1f1c1c;
            border-color: #1f1c1c;
            color: #ffffff;
        }
        #comment .button_save:hover {
            background-color: #851020;
            border-color: #851020;
            color: #ffffff;
            text-shadow: 0 1px 1px #ffffff;
        }
        #comment-tabs .ui-tabs-nav {
            border-bottom: solid 1px #1f1c1c;
            border-radius: 0px;
        }
        #comment-tabs .ui-tabs-nav > li {
            font-family: "Circular";
            font-size: 22px;
            background-color: #1f1c1c;
            border-color: #1f1c1c;
        }
        #comment-tabs .ui-tabs-nav > li:hover {
            background-color: #851020;
            border-color: #851020;
        }
        #comment-tabs .ui-tabs-nav > li > a {
            font-family: "Circular";
            font-size: 22px;
            color:#ffffff;
        }
        #comment-tabs .ui-tabs-nav > li > a:hover {
            color:#ffffff;
            text-shadow: 0 1px 1px #ffffff;
        }
        #comment-tabs .ui-tabs-nav > li.ui-tabs-active {
            background-color: #ffffff;
        }
        #comment-tabs .ui-tabs-nav > li.ui-tabs-active > a {
            color:#f97316;
        }
    
/* -- END: COMMENT MODULE -- */

/* -- START: Attachment Section -- */
.content-attach-file > ul > li{
	border-color: #1f1c1c;
    background-color: #1f1c1c;
}
.content-attach-file > ul > li a.view,
.content-attach-file > ul > li a.download{
	color: #ffffff;
}
.content-attach-file > ul > li:hover{
    border: thin solid #ffffff;
    background-color: #ffffff;
}
.content-attach-file > ul > li:hover a.view,.content-attach-file > ul > li:hover a.download{
    color: #1f1c1c ;
}
.content-attach-file > ul > li a.download:hover{
    color: #ffffff;
}
.content-attach-file > ul > li a.download:hover > div{
    background-color: #1f1c1c;
}
/* -- END: Attachment Section -- */

}
/* -------- SHOP: Product detail --------- */
.product-detail-variant {
    color: #000000;
}
.product-detail-variant > span#product-detail-selected-variant-label {
    color: #f97316;
}
.icon-minus-qty, .icon-plus-qty {
    color: #f97316;
}
.product-detail-section-loader .product-description-area .product-detail-bottom .product-detail-price {
    font-family: "Arial";
    font-size: 20px;
    color: #000000;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

.product-related-section .product-detail-price {
    color: #000000;
}

.product-detail-section-loader .product-description-area .product-detail-bottom .product-detail-price-original {
    font-family: "Arial";
    font-size: 20px;
    color: #000000;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

.product-related-section .product-detail-price-original {
    color: #000000;
}

.product-variant-price .product-detail-price {
        color: #000000;
}

.product-variant-price .product-detail-price-original {
    color: #000000;
}

.product-related-section .product-name span {
    color: #f97316;
}

.product-related-section  .product-detail-buy-now-not-variant {
    border: #ffffff solid 1px;
    color: #ffffff;
    background: #851020;
}

.product-related-section  .product-detail-buy-now-variant {
    border: #ffffff solid 1px;
    color: #ffffff;
    background: #851020;
}

.product-price .product-detail-price {
                color: #000000;
}

.product-price .product-detail-price-original {
            color: #000000;
}

.product-name a:link {
    color: #f97316;
}
.out-of-stock > p,
.product-detail-out-of-stock {
    color: #000000;
}
.category-section-title {
    color: #f97316;
}
/* ------------------------------ */
				#content .product-search-result-container #product-search-result .product-search-result-item .product-search-result-name a {
						color: #f97316;
				}

				#content .product-search-result-container #product-search-result .product-search-result-item .product-search-result-price-container .product-search-result-price-original {
						color: #000000;
				}

				#content .product-search-result-container #product-search-result .product-search-result-item .product-search-result-price-container .product-search-result-price {
						color: #000000;
				}

				#content .product-search-result-container #product-search-result .product-search-result-item .product-detail-add-to-cart {
						border: #f97316 solid 1px;
						color: #f97316;
				}

				#content .product-search-result-container #product-search-result .product-search-result-item .product-detail-buy-now-not-variant,
				#content .product-search-result-container #product-search-result .product-search-result-item .product-detail-buy-now-variant {
						background-color: #f97316;
						border: #f97316 solid 1px;
				}

				#content .product-search-result-container #product-search-result .product-search-result-item .product-detail-add-to-cart-not-variant,
				#content .product-search-result-container #product-search-result .product-search-result-item .product-detail-add-to-cart-variant {
						border: #f97316 solid 1px;
						color: #f97316;
				}

				#content .product-search-result-container #product-search-pagination li.active span,
				#content .product-search-result-container #product-search-pagination li.disabled span {
						background-color: #1f1c1c;
						border-color: #1f1c1c;
						color: #ffffff;
				}
		
/* ----- Mobile call button ----- */
.mobile-button-panel {
	background-color: #ffffff;
}
.mobile-button-panel .call-button .call-button-area {
	background-image: none;
    background-color: #1f1c1c;
    color: #ffffff;
}

/* -------- back to top --------- */
.back-to-top a .fa {
    color: #ffffff;
    background-color: #1f1c1c;
}
/* ------------------------------ */

/* -- Start: Media query -- */
@media screen and (max-width: 610px) {
    .mobile-topbar {
        background-color: #1f1c1c;
    }

    .mobile-topbar .trigger-wrapper,
    .mobile-topbar .searchbox-wrapper{
        color: #ffffff;
        background-color: rgba(31, 28, 28, 0);
    }

    .mobile-topbar .header-viewcart-box {
        color: #ffffff;
        background-color: #1f1c1c;
    }

    .mobile-topbar .header-viewcart-box i {
        color: #ffffff;
    }

    #header .header-inner .panel #siteinfo #sitename {
        font-size: 32px;
        min-height: 32px;
    }

    #header .header-inner .panel #siteinfo #tagline {
        font-size: 16px;
        min-height: 16px;
    }

    #content .title {
        font-size: 31px;
    }

    #content-visit-history-container .portlet-children > .content-visit-history-pages .text .title,
    #content-visit-history-container .portlet-children > .content-visit-history-pages .text .title a {
        font-size: 22px;
    }

    #content-visit-history-container ul.content-visit-history-pages .text .price {
        font-size: 10px;
    }

    #content-visit-history-container ul.content-visit-history-pages .text .original-price {
        font-size: 10px;
    }

    #content-visit-history-container ul.content-visit-history-pages .text .member-price {
        font-size: 10px;
    }

    #content ul.content-tag .text .title,
    #content ul.content-tag .text .title a {
        font-size: 22px;
    }

    #content ul.content-tag .text .price {
        font-size: 10px;
    }

    #content ul.content-tag .text .original-price {
        font-size: 10px;
    }

    #content ul.content-tag .text .member-price {
        font-size: 10px;
    }
}
/* -- End: Media query -- */

/* ============================================
   MODERN UI/UX 2026 — Smooth & Accessible
   ============================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Modern focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Smooth transitions for interactive elements */
a,
button,
input[type="submit"],
input[type="button"],
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
.showcase .portlet-header,
ul.sidenav > li,
ul.topnav > li,
.cards-container .cards-loader ul > li,
.content-tag li,
.subpages li {
    transition: color var(--transition-fast),
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

/* Enhanced link styles */
#content a,
.seo-content a,
.content-enhancement a {
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

/* Modern button hover with subtle lift */
#content .order-button input#btn_order:hover,
#content .cart-button input[type=submit]:hover,
#content .cart-button input[type=button]:hover,
.service-cta-button,
.seo-guide-button {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Active press effect */
#content .order-button input#btn_order:active,
#content .cart-button input[type=submit]:active,
.service-cta-button:active,
.seo-guide-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Modern card hover effect */
.cards-container .cards-loader ul > li,
.showcase > .portlet,
.content-tag li,
.subpages li,
#portlet-related-contents {
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal),
                border-color var(--transition-normal);
}

.cards-container .cards-loader ul > li:hover,
.showcase > .portlet:hover,
.content-tag li:hover,
.subpages li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Modern input focus */
#sidebar .widget-item .widget-form form input[type="text"],
#sidebar .widget-item .widget-form form input[type="email"],
#sidebar .widget-item .widget-form form textarea,
.standard-form input[type="text"],
.standard-form input[type="email"],
.search-form input[type="text"] {
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

#sidebar .widget-item .widget-form form input[type="text"]:focus,
#sidebar .widget-item .widget-form form input[type="email"]:focus,
.standard-form input[type="text"]:focus,
.standard-form input[type="email"]:focus,
.search-form input[type="text"]:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(233, 101, 36, 0.15);
    outline: none;
}

/* Breadcrumb styling enhancement */
#content .breadcrumb {
    font-size: 14px;
    padding: 8px 0;
}

/* Content title enhancement */
#content .title {
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* Mobile call button — modern floating style */
@media screen and (max-width: 610px) {
    .mobile-button-panel .call-button .call-button-area {
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        font-weight: 600;
        padding: 12px 20px;
    }

    #header .header-inner .panel #siteinfo #sitename {
        letter-spacing: -0.02em;
    }
}

/* Back to top — modern style */
.back-to-top a .fa {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.back-to-top a:hover .fa {
    transform: translateY(-2px);
    background-color: var(--color-primary-dark) !important;
}

/* Smooth image loading */
img {
    max-width: 100%;
    height: auto;
}

/* Modern scrollbar (webkit) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Print styles */
@media print {
    #header, #topbar, #footer, .back-to-top, .mobile-button-panel {
        display: none !important;
    }
    body {
        font-size: 12pt;
        color: #000;
    }
}

/* Image overflow prevention - Mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background: #f97316;
    color: #ffffff;
}