@charset "utf-8";
@import url("//www.siamphone.com/style/brand-list-block.css");
/* CSS Document */

/* default, light mode styles set with variables */
:root {
    --watch-body-bg-light:#ffffff;
    --watch-body-color-light:#222222;
    --watch-backtop-bg-light:#cfcfcf;
    --watch-title-bg-light:#ffffff;
    --watch-title-color-light:#000000;
    --watch-title-after-light:#e5e5e5;
    --watch-headwidget-before-light:#000000;
    --watch-listitem-view-light:#222222;
    --watch-popular-border-light:#e9e9e9;
    --watch-wraplong-bg-light:#ebebeb;
    --watch-brandScroll2-bg-light:#ffffff;
    --watch-recommendbrand-bg-light:#f9f9f9;
    --watch-recommendbrand-border-light: #f0f0f0;
    --watch-recommendbrand-color-light:#272727;
    --watch-recommendbrand-btn-light:#272727;
    --watch-recommend-btn-light:#272727;
    --watch-columnbtm-bg-light:#f1f1f1;
    --watch-block3-hover-light:#f1f1f1;
    --watch-topview-color-light:#333333;
    --watch-block3-span-light:#555555;
    --watch-breakingnews-border-light: #9E9E9E;
    --watch-screensize-bg-light:#353535;
    --watch-sort-border-light:#ebebeb;
    --watch-lunch-bordertop-light:#3d3d3d;
    --watch-blackwhite-color-light:#000000;
    --watch-whiteblack-bg-light:#ffffff;
    --watch-sortfilter-color-light:rgba(50, 50, 50, 0.6);    
    --watch-dropdown3-after-light:#464646 transparent;
    --watch-dropdown3list-bg-light:#ffffff;
    --watch-dropdown3list-border-light:#eeeeee;
    --watch-dropdown3list-hover-light:#f0f0f0;
    --watch-slider-color-light:#222222;
    --watch-slider-bg-light:#ededed;
    --watch-placeholder-color-light:#222222;
    --watch-btnmore-bg-light:#f6f6f6;
    --watch-btnmore-color-light:#333333;    
    --watch-listgrid-active-border-light:#222222;
    --watch-listgrid-border-light:#eeeeee;
    --watch-listgrid-color-light:#212529;
    --watch-clear-bg-light:#222222;
    --watch-clear-color-light:#ffffff;
    --watch-demo2-border-light:#646464;
    --watch-demo2-bg-light:#d7d7d7;
    --watch-tablist-bg-light:#ffffff;
    --watch-tablist-border-light:#eeeeee;
    --watch-scrollbar-track-light:#dddddd;
    --watch-scrollbar-light:#ebebeb;
    --watch-scrollbar-thumb-light:rgba(0,0,0,.25);
    --watch-brandlist-bg-light:#f5f5f5;
    --watch-gradient-sortprice-light:linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%,rgba(255,255,255,0) 100%);
    --watch-gradient-label-light:-webkit-linear-gradient(#000, hsla(0, 0%, 20%, 0));
    --watch-modal-bg-light:#ffffff;
    --watch-modal-border-light:#dee2e6;
    --watch-modalletter-color-light:#ffffff;
    --watch-modalletter-bg-light:#222222;
    --watch-modal-dt-light:#000000;
    --watch-modal-dd-light:#222222;
    --watch-modal-close-light:#dddddd;
    --watch-brandlist-color-light:#222222;
    --watch-list-bg-light:#ffffff;
    --watch-list-border-light:#000000;
    --watch-brandtext-bg-light:#ffffff;
    --watch-brandtext-border-light:#e4e4e4;
    --watch-filter-invert-light:none;

/*dark-mode styles*/
    --watch-body-bg-dark:#222222;
    --watch-body-color-dark:#dddddd;
    --watch-backtop-bg-dark:#353535;
    --watch-title-bg-dark:#222222;
    --watch-title-color-dark:#ffffff;
    --watch-title-after-dark:#505050;
    --watch-headwidget-before-dark:#ffffff;
    --watch-listitem-view-dark:#898989;
    --watch-popular-border-dark:#666666;
    --watch-wraplong-bg-dark:#333333;
    --watch-brandScroll2-bg-dark:#4a4a4a;
    --watch-recommendbrand-bg-dark:#333333;
    --watch-recommendbrand-border-dark:#666666;
    --watch-recommendbrand-color-dark:#dddddd;
    --watch-recommendbrand-btn-dark:linear-gradient(to right, #4096ee 0%,#2a84e1 100%);
    --watch-recommend-btn-dark:#dddddd;
    --watch-dropdown3-after-dark:#cecece transparent;
    --watch-dropdown3list-bg-dark:#777777;
    --watch-dropdown3list-border-dark:#6b6b6b;
    --watch-dropdown3list-hover-dark:#656565;
    --watch-columnbtm-bg-dark:#191919;
    --watch-block3-hover-dark:#4e4e4e;
    --watch-topview-color-dark:#dddddd;
    --watch-block3-span-dark:#a2a0a0;
    --watch-breakingnews-border-dark:#585858;
    --watch-screensize-bg-dark:#4e4e4e;
    --watch-sort-border-dark:#666666;
    --watch-lunch-bordertop-dark:#6d6d6d;
    --watch-blackwhite-color-dark:#ffffff;
    --watch-whiteblack-bg-dark:#000000;
    --watch-sortfilter-color-dark:rgb(255 255 255 / 60%);
    --watch-slider-color-dark:#dddddd;
    --watch-slider-bg-dark:#6d6d6d;
    --watch-placeholder-color-dark:#dddddd;
    --watch-btnmore-bg-dark:#444444;
    --watch-btnmore-color-dark:#dddddd;  
    --watch-listgrid-active-border-dark:#eaeaea;
    --watch-listgrid-border-dark:#585858;
    --watch-listgrid-color-dark:#797979;
    --watch-clear-bg-dark:#777777;
    --watch-clear-color-dark:#ffffff;
    --watch-demo2-border-dark:#eeeeee;
    --watch-demo2-bg-dark:#eeeeee;
    --watch-demo2-color-dark:#222222;
    --watch-tablist-bg-dark:#292929;
    --watch-tablist-border-dark:#5f5f5f;
    --watch-scrollbar-track-dark:#5d5c5c;
    --watch-scrollbar-dark:#222222;
    --watch-scrollbar-thumb-dark:rgba(0,0,0,.25);
    --watch-brandlist-bg-dark:#777777;
    --watch-gradient-sortprice-dark:linear-gradient(to bottom, rgb(255 255 255 / 5%) 0%,rgb(0 0 0 / 0%) 100%);
    --watch-gradient-label-dark:-webkit-linear-gradient(#fff, hsla(0, 0%, 20%, 0));
    --watch-modal-bg-dark:#464646;
    --watch-modal-border-dark:#666666;
    --watch-modalletter-color-dark:#222222;
    --watch-modalletter-bg-dark:#f1f1f1;
    --watch-modal-dt-dark:#ffffff;
    --watch-modal-dd-dark:#dddddd;
    --watch-modal-close-dark:#666666;
    --watch-brandlist-color-dark:#dddddd;
    --watch-list-bg-dark:#222222;
    --watch-list-border-dark:#666666;
    --watch-brandtext-bg-dark:#777777;
    --watch-brandtext-border-dark:#777777;
    --watch-filter-invert-dark:invert(1);
}

@media (prefers-color-scheme: light) {
    :root {
        --watch-body-bg:var(--watch-body-bg-light);
        --watch-body-color:var(--watch-body-color-light);
        --watch-backtop-bg:var(--watch-backtop-bg-light);
        --watch-title-bg:var(--watch-title-bg-light);
        --watch-title-color:var(--watch-title-color-light);
        --watch-title-after:var(--watch-title-after-light);
        --watch-headwidget-before:var(--watch-headwidget-before-light);
        --watch-listitem-view:var(--watch-listitem-view-light);
        --watch-popular-border:var(--watch-popular-border-light);
        --watch-wraplong-bg:var(--watch-wraplong-bg-light);
        --watch-brandScroll2-bg:var(--watch-brandScroll2-bg-light);
        --watch-recommendbrand-bg:var(--watch-recommendbrand-bg-light);
        --watch-recommendbrand-border: var(--watch-recommendbrand-border-light);
        --watch-recommendbrand-color:var(--watch-recommendbrand-color-light);
        --watch-recommendbrand-btn:var(--watch-recommendbrand-btn-light);
        --watch-recommend-btn:var(--watch-recommend-btn-light);
        --watch-columnbtm-bg:var(--watch-columnbtm-bg-light);
        --watch-block3-hover:var(--watch-block3-hover-light);
        --watch-topview-color:var(--watch-topview-color-light);
        --watch-block3-span:var(--watch-block3-span-light);
        --watch-breakingnews-border: var(--watch-breakingnews-border-light);
        --watch-screensize-bg:var(--watch-screensize-bg-light);
        --watch-sort-border:var(--watch-sort-border-light);
        --watch-lunch-bordertop:var(--watch-lunch-bordertop-light);
        --watch-blackwhite-color:var(--watch-blackwhite-color-light);
        --watch-whiteblack-bg:var(--watch-whiteblack-bg-light);
        --watch-sortfilter-color:var(--watch-sortfilter-color-light);  
        --watch-dropdown3-after:var(--watch-dropdown3-after-light);
        --watch-dropdown3list-bg:var(--watch-dropdown3list-bg-light);
        --watch-dropdown3list-border:var(--watch-dropdown3list-border-light);
        --watch-dropdown3list-hover:var(--watch-dropdown3list-hover-light);
        --watch-slider-color:var(--watch-slider-color-light);
        --watch-slider-bg:var(--watch-slider-bg-light);
        --watch-placeholder-color:var(--watch-placeholder-color-light);
        --watch-btnmore-bg:var(--watch-btnmore-bg-light);
        --watch-btnmore-color:var(--watch-btnmore-color-light);  
        --watch-listgrid-active-border:var(--watch-listgrid-active-border-light);
        --watch-listgrid-border:var(--watch-listgrid-border-light);
        --watch-listgrid-color:var(--watch-listgrid-color-light);
        --watch-clear-bg:var(--watch-clear-bg-light);
        --watch-clear-color:var(--watch-clear-color-light);
        --watch-demo2-border:var(--watch-demo2-border-light);
        --watch-demo2-bg:var(--watch-demo2-bg-light);
        --watch-tablist-bg:var(--watch-tablist-bg-light);
        --watch-tablist-border:var(--watch-tablist-border-light);
        --watch-scrollbar-track:var(--watch-scrollbar-track-light:);
        --watch-scrollbar:var(--watch-scrollbar-light);
        --watch-scrollbar-thumb:var(--watch-scrollbar-thumb-light);
        --watch-brandlist-bg:var(--watch-brandlist-bg-light);
        --watch-gradient-sortprice:var(--watch-gradient-sortprice-light);
        --watch-gradient-label:var(--watch-gradient-label-light);
        --watch-modal-bg:var(--watch-modal-bg-light);
        --watch-modal-border:var(--watch-modal-border-light);
        --watch-modalletter-color:var(--watch-modalletter-color-light);
        --watch-modalletter-bg:var(--watch-modalletter-bg-light);
        --watch-modal-dt:var(--watch-modal-dt-light);
        --watch-modal-dd:var(--watch-modal-dd-light);
        --watch-modal-close:var(--watch-modal-close-light);
        --watch-brandlist-color:var(--watch-brandlist-color-light);
        --watch-list-bg:var(--watch-list-bg-light);
        --watch-list-border:var(--watch-list-border-light);
        --watch-brandtext-bg:var(--watch-brandtext-bg-light);
        --watch-brandtext-border:var(--watch-brandtext-border-light);
        --watch-filter-invert:var(--watch-filter-invert-light);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --watch-body-bg:var(--watch-body-bg-dark);
        --watch-body-color:var(--watch-body-color-dark);
        --watch-backtop-bg:var(--watch-backtop-bg-dark);
        --watch-title-bg:var(--watch-title-bg-dark);
        --watch-title-color:var(--watch-title-color-dark);
        --watch-title-after:var(--watch-title-after-dark);
        --watch-headwidget-before:var(--watch-headwidget-before-dark);
        --watch-listitem-view:var(--watch-listitem-view-dark);
        --watch-popular-border:var(--watch-popular-border-dark);
        --watch-wraplong-bg:var(--watch-wraplong-bg-dark);
        --watch-brandScroll2-bg:var(--watch-brandScroll2-bg-dark);
        --watch-recommendbrand-bg:var(--watch-recommendbrand-bg-dark);
        --watch-recommendbrand-border: var(--watch-recommendbrand-border-dark);
        --watch-recommendbrand-color:var(--watch-recommendbrand-color-dark);
        --watch-recommendbrand-btn:var(--watch-recommendbrand-btn-dark);
        --watch-recommend-btn:var(--watch-recommend-btn-dark);
        --watch-columnbtm-bg:var(--watch-columnbtm-bg-dark);
        --watch-block3-hover:var(--watch-block3-hover-dark);
        --watch-topview-color:var(--watch-topview-color-dark);
        --watch-block3-span:var(--watch-block3-span-dark);
        --watch-breakingnews-border: var(--watch-breakingnews-border-dark);
        --watch-screensize-bg:var(--watch-screensize-bg-dark);
        --watch-sort-border:var(--watch-sort-border-dark);
        --watch-lunch-bordertop:var(--watch-lunch-bordertop-dark);
        --watch-blackwhite-color:var(--watch-blackwhite-color-dark);
        --watch-whiteblack-bg:var(--watch-whiteblack-bg-dark);
        --watch-sortfilter-color:var(--watch-sortfilter-color-dark);  
        --watch-dropdown3-after:var(--watch-dropdown3-after-dark);
        --watch-dropdown3list-bg:var(--watch-dropdown3list-bg-dark);
        --watch-dropdown3list-border:var(--watch-dropdown3list-border-dark);
        --watch-dropdown3list-hover:var(--watch-dropdown3list-hover-dark);
        --watch-slider-color:var(--watch-slider-color-dark);
        --watch-slider-bg:var(--watch-slider-bg-dark);
        --watch-placeholder-color:var(--watch-placeholder-color-dark);
        --watch-btnmore-bg:var(--watch-btnmore-bg-dark);
        --watch-btnmore-color:var(--watch-btnmore-color-dark);  
        --watch-listgrid-active-border:var(--watch-listgrid-active-border-dark);
        --watch-listgrid-border:var(--watch-listgrid-border-dark);
        --watch-listgrid-color:var(--watch-listgrid-color-dark);
        --watch-clear-bg:var(--watch-clear-bg-dark);
        --watch-clear-color:var(--watch-clear-color-dark);
        --watch-demo2-border:var(--watch-demo2-border-dark);
        --watch-demo2-bg:var(--watch-demo2-bg-dark);
        --watch-tablist-bg:var(--watch-tablist-bg-dark);
        --watch-tablist-border:var(--watch-tablist-border-dark);
        --watch-scrollbar-track:var(--watch-scrollbar-track-dark:);
        --watch-scrollbar:var(--watch-scrollbar-dark);
        --watch-scrollbar-thumb:var(--watch-scrollbar-thumb-dark);
        --watch-brandlist-bg:var(--watch-brandlist-bg-dark);
        --watch-gradient-sortprice:var(--watch-gradient-sortprice-dark);
        --watch-gradient-label:var(--watch-gradient-label-dark);
        --watch-modal-bg:var(--watch-modal-bg-dark);
        --watch-modal-border:var(--watch-modal-border-dark);
        --watch-modalletter-color:var(--watch-modalletter-color-dark);
        --watch-modalletter-bg:var(--watch-modalletter-bg-dark);
        --watch-modal-dt:var(--watch-modal-dt-dark);
        --watch-modal-dd:var(--watch-modal-dd-dark);
        --watch-modal-close:var(--watch-modal-close-dark);
        --watch-brandlist-color:var(--watch-brandlist-color-dark);
        --watch-list-bg:var(--watch-list-bg-dark);
        --watch-list-border:var(--watch-list-border-dark);
        --watch-brandtext-bg:var(--watch-brandtext-bg-dark);
        --watch-brandtext-border:var(--watch-brandtext-border-dark);
        --watch-filter-invert:var(--watch-filter-invert-dark);
    }
}

[color-scheme="light"]{
    --watch-body-bg:var(--watch-body-bg-light);
    --watch-body-color:var(--watch-body-color-light);
    --watch-backtop-bg:var(--watch-backtop-bg-light);
    --watch-title-bg:var(--watch-title-bg-light);
    --watch-title-color:var(--watch-title-color-light);
    --watch-title-after:var(--watch-title-after-light);
    --watch-headwidget-before:var(--watch-headwidget-before-light);
    --watch-listitem-view:var(--watch-listitem-view-light);
    --watch-popular-border:var(--watch-popular-border-light);
    --watch-wraplong-bg:var(--watch-wraplong-bg-light);
    --watch-brandScroll2-bg:var(--watch-brandScroll2-bg-light);
    --watch-recommendbrand-bg:var(--watch-recommendbrand-bg-light);
    --watch-recommendbrand-border: var(--watch-recommendbrand-border-light);
    --watch-recommendbrand-color:var(--watch-recommendbrand-color-light);
    --watch-recommendbrand-btn:var(--watch-recommendbrand-btn-light);
    --watch-recommend-btn:var(--watch-recommend-btn-light);
    --watch-columnbtm-bg:var(--watch-columnbtm-bg-light);
    --watch-block3-hover:var(--watch-block3-hover-light);
    --watch-topview-color:var(--watch-topview-color-light);
    --watch-block3-span:var(--watch-block3-span-light);
    --watch-breakingnews-border: var(--watch-breakingnews-border-light);
    --watch-screensize-bg:var(--watch-screensize-bg-light);
    --watch-sort-border:var(--watch-sort-border-light);
    --watch-lunch-bordertop:var(--watch-lunch-bordertop-light);
    --watch-blackwhite-color:var(--watch-blackwhite-color-light);
    --watch-whiteblack-bg:var(--watch-whiteblack-bg-light);
    --watch-sortfilter-color:var(--watch-sortfilter-color-light);  
    --watch-dropdown3-after:var(--watch-dropdown3-after-light);
    --watch-dropdown3list-bg:var(--watch-dropdown3list-bg-light);
    --watch-dropdown3list-border:var(--watch-dropdown3list-border-light);
    --watch-dropdown3list-hover:var(--watch-dropdown3list-hover-light);
    --watch-slider-color:var(--watch-slider-color-light);
    --watch-slider-bg:var(--watch-slider-bg-light);
    --watch-placeholder-color:var(--watch-placeholder-color-light);
    --watch-btnmore-bg:var(--watch-btnmore-bg-light);
    --watch-btnmore-color:var(--watch-btnmore-color-light);  
    --watch-listgrid-active-border:var(--watch-listgrid-active-border-light);
    --watch-listgrid-border:var(--watch-listgrid-border-light);
    --watch-listgrid-color:var(--watch-listgrid-color-light);
    --watch-clear-bg:var(--watch-clear-bg-light);
    --watch-clear-color:var(--watch-clear-color-light);
    --watch-demo2-border:var(--watch-demo2-border-light);
    --watch-demo2-bg:var(--watch-demo2-bg-light);
    --watch-tablist-bg:var(--watch-tablist-bg-light);
    --watch-tablist-border:var(--watch-tablist-border-light);
    --watch-scrollbar-track:var(--watch-scrollbar-track-light:);
    --watch-scrollbar:var(--watch-scrollbar-light);
    --watch-scrollbar-thumb:var(--watch-scrollbar-thumb-light);
    --watch-brandlist-bg:var(--watch-brandlist-bg-light);
    --watch-gradient-sortprice:var(--watch-gradient-sortprice-light);
    --watch-gradient-label:var(--watch-gradient-label-light);
    --watch-modal-bg:var(--watch-modal-bg-light);
    --watch-modal-border:var(--watch-modal-border-light);
    --watch-modalletter-color:var(--watch-modalletter-color-light);
    --watch-modalletter-bg:var(--watch-modalletter-bg-light);
    --watch-modal-dt:var(--watch-modal-dt-light);
    --watch-modal-dd:var(--watch-modal-dd-light);
    --watch-modal-close:var(--watch-modal-close-light);
    --watch-brandlist-color:var(--watch-brandlist-color-light);
    --watch-list-bg:var(--watch-list-bg-light);
    --watch-list-border:var(--watch-list-border-light);
    --watch-brandtext-bg:var(--watch-brandtext-bg-light);
    --watch-brandtext-border:var(--watch-brandtext-border-light);
    --watch-filter-invert:var(--watch-filter-invert-light);
}

[color-scheme="dark"]{
    --watch-body-bg:var(--watch-body-bg-dark);
    --watch-body-color:var(--watch-body-color-dark);
    --watch-backtop-bg:var(--watch-backtop-bg-dark);
    --watch-title-bg:var(--watch-title-bg-dark);
    --watch-title-color:var(--watch-title-color-dark);
    --watch-title-after:var(--watch-title-after-dark);
    --watch-headwidget-before:var(--watch-headwidget-before-dark);
    --watch-listitem-view:var(--watch-listitem-view-dark);
    --watch-popular-border:var(--watch-popular-border-dark);
    --watch-wraplong-bg:var(--watch-wraplong-bg-dark);
    --watch-brandScroll2-bg:var(--watch-brandScroll2-bg-dark);
    --watch-recommendbrand-bg:var(--watch-recommendbrand-bg-dark);
    --watch-recommendbrand-border: var(--watch-recommendbrand-border-dark);
    --watch-recommendbrand-color:var(--watch-recommendbrand-color-dark);
    --watch-recommendbrand-btn:var(--watch-recommendbrand-btn-dark);
    --watch-recommend-btn:var(--watch-recommend-btn-dark);
    --watch-columnbtm-bg:var(--watch-columnbtm-bg-dark);
    --watch-block3-hover:var(--watch-block3-hover-dark);
    --watch-topview-color:var(--watch-topview-color-dark);
    --watch-block3-span:var(--watch-block3-span-dark);
    --watch-breakingnews-border: var(--watch-breakingnews-border-dark);
    --watch-screensize-bg:var(--watch-screensize-bg-dark);
    --watch-sort-border:var(--watch-sort-border-dark);
    --watch-lunch-bordertop:var(--watch-lunch-bordertop-dark);
    --watch-blackwhite-color:var(--watch-blackwhite-color-dark);
    --watch-whiteblack-bg:var(--watch-whiteblack-bg-dark);
    --watch-sortfilter-color:var(--watch-sortfilter-color-dark);  
    --watch-dropdown3-after:var(--watch-dropdown3-after-dark);
    --watch-dropdown3list-bg:var(--watch-dropdown3list-bg-dark);
    --watch-dropdown3list-border:var(--watch-dropdown3list-border-dark);
    --watch-dropdown3list-hover:var(--watch-dropdown3list-hover-dark);
    --watch-slider-color:var(--watch-slider-color-dark);
    --watch-slider-bg:var(--watch-slider-bg-dark);
    --watch-placeholder-color:var(--watch-placeholder-color-dark);
    --watch-btnmore-bg:var(--watch-btnmore-bg-dark);
    --watch-btnmore-color:var(--watch-btnmore-color-dark);  
    --watch-listgrid-active-border:var(--watch-listgrid-active-border-dark);
    --watch-listgrid-border:var(--watch-listgrid-border-dark);
    --watch-listgrid-color:var(--watch-listgrid-color-dark);
    --watch-clear-bg:var(--watch-clear-bg-dark);
    --watch-clear-color:var(--watch-clear-color-dark);
    --watch-demo2-border:var(--watch-demo2-border-dark);
    --watch-demo2-bg:var(--watch-demo2-bg-dark);
    --watch-tablist-bg:var(--watch-tablist-bg-dark);
    --watch-tablist-border:var(--watch-tablist-border-dark);
    --watch-scrollbar-track:var(--watch-scrollbar-track-dark:);
    --watch-scrollbar:var(--watch-scrollbar-dark);
    --watch-scrollbar-thumb:var(--watch-scrollbar-thumb-dark);
    --watch-brandlist-bg:var(--watch-brandlist-bg-dark);
    --watch-gradient-sortprice:var(--watch-gradient-sortprice-dark);
    --watch-gradient-label:var(--watch-gradient-label-dark);
    --watch-modal-bg:var(--watch-modal-bg-dark);
    --watch-modal-border:var(--watch-modal-border-dark);
    --watch-modalletter-color:var(--watch-modalletter-color-dark);
    --watch-modalletter-bg:var(--watch-modalletter-bg-dark);
    --watch-modal-dt:var(--watch-modal-dt-dark);
    --watch-modal-dd:var(--watch-modal-dd-dark);
    --watch-modal-close:var(--watch-modal-close-dark);
    --watch-brandlist-color:var(--watch-brandlist-color-dark);
    --watch-list-bg:var(--watch-list-bg-dark);
    --watch-list-border:var(--watch-list-border-dark);
    --watch-brandtext-bg:var(--watch-brandtext-bg-dark);
    --watch-brandtext-border:var(--watch-brandtext-border-dark);
    --watch-filter-invert:var(--watch-filter-invert-dark);
}

.mode-switch {
    display: block !important;
}

body , #wrapper{
    background: var(--watch-body-bg);
    color: var(--watch-body-color);
}
body.dark-mode{background-color:#222222;}
.title_image h1, .title_image h2, .header-widget h2, .header-widget-left h2{
    background: var(--watch-title-bg);
    color:var(--watch-title-color);
}
.title_image h1 a{
    color:var(--watch-title-color);
}
.title_image:after, .beginnerGuide .title_image:after, #buyingGuide .title_image:after{
    background:var(--watch-title-after);
}
.header-widget:before{
    background-color: var(--watch-headwidget-before);
}
.smartwatch_popular{
    background: var(--watch-whiteblack-bg);
}
.smartwatch_popular_name .list-view{
    color:var(--watch-listitem-view);
}
.smartwatch_popular_number,.smartwatch_popular_name a{
    color:var(--watch-blackwhite-color);
}
.smartwatch_popular ul li{
    border-bottom: 1px dashed var(--watch-popular-border);
}
.well{
    border-bottom: 1px dotted  var(--watch-popular-border);
}
.last_news p a{
    color:var(--watch-body-color);
}
.wrap-long-content, .quick_search{
    background-color: var(--watch-wraplong-bg);
}
#brandScroll2, .category_review, #select_smartwatch{
    background-color: var(--watch-brandScroll2-bg);
}
.btn-group #grid.active, .btn-group #list.active{
    border: 1px solid var(--watch-listgrid-active-border);
}
.btn-group #grid, .btn-group #list {
    border: 1px solid var(--watch-listgrid-border);
    color: var(--watch-listgrid-color);
}
.dark-mode .grid-group-item img {
    border-radius: 8px;
}
.smartwatch-name a{
    color:var(--watch-blackwhite-color);
}
.carousel-caption p a{
    color:var(--watch-blackwhite-color);
}
.list-group-item{
    background-color: var(--watch-list-bg);
    border-bottom: 1px dotted var(--watch-list-border);
}
.dark-mode .list-group-item:before, .dark-mode .list-group-item:hover:before{
    border-color:transparent;
}
.dark-mode .list-group-item .linkmore a.btn-more{
    border:1px solid #fff;
}
.wrapper-dropdown-3 .dropdown li.brand_textbox input{
    background:var(--watch-brandtext-bg);
    border-color:var(--watch-brandtext-border);
}

.recommendList, .randomBrand,.allListBrand a{
    background:var(--watch-recommendbrand-bg) ;
    border-color:var(--watch-recommendbrand-border);
}
.recommendList p{
    color:var(--watch-recommendbrand-color);
}
.allListBrand a{
    color:var(--watch-recommend-btn) !important;
}
.btn-list-phone{
    background: var(--watch-recommendbrand-btn);
}
.column-bottom{
    background: var(--watch-columnbtm-bg);
}
.block-three, .block-three ul li{
    background: var(--watch-body-bg);
}
.block-three h3, .block-three ul li .name a, .btn-price{
    color:var(--watch-body-color);
}
.block-three ul li:hover{
    background: var(--watch-block3-hover);
    border-radius: 8px 8px;
}
.dark-mode .top-views .icon-user{
    filter: invert(1);
}
.top-views a{
    color:var(--watch-topview-color);
}
.block-three h3 span{
    color:var(--watch-block3-span);
}
#interest ul li .number{
    background: var(--watch-body-color);
    color:var(--watch-body-bg);
}


#back-top span {
    background: var(--watch-backtop-bg) url(//www.siamphone.com/images/ar-top.png) no-repeat center center;
    background-size: 25px;
}
.dark-mode #back-top span {
    background: var(--watch-backtop-bg) url(//www.siamphone.com/images/arrow_up_wh.png) no-repeat center center;
    background-size: 25px;
}

/* Search Filter */
#q{
    background: #fff url(//www.siamphone.com/images/search_box.png) no-repeat 3px 10px;
}
.dark-mode .search-home .input_qs_spc #q {
    background: #4a4a4a url(//www.siamphone.com/images/magnifying.png) no-repeat 9px 16px;
    background-size: 15px;
}

#brand_model{
    background: #fff url(https://www.siamphone.com/images/magnifying2.png) no-repeat 2px 4px;
    background-size: 35px;
}
.dark-mode #brand_model{
    background: #292929 url(//www.siamphone.com/images/magnifying.png) no-repeat 9px 13px;
    background-size: 20px;
}
.category_review_item p, .wrapper-dropdown-3 span.showtext, .wrapper-dropdown-3 .dropdown li label{
    color:var(--watch-slider-color);
}
.slider{
    background:var(--watch-slider-bg);
}
.wrapper-dropdown-3 .dropdown li.brand_textbox input::placeholder,
.search-home .input_qs_spc #select_smartwatch::placeholder, 
#brand_model::placeholder{
    color:var(--watch-placeholder-color);
}
.btnMore a{
    background-color: var(--watch-btnmore-bg);
    color:var(--watch-btnmore-color);
}

.dark-mode .category ul li em, .dark-mode .network .dropdown li label em, .dark-mode .display_diagonal ul li em, .dark-mode .os_name .tab-list li img {
    filter: invert(0.9);
}
.dark-mode .tab-list input:checked + li.radio em, .dark-mode .network .dropdown input:checked + li.checkbox em {
    filter: none;
}
#demo2{
    color:var(--watch-demo2-color);
    border:0;
    border-color:var(--watch-demo2-border);
    border-radius: 3px;
    background-color: var(--watch-demo2-bg);
}
#clear-form{
    background-color: var(--watch-clear-bg);
    color:var(--watch-clear-color);
}

#brandScroll::-webkit-scrollbar-track, #brandScroll_e::-webkit-scrollbar-track, .brand-recommend::-webkit-scrollbar-track,.brand-all::-webkit-scrollbar-track{background-color:var(--watch-scrollbar-track);}
#brandScroll::-webkit-scrollbar, #brandScroll_e::-webkit-scrollbar, .brand-recommend::-webkit-scrollbar, .brand-all::-webkit-scrollbar{background-color:var(--watch-scrollbar);}
#brandScroll::-webkit-scrollbar-thumb, #brandScroll_e::-webkit-scrollbar-thumb, .brand-recommend::-webkit-scrollbar-thumb,.brand-all::-webkit-scrollbar-thumb{background-color:var(--watch-scrollbar-thumb);}


#style-1::-webkit-scrollbar-track{background-color: var(--watch-scrollbar-track);}
#style-1::-webkit-scrollbar{background-color: var(--watch-scrollbar);}
#style-1::-webkit-scrollbar-thumb{background-color: var(--watch-scrollbar-thumb);}

.brand_list li:nth-child(-n+12){
    background-color: var(--watch-brandlist-bg);
}
.brand-recommend li a, .brand-all li a{
    color:var(--watch-brandlist-color);
}
.dark-mode .brand-recommend li img{
    border-radius: 8px;
}
.gradientRead .network .dropdown li label, .gradientRead .sort-price li label {
    background: var(--watch-gradient-label);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.2);
}
.gradientRead .network, .gradientRead .sort-price {
    background: var(--watch-gradient-sortprice);
}

.wrapper-dropdown-3:after{
    border-color:var(--watch-dropdown3-after);
}
.wrapper-dropdown-3 .dropdown{
    background:var(--watch-dropdown3list-bg);
}
.wrapper-dropdown-3 .dropdown li{
    border-color:var(--watch-dropdown3list-border);
}
.wrapper-dropdown-3 .dropdown li:hover{
    background-color:var(--watch-dropdown3list-hover);
}
.modal-content{
    background:var(--watch-modal-bg);
}
.modal-header{
    border-color:var(--watch-modal-border);
}
.tab_letter ul li a{
    color: var(--watch-modalletter-color);
    background: var(--watch-modalletter-bg);
}
 .brand-all dd a{
    color:var(--watch-modal-dd);
}
.brand-all dt a, .brand-all dd strong{
    color:var(--watch-modal-dt);
}
.dark-mode .brand-all dd{
    background-image: url("https://www.siamphone.com/images/fullstop_wh.png");
}
.modal-header .close{
    border-color:var(--watch-modal-close);
    text-shadow: none;
}
.dark-mode .modal-header .close{
    filter:invert(1);
}
@media (prefers-color-scheme: dark) {
    
    #back-top span {
        background: var(--watch-backtop-bg) url(//www.siamphone.com/images/arrow_up_wh.png) no-repeat center center;
        background-size: 25px;
    }
    .light-mode #back-top span {
        background:var(--watch-backtop-bg) url(//www.siamphone.com/images/ar-top.png) no-repeat center center;
        background-size: 33px;
    }
    .model_list_item_image_vertical img,#store ul li .image img{
        border-radius: 5px;
    }
    .light-mode .arrow-right, .arrow-left , .light-mode .top-views .icon-user, .light-mode .sortFilter img{
        filter: invert(0);
    }
    .light-mode .sortFilter button:focus img, .light-mode .sortFilter button:hover img{
        filter:none;
    }
    .breakingNews ul li font i {
        filter: invert(0.6);
    }

    
    .light-mode #brand_model{
        background: #fff url(https://www.siamphone.com/images/magnifying2.png) no-repeat 2px 4px;
        background-size: 35px;
    }
    #brand_model{
        background: #292929 url(//www.siamphone.com/images/magnifying.png) no-repeat 9px 13px;
        background-size: 20px;
    }
}



@media (min-width: 1200px) {
    .container {
      max-width: 1200px;
    }
}

body {
    font-family: 'Kanit';
    font-size: 1rem;
    font-weight: 400;
}

a{
    color: #000;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

.title_image {
	text-align: left;
    color: #000;
    padding: 0;
    margin: 10px 0 10px;
    display: block;
	position:relative;
}
.title_image h1,.title_image h2{
    font-family: 'Kanit';
    font-size: 45px;
	font-weight:500;
    line-height: 50px;
	padding-right:10px;
	padding-bottom:5px;
    display: inline-flex;
    position: relative;
    z-index: 9;
}
.title_image:after{
/*  border-bottom: 1px solid #000; */
    content: "";
    display: block;
	height: 4px;
    /* background: #e5e5e5; */
    display: block;
    position: absolute;
    top: 43%;
    width: 100%;
    z-index: 8;
}

 .header-widget{
	text-align: center;
	position:relative;    
    margin: 10px 0 10px;
}
 .header-widget-left{
 	text-align: left;
	position:relative; 
    margin: 5px 0 10px;	
}
.header-widget:before ,.header-widget-left:before{
	content: "";
	height: 4px;
	display: block;
	position: absolute;
	top: 53%;
	width: 100%;
	z-index: 8;
}		
.header-widget:before {
	/* height:5px; */
	background:var(--watch-blackwhite-color);
	/* top:52%; */
}		
.header-widget-dark:before {
    background: #ffffff;
}
.header-widget h2, .header-widget-left h2{
	font-size: 2.5rem;			
	z-index: 9;
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0 10px;
	line-height:50px;
}
.header-widget-left h2{
	padding: 0 10px 0 0;
}
.header-widget-dark h2{
    background: #e5e5e5;
    color: #191919;
}


.carousel-inner{
	/* box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); */
	/* border-radius: 13px; */
}
.carousel-item{
	max-height:403px;
}
.carousel-caption {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    padding: 15% 0.75rem 2rem 0.75rem;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorStr=#00000000, endColorStr=#DD000000);
    background-color: transparent;
    background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,0.75));
    background-image: linear-gradient(transparent,rgba(0,0,0,0.75));
    background-position-y: -1px;
    width: 100%;
}
.carousel-caption p{
    font-size: 20px;
    font-weight: 400;
}
.carousel-caption p a{color:#fff;}
.brand-list {
    text-align: center;
    margin: 20px 0 10px;
}
.brand-list p{
	margin:0 auto;
}
.brand-list img{
	max-width: 140px;
    max-height: 60px;
    vertical-align: middle;
}
#wrapper-lastest{
	/* padding-bottom:40px; */
}
.last_news a img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.last_news p {
	margin: 5% 0;
	padding: 0;
	width: 100%;
	height: auto;
	font-family: 'Kanit';
	font-size: 18px;
	line-height: 28px;
	font-weight: 300;
}

/* Popular */
#wrapper-popular h2{
/*     font-weight: 300;
    font-size: 38px; */
}
.smartwatch_popular{/* background: #121212; */}
.smartwatch_popular ul{padding:0; margin:0;}
.smartwatch_popular ul li{
    list-style-type: none;
    padding-bottom: 10px;
    /* border-bottom: 1px dashed #c9c9c9; */
    margin-bottom: 10px;
    margin-right: 0;
    margin-left: 0;
}
.smartwatch_popular ul li:first-child{
	 padding-top: 10px;
}
.smartwatch_popular ul li:last-child{
	 margin-bottom: 0;
    border-bottom: 0 dashed #c9c9c9;
}
.smartwatch_popular_number{
    text-align: center;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 2rem;
  /*   color: #fff; */
	position:relative;
}
.smartwatch_popular_number:before{
    bottom: 0;
    z-index: 0;
    content: "";
    position: absolute;
    width: 20px;
    border: 2px solid #c00;
}
.smartwatch_popular ul li:first-child .smartwatch_popular_number:before{
	/* width:80%; */
}
.smartwatch_popular_name{
font-size: 18px;
    font-family: 'Roboto';
    font-weight: 500;
}
.smartwatch_popular_name a {
   /*  color: #f8f8f8; */
}
.smartwatch_popular_name .list-view{
	line-height: 24px;
    height: 18px;
    margin: 0;
    font-weight: 300;
    font-family: 'Roboto';
    font-size: 14px;
    color: #898989;
    display: block;
    text-align: left;
}
.list-view em {
    font-size: 13px;
    padding-right:5px;
	font-weight: 100;
}
.smartwatch_popular_image{
	text-align:center;
    border-radius: 30px;
    height: 60px;
	position: relative;
}
.smartwatch_popular_image img{
	width: auto;
    height: 58px;
	position: relative;
    z-index: 9;
}
.smartwatch_popular_image:after{
    content: "";
    position: absolute;
    width: 77px;
    height: 72px;
    background: white;
    left: 8%;
    top: -6px;
    z-index: 0;
    border-radius: 100px;
}
.quick_search {
    width: 100%;
   /*  background: rgba(0, 0, 0, 0.15);
	background-color:#d5d5d5; */
    padding: 20px 0;
    margin: 0px 0 15px;
    /* background-image: url(//www.siamphone.com/images/menuTest.png); */
    background-size: 100%;
    background-position: 50% 0;
}
.lightGrayBg{background: rgba(0, 0, 0, 0.05);}
.quick_search_qs {
	float: left;
	margin: 0 0 18px;
	overflow: hidden;
	width: 808px;
}
.quick_search_input {
	display: table-cell;
	margin: 0;
	vertical-align: middle;
	width: 1175px;
	font-size:14px;
}
.quick_search .input_qs_spc {
	float: left;
    width: auto;
	margin: 0 1% 0 0;
    width: 33%;
}
#brand_model {
	width: 400px;
    padding: 8px 10px 8px 0;
    border: 1px solid #ccc;
    position: relative;
    text-indent: 28px;
    font-size: 23px;
    background: #fff url(//www.siamphone.com/images/search_box.png) no-repeat 3px 10px;
    font-family: DBHelvethaicaXRegular;
}
.input_qs_sub {
    float: left;
    margin: 0 10px 0 10px;
}
.input_qs_sub select, .quick_search_input select {
    width: 120px;
    padding: 7px 5px 8px;
    border: 1px solid #ccc;
    font-size: 22px;
    font-family: DBHelvethaicaXRegular;
}

.wrapper-demo {
    margin: 0 15px 0 0;
    font-weight: 400;
    float: left;
    position: relative;
    width: 200px;
/*     background-color: rgba(245, 246, 246, 0.8); */
}
.brandId{width:20%;margin: 0 1% 0 0;}
#brandScroll2{width:100%;padding: 10px 15px 7px;}
.wrapper-dropdown-3 {
	position: relative;
    background: #fff;
    border-left: 0;
    cursor: pointer;
    outline: none;
    font-weight: 100;
    color: #464646;
    font-family: Tahoma, Helvetica, "Microsoft Sans Serif", sans-serif;
    border: 0 solid #ebebeb;
    float: left;
    width: 162px;
    padding:2px 15px 0px;
    margin: 0;
    font-size: 17px;
  /*   box-shadow: 0 4px 10px 0 rgba(0,0,0,.07); */
    border-radius: 3px;
}

.wrapper-dropdown-3:after {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: var(--watch-dropdown3-after) transparent;
}

.wrapper-dropdown-3 .dropdown {
  /* Size & position */
    position: absolute;
    top: 120%;
    left: 0;
    right: 0;
	z-index:99;
    height: auto;
    max-height: 311px;
	padding:0;
    overflow: auto;
    /* Styles */
    background:var(--watch-dropdown3list-bg);
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}
.wrapper-dropdown-3 span.showtext{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    display: list-item;
    line-height: 40px;
	font-size:18px;
    font-family: 'Kanit';
	font-weight:400;
    color: var(--watch-slider-color);
}
.wrapper-dropdown-3 span.showtext img{
	vertical-align: middle;
    width: 20px;
    margin: 0 5px 0 0;
}
.wrapper-dropdown-3 .dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: var(--watch-dropdown3-after) transparent;    
}

.wrapper-dropdown-3 .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}
.wrapper-dropdown-3 .dropdown li {display:block;padding:0 0 10px 28px;position:relative;margin: 0;border-bottom:1px solid var(--watch-dropdown3list-border);}
.wrapper-dropdown-3 .dropdown li:last-child {border-bottom:0 solid var(--watch-dropdown3list-border);}
.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
	font-size: 23px;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li label span{
    display: block;
    font-size: 12px;
    font-family: 'Roboto';
	color:#666;
	margin:0;
}
.wrapper-dropdown-3 .dropdown li label b{
    font-family: DBHelvethaicaXRegular;
    font-size: 19px;
    margin-left: 0;
    color: #636363;
    font-weight: 100;
}
.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
}

.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border: none;
    border-radius:0;
}

/* Hover state */

.wrapper-dropdown-3 .dropdown li:hover a {
    background-color: var(--watch-dropdown3list-hover);
}

/* Active state */

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
	margin:0;
}
.wrapper-dropdown-3.active .dropdown ~ div.tab-content {
	overflow:visible;
}

#brandScroll1 span.showtext{line-height:33px;}
/* No CSS3 support */

.no-opacity       .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
    display: block;
}

.wrapper-dropdown-3 .dropdown li label {
    display: block;
    padding: 10px 30px 0 10px; /* Same padding as the button */
    transition: all 0.3s ease-out;
	margin:0;
	font-size:16px;
	min-height:30px;
	line-height:19px;
    font-family: 'Kanit';
	cursor:pointer;
	font-weight:300;
}
.wrapper-dropdown-3 .dropdown li label.oneline{
	line-height:40px !important;
}
.checkbox input[type="checkbox"]:checked + label.oneline::after{
    top: 8px;
    right: 10px;
}
.wrapper-dropdown-3 .dropdown li:last-of-type label {
    border: none;
}
.wrapper-dropdown-3 .dropdown li input /* Checkboxes */ {
    position: absolute;
    display: block;
    right: auto;
    top: 50%;
    margin-top: -8px;
    left: 13px;
	
    border: 1px solid transparent;
    -webkit-appearance: none;
}

/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover {
    background-color: var(--watch-dropdown3list-hover);
}

/* Checked state */
.checkbox label::before, .radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-top: 3px;
    border: 1px solid #cecece;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::before, .radio label::before{
	right: auto;
    left: 10px;
    margin-top: 0;
}
.checkbox input[type="checkbox"]:checked + label::after {
    font-family: 'FontAwesome';
    content: "\f00c";
	color:#0191C8;
}
.checkbox input:checked + li.checkbox, .radio input:checked + li.radio{
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.10);
}
.checkbox label::after, .radio label::after{
    left: 10px;
    right: auto;
    top: 8px;
	color:#c00;
}
.radio label::after{
    top: 21px;
}
.radio label::before{border-radius: 30px;}
.wrapper-dropdown-3 .dropdown li.radio label::after{
	top:13px;
}
.wrapper-dropdown-3 .dropdown li input:checked ~ label {
    color: #0191C8;
   /*  text-decoration: line-through; */
}
.wrapper-dropdown-3 .dropdown li input:checked ~ span{
    color: #0191C8;
    /* text-decoration: line-through; */
}
.wrapper-dropdown-3 .dropdown li span{
    position: absolute;
    left: 10px;
    top: 35px;
	display:none;
}
.wrapper-dropdown-3 .dropdown li .toggleOn span{
	left:25px;
}
.brand_list li:nth-child(-n+12) {
    background-color:  var(--watch-brandlist-bg);
}
.wrapper-dropdown-3 .dropdown li.brand_textbox{
	padding:0;
}
.wrapper-dropdown-3 .dropdown li.brand_textbox input{
    position: relative;
    left: 0;
    top: 0;
    margin-top: 0;
    right: 0;
    padding: 5px 10px;
    width: 192px;
    width: 100%;
    line-height: 33px;
    font-size: 18px;
    font-family: 'Kanit';
    border: 1px solid var(--watch-brandtext-border);
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    background: var(--watch-brandtext-bg);
}
#brandScroll::-webkit-scrollbar-track, #brandScroll_e::-webkit-scrollbar-track{background-color:var(--watch-scrollbar-track);}
#brandScroll::-webkit-scrollbar, #brandScroll_e::-webkit-scrollbar{width:10px;background-color:var(--watch-scrollbar);}
#brandScroll::-webkit-scrollbar-thumb, #brandScroll_e::-webkit-scrollbar-thumb{border-radius:18px;background-color:var(--watch-scrollbar-thumb);}
#brandScroll1{width:195px;padding:5px 15px 5px;}
#brandScroll{top:0;}

.category_review{
    float: left;
    margin: 0;
    background: var(--watch-brandScroll2-bg);
    margin-right: 1%;
    padding: 14px 0px 15px;
    border-radius: 3px;
    width: 29%;
    text-align: center;
    -ms-flex-pack: center!important;
    justify-content: center!important;
}
.category_review strong{float:left;line-height:30px;display:none;}
.category_review img{vertical-align:sub;margin-right:5px;display:none;}
.category_review ul{
    width: auto;
    float: left;
    margin:0 0 0 10px;
	padding:0;
}
.category_review ul li{
    border: 0;
    margin: 9px 5px 0;
    min-width: 50px;
    padding: 0px 0px 0 5px;
    float: left;
    list-style-type: none;
    position: relative;
    color: rgb(62, 62, 62);
/*     background: rgba(228, 81, 66, 0.65);
    background: rgba(240,241,243,1); */
	
    border-radius: 30px;
    min-width: 90px;
    text-align: center;
}
.category_review ul li input{
    left: 0;
    position: absolute;
}
.category_review .tab-list li.radio label {
    display: block;
    margin-left: 10px;
    padding-right: 10px;
    background: rgba(255,255,255,1);
    border-radius: 0 30px 30px 0;
    padding-left: 20px;
}
.category_review .tab-list li.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 22px;
    height: 22px;
    left: 0;
    margin-left: 0;
    padding-left: 0;
    padding-top: 0;
    font-size: 14px;
    color: #555555;
	border-radius:30px;
}
.category_review  .tab-list li.radio label::before{width:24px;height:24px;margin-top:0;}
.category_review  .tab-list li.radio label[for=review]::before{
	background: #fff url(//www.siamphone.com/images/review_icon.png) no-repeat;
    background-size: 20px;
    background-position: 50% 50%;
}
.category_review  .tab-list li.radio label[for=handson]::before{
	background: #fff url(//www.siamphone.com/images/handson_icon.png) no-repeat;
    background-size: 20px;
    background-position: 50% 50%;
}
.category_review  .tab-list li.radio label[for=instore]::before{
	background: #fff url(//www.siamphone.com/images/icon-shopping.png) no-repeat;
    background-size: 20px;
    background-position: 50% 50%;
}
.category_review ul li:nth-child(2){
   /*  background: rgba(255, 210, 67, 0.65); */
}
 
.category_review_item{
	display: inline-block;
    margin: 3px 5px 0 2px;
}
.category_review_item p{
    margin: 0 5px 0 0;
    display: inline-block;
    line-height: 25px;
    font-size: 18px;
	font-weight:400;
    padding: 0;
    color: var(--watch-slider-color);
    float: left;
    font-family: 'Kanit';
}
.switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 25px;
  margin:0 0;
  vertical-align: text-bottom;
}
.switch input {display:none;}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--watch-slider-bg);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 30px;
}
.switch input:checked + .slider {
  background-color: #4096ee;
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px #4096ee;
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  transform: translateX(28px);
}

.radio label[for=review]::before{
	background: #fff url(//www.siamphone.com/images/review_icon.png) no-repeat;
    background-size: 20px;
    background-position: 50% 50%;
}
.radio label[for=handson]::before{
	background: #fff url(//www.siamphone.com/images/handson_icon.png) no-repeat;
    background-size: 20px;
    background-position: 50% 50%;
}
.radio label[for=instore]::before{
	background: #fff url(//www.siamphone.com/images/icon-shopping.png) no-repeat;
    background-size: 20px;
    background-position: 50% 50%;
}
.checkbox label::after, .radio label::after {
    display: inline-block;
    position: absolute;
    margin-left: 0;
	left: 10px;
    top: 12px;
    color: #555555;
    border-radius: 21px;
    width: 22px;
    height: 22px;
    padding: 0;
    /* border: 2px solid #555555; */
    font-size: 16px;
    line-height: 14px;
    text-indent: 1px;
 }
.radio input[type="radio"]:checked + label::after {
    font-family: 'FontAwesome';
    left: 10px;
    content: "\f00c";
    color: #0191C8;
    border: 0;
    top: 13px;
}

.tab-list li.radio label::after{
	color: transparent;
    border: 2px solid;
    top: 0;
    border-radius: 21px;
    width: 22px;
    height: 22px;
    text-shadow: none;
    font-family: 'FontAwesome';
    content: "";
    left: 0px;
}

.tab-list li input:checked ~ label[for="review"]{
    background-color:#E45142;
	 text-shadow: 0 0 0 #E45142;
	 color:#fff;
}
.tab-list li input:checked ~ label[for="handson"]{
	color: #7fbc41;
    text-shadow: 0 0 0 #7fbc41;
}
.tab-list li input:checked ~ label[for="instore"]{
	background-color: #ffd243;
    text-shadow:0 0 0 #c79903;
}
.category_review .tab-list li.radio input:checked + label[for="review"]::after{border:2px solid #E45142;}
.category_review .tab-list li.radio input:checked + label[for="handson"]::after{border:2px solid #7fbc41;}
.category_review .tab-list li.radio input:checked + label[for="instore"]::after{border:2px solid #ffd243;}

br.clear{
	clear:both;
	overflow:hidden;
}
#submit_bt{
    border: 0;
    padding:15px 10px;
    font-family: 'Kanit';
    font-size: 22px;
    background: #c00;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    height: 57px !important;
    width: 154px !important;
    width: 15% !important;
	
    background: #e45142;
    background: -moz-linear-gradient(-45deg, #e45142 0%, #ce2525 100%);
    background: -webkit-linear-gradient(-45deg, #e45142 0%,#ce2525 100%);
    background: linear-gradient(135deg, #e45142 0%,#ce2525 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e45142', endColorstr='#ce2525',GradientType=1 );
}
.loadmore{
	width: 20%;
    border: 0;
    padding: 10px 0;
    text-transform: uppercase;
    margin: 30px auto 10px;
    display: block;
    border-radius: 30px;
    color: #fff;
    clear: both;
    outline: none;
    cursor: pointer;
    font-size: 20px;
    font-family: 'Kanit';
    background-image: url(//www.siamphone.com/images/down-circle-white.png);
    background-repeat: no-repeat;
    background-position: 35% 50%;
    background-size: 23px;
    text-indent: 0;
    background: #4096ee;
    background: -moz-linear-gradient(left, #4096ee 0%, #2a84e1 100%);
    background: -webkit-linear-gradient(left, #4096ee 0%,#2a84e1 100%);
    background: linear-gradient(to right, #4096ee 0%,#2a84e1 100%);
}

#q, #select_smartwatch {
	width: 100%;
	height:auto;
    padding:15px 10px 15px 0;
    border: 0 solid #ccc;
    position: relative;
    text-indent: 35px;
    font-size: 18px;
	border-radius:3px;
    background: var(--watch-brandScroll2-bg) url(//www.siamphone.com/images/search_box.png) no-repeat 7px 17px;
    font-family: 'Kanit';
}

#detailBox{
    clear: both;
    overflow: hidden;
    margin: 0 0 0 0;
    padding: 0 0 0;
  /*   border-left: 1px solid #EBEBEB;
    border-right: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB; */
}
.coverList{
    font-size: 40px;
    font-family: DBHelvethaicaXRegular;
    text-align: center;
    padding: 0px 0 50px;
    color: #555555;
}
.launch{
    background-color: #fff;
    float: left;
    text-align: left;
    margin: 0 0 10px 0;
    padding: 18px 0 18px 13px;
    position: relative;
    width: 100%;
    line-height: 22px;
    font-family: 'Kanit';
    font-size: 20px;
    /* border: 1px solid #f5f5f5; */
    border-bottom: 1px dotted #ebebeb;
    /* border-top: 1px solid #3d3d3d; */
    border-left: 0;
    border-right: 0;
}
.launch p{margin:0;float:left;}
.launch span{
	color:#000;
	font-weight:500;
}
.launch font{
    float: right;
    font-size: 19px;
    margin: 0 10px 0 0;
    color: #7e7e7e;
}

.sortFilter{
    width: 115px;
    height: 22px;
    float: right;
    margin: 0 10px 0 0;
	position: relative;
}
.sortFilter button{
	width: 115px;
    height: 25px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    color: rgba(50, 50, 50, 0.6);
    border: 0;
    line-height: 22px;
    font-family: 'Kanit';
    font-size: 14px;
    background: transparent;
	border: 1px solid transparent;
}
.sortFilter button:focus, .sortFilter button:hover{
	background-color:#ffffff;
	outline:none;
	border: 1px solid #3d3d3d;
	color:#3d3d3d;
}
.sortFilter button:focus{	border-bottom:0;}
.sortFilter img{
    width: 15px;
    height: auto;
    vertical-align: middle;
    margin: 0 5px 0 0;
    opacity: 0.5;
}
.sortFilter a:hover{color:rgba(50, 50, 50, 0.95);}
.sortFilter a:hover img{ opacity: 0.8;}
.sortFilter button:hover  a img{
	opacity:1.0;
}

/* The container <div> - needed to position the dropdown content */
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    z-index: 1;
	border: 1px solid #3d3d3d;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 4px 16px;
    text-decoration: none;
    display: block;
	font-size: 14px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show_dropdown {display:block;right:0;margin:0;}


br.clear{
	clear:both;
	overflow:hidden;
}


/* Interesting */
.block_fourth{
	overflow:hidden;
	clear:both;
    padding-top: 25px;
    padding-bottom: 25px;
}
.block_fourth ul {
    padding: 0;
	margin-bottom:0;
    list-style: none;
}
.block_fourth ul li {
    position: relative;
    line-height: 25px;
    overflow: visible;
  /*   border-bottom: 1px dashed #eee; */
}
.block_fourth ul li .cover{
    margin: 20px 15px;
    background: #fff;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 10px #d2d2d2;
}
.block_fourth ul li a {
    padding: 0;
    background: 0 0;
    display: block;
    margin: 0;
    overflow: hidden;
    float: left;
    width: 46%;
    font-weight: 400;
}
.block_fourth ul li a.linkHead {
    overflow: hidden;
    float: right;
    padding: 0;
    margin: 10px 0 0 0;
    outline: 0;
    width: 100%;
    height: 80px;
    line-height: 28px;
    font-size: 18px;
    font-weight: 300;
}
.block_fourth ul li a img {
    width: 100%;
    height: auto;
    float: left;
	border-radius: 8px;
}
.block_fourth p {
    margin: 0 0 0 5%;
    padding: 0;
    width: 49%;
    float: left;
}
.block_fourth p span{
	color: #c00;
    font-size: 1.5rem;
}
.block_fourth p small{
	position:relative;
    display: block;
    color: #8c8c8c;
}
.block_fourth p small:before{
	content: "";
    left: 0;
    position: absolute;
    left: auto;
    top: 50%;
    background: repeating-linear-gradient(45deg, #a7a7a7, #a7a7a7 1px);
    transform: rotate(-20deg);
    width: 46px;
    height: 1px;
}

/* .dark-block{
	background: #121212;
}
.dark-block a{color: #fff;}
.dark-block .title_image h2{background: #121212;color: #fff;}

ul.dark-block li:nth-child(odd){
	background: #1d1d1d;
} */
ul.dark-block{padding-left:0;}
ul.dark-block li{
	list-style-type: none;
    padding-top: 0;
    padding-bottom: 15px;
	font-weight: 300;
}
.content_right {
	text-align:center;
    min-width: 300px;
    padding: 0;
    margin: 18px 0 10px 0;
}

.column-bottom{
    width: 100%;
    clear: both;
    padding: 1% 1%;
    overflow: hidden;
}

.block-three{
    width: 32.75%;
    text-align: center;
    font-size: 12px;
    float: left;
    font-family: Tahoma, "MS Sans Serif", sans-serif;
    margin: 0;
    color: black;
    padding: 0 0 5px 0;
    margin-right: 10px;
	min-height: 520px;
}
.block-three:last-child{margin:0;}
.block-three h3{
    margin: 0;
    padding: 10px 0 5px 10px;
    text-align: left;
    min-height: 37px;
    font-family: 'Kanit';
    font-weight: 500;
    font-size: 25px;
}
.block-three h3 span{
	font-size: 14px;
    text-align: right;
    display: block;
    float: right;
    margin: 5px 20px -5px 0;
    font-weight: 300;
}
.block-three ul{padding:0 15px;margin:0;}
.block-three ul li{
    padding: 0;
    margin: 8px 0 9px;
    list-style-type: none;
    width: 100%;
    clear: both;
    float: left;
	position:relative;
}
.block-three ul li .number{
    position: absolute;
    width: 25px;
    height: 25px;
    text-align: center;
    color: #fff;
    background: #ccc;
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 17px;
    border-radius: 30px;
    line-height: 24px;
    top: 2px;
    left: -5px;
}
.block-three ul li .image{
    width: 45%;
    float: left;
}
.block-three ul li .image img{
    width: 100%;
    height: auto;
	border-radius:8px;
}
.block-three ul li .name{
	width: 55%;
    float: right;
    text-align: left;
}
.block-three ul li .name a{
	display:inline-block;
	font-size: 16px;
    line-height: 26px;
    padding: 1px 10px;
    font-family: 'Kanit';
    font-weight: 300;
}
.spit_w { 
    overflow: hidden;
	height:75px;
}


/* review */
#review ul li .number, #review_block ul li .number{
    color: #fff;
    background: #222;
}

/* store*/
#store ul li{
	margin-bottom:13px;
	padding:3px 0;
}
#store ul li .image {
    width: 19%;
    margin-left:1%;
    background: #fff;
    border-radius: 8px;
}
#store ul li .image img{
    height: auto;
    width: auto;
    max-width: 46px;
    vertical-align: middle;
	border-radius:0;
    padding:4px 0 3px;
}
#store ul li .name{
	width: 80%;
    float: left;
}
#store ul li .name a {
    font-size: 16px;
    font-weight: 300;
    font-family: 'Kanit';
}

.btn-price{
    padding-right: 0;
    width: 76%;
    font-size: 20px;
    line-height: 33px;
    font-weight: 600;
    font-family: 'Kanit';
    text-align: left;
    padding-left: 3%;
    padding-top: 3%;
    float: left;
}
.btn-price a{
	background: #2e8841;
    padding: 0 7px;
    color: #fff;
    border-radius: 6px;
    margin: 2px 5px 0 0;
    float: right;
    text-decoration: none;
    width: 60px;
    text-align: center;
    line-height: 26px;
    transition: background 0.3s;
    font-family: 'Kanit';
    font-size: 15px;
    font-weight: 400;
}

/* interest */
#interest ul li {
    padding:2px 0px 3px;
}
#interest ul li .number{
    color: #fff;
   background: #222;

   background: var(--watch-body-color);
    color:var(--watch-body-bg);
}
#interest ul li .name{
	width:93%;
}
#interest ul li .name a {
    font-size: 16px;
    font-weight: 300;
    font-family: 'Kanit';
	padding:0;
}
.top-views{
	position: absolute;
    right: 5px;
    top: 5px;
    z-index: 0;
	font-family: 'roboto';
}
.top-views a{
    font-weight: bold;
	font-size:15px;
}
.top-views .icon-user{
    margin-right: 5px;
    margin-top: 4px;
    width: 13px;
    height: 13px;
    background: url(https://www.siamphone.com/images/icon-user-2x.png) no-repeat;
    display: inline-block;
    background-size: 13px;
    filter:var(--watch-filter-invert);
}

#back-top {position:fixed;bottom:15px;right:35px;z-index:999;}#back-top a{display:block;text-align:center;	font:11px/100% Arial, Helvetica, sans-serif;text-transform:uppercase;	text-decoration:none;color:#bbb;-webkit-transition:1s;-moz-transition:1s;transition:1s;}
#back-top a:hover{color:#000;}
#back-top span{width:50px;height:50px;display:block;margin-bottom:7px;background:#cfcfcf url(//www.siamphone.com/images/ar-top.png) no-repeat center center;background-size:33px;-webkit-transition:1s;-moz-transition:1s;transition:1s;opacity:0.8;border-radius: 10%;}

.container-footer{background:#191919;}
#footer {
    margin: 10px auto 0;
}
#footer_copyright {
    padding: 0;
    width: 100%;
    font: 10px/30px Arial;
    text-transform: uppercase;
    display: inline-block;
}
#footer_copyright .siamphone_logo {
    margin: 0 10px;
    float: left;
}
#footer_copyright .siamphone_logo img {
	vertical-align:sub;
}
#footer_copyright em.copysign {
    font-size: 12px;
    float: left;
    font-family: Arial;
    margin-right: 5px;
    font-style: normal;
}
#footer_copyright p.right_reserved_text {
    float: left;
    margin: 0;
    color: #8c8c8c;
}
#footer_copyright p.social_network {
    float: right;
    margin: 0 10px;
    color: #8c8c8c;
}
#footer_copyright p.social_network a {
    margin: 0 5px;
    color: #8c8c8c;
}

@media (max-width: 991px) {
	.carousel-item{
		max-height:100%;
	}
	.brandId, .quick_search .input_qs_spc{
		width: 48%;
		margin:0;
		margin-bottom: 1rem;
	}
	.brandId{margin-right:4%}
	.category_review{width:100%;margin-bottom: 1rem;}
	#q,#submit_bt{width:100% !important;}
	
	#wrapper-popular{margin-top: 2rem;}
	.column-bottom {
		width: 100%;
		padding: 0 2% 2%;
		margin-top:5%;
	}
	.block-three {
		width: 50%;
		margin-top: 10px;
	}	
	#review_block {
		width: 100%;
	}
	#store, #interest{margin:2% 0;}
	
	.block-news {margin-bottom:15px;}
	.block-news .linkImg{width: 45%;float: left;}
	.block-news .readLink{width: 52%;
    float: right;
    text-align: left;margin:0;}
	.block-news .readLink a{    
		
	}
	
	.loadmore{width:40%;}
	
	
}
@media (max-width: 768px) {
	.title_image h1{
	    font-size: 2.2rem;
		line-height: 1.5rem;
	}
	.title_image h2{
		line-height: 1.5rem;
		font-size: 2.2rem;
	}
	.brandId, .quick_search .input_qs_spc{
		width: 48%;
		margin:0;
		margin-bottom: 1rem;
	}
	.brandId{margin-right:4%}
	.category_review{width:100%;margin-bottom: 1rem;}
	#q,#submit_bt{width:100% !important;}
	
	.column-bottom {
		width: 100%;
		padding: 0 2% 2%;
		margin-top:5%;
	}
	.block-three {
		width: 100%;
		margin-top: 10px;
	}	
	#store{margin:2% 0;}
	
	.loadmore{width:60%;}
	
	.top-banner img,.adsBanner img{width:100%;height:auto;}
	.carousel-caption{
		position: relative;
		color: #000;
		background: none;
		padding: 5% 0.75rem 2rem 0.75rem;
	}
	.carousel-indicators{margin-bottom:0;}
	.carousel-indicators li{
	    background-color: #c00;
		width: 10px;
		height: 10px;
		border-radius: 30px;
	}
	.carousel-caption p a{/*color:#222;*/}
	.bannerAds img{width:100%;height:auto;}
}

@media (max-width: 568px) {
	.brandId, .quick_search .input_qs_spc, .category_review{
		width: 100%;
		margin:0;
		margin-bottom: 1rem;
	}
	
	.column-bottom {
		width: 100%;
		padding: 0 3% 3%;
		margin-top:5%;
	}
	.block-three {
		width: 100%;
		margin-top: 3%;
		margin-right:0;
	}
	#store{margin:3% 0;}
	.loadmore{width:70%;}
}