@import url(/css/simple.css);
@import url('https://fonts.googleapis.com/css?family=Prompt:300&subset=thai');

/*
Theme Name:  SoftGanz Simple
Theme URI: http://www.softganz.com/sharing/simple/
Description: SoftGanz Simple is a base of responsive web design.
Copyright: 2014
Version: 0.10
Author: SoftGanz by Little Bear
Author URI: http://www.softganz.com/
Tags: fixed width, simple, clean
*/

/* @Color palettes */
/* https://coolors.co/78b116-ff6600-f1f9e2-0063e0-39a8c6 */
.template.-color1 {background-color: #5EA47D;} /* Green : Main navigator */
.template.-color2 {background-color: #72C02C;} /* Green : Side Header */
.template.-color3 {background-color: #17BA9B;} /* Green : Group Header; */
.template.-color4 {background-color: #C82333;} /* Red : Highlight Button */
.template.-color5 {background-color: #5FAEE3;} /* Blue : Sub Header */

/* @group General */
body {font: 1.4rem/2.2rem Prompt, sans-serif;}
a:link, a:visited, a:active, a:hover {text-decoration: none;}
a:focus {outline:none; }
/* @end */

h1,h2,h3,h4,h5,h6 {margin:0; padding:4px 0; line-height: 1.1em; font-weight: normal;}
h2 {font-size: 1.6em; color: #114189;}
h3 {font-size: 1.3em; color: #114189;}
h4 {font-size: 1.3em; color: #114189;}
h5 {font-size: 1.2em; color: #114189;}
h6 {font-size: 1.2em; color: #114189;}

h2.header {text-align: right; font-size: 1.2em;}

.page.-page {margin:0 auto; padding:0;}
.page.-header {height: 96px; margin:0 auto; padding:0; background: #369460 none center bottom no-repeat; position: fixed; z-index:1000; top:0; left:0px; right:0;  box-shadow: 0px 10px 20px #ccc;}
.page.-header>.wrapper {display: flex; flex-wrap: nowrap; position: relative;}
.page.-header header {height:48px; flex: 1 0 210px; margin: 0; padding: 0; float: none; overflow: hidden; background: transparent url(logo.png?1) 0 -32px no-repeat; text-indent: -999em; opacity: 0.9;}
.page.-header h1 {margin:0; padding: 0; font-size: 1.6em; line-height: 35px;}
.page.-header h1>a {height:100%;display:block;color: #fff;}

/* @group navigator */
.nav.-main .menu.-main>li>a:hover {background: #89c91a;}
/* @end */


.page.-content {margin: 56px 0 32px; padding:0; clear: both; background: #fff; position: relative;}

.page.-primary {padding: 0 1px; overflow: hidden; }
.page.-secondary {}
.page.-content-footer {display: none;}

/*
.paper-content-story,.paper-content-article, .tag-topics {display: flex;flex-wrap: wrap;
    justify-content: space-between;}
.topic-list.-style-div {width: 45%;}
.widget-tables-end {display: none;}
.page-nv {width: 100%;}
*/

.page.-footer { margin:0; padding:10px; color: #333; font-size: 0.9em; background: #f5f5f5; text-align: center;}
.page.-footer>.wrapper {margin:0 auto;}
.page.-footer p {margin: 0;padding:0;}
.page.-footer a {color: #666;}
.page.-footer a:hover {color: #333;}

/* Set max page width */
.page.-page {max-width: 980px;}
.page.-header .wrapper {max-width: 980px;}
.page.-content {}
.page.-footer>.wrapper {}

.topic-list {margin:20px 10px; padding:0; list-style-type: none; box-shadow: 0px 0px 1px #aaa;}
.topic-list>li {position: relative;}
.topic-list .title {margin:0; padding:5px; font-size: 1.2em;}
.topic-list .footer {clear: both;}
.topic-list .summary {margin:0 10px; padding: 0;}
.topic-list .image {width:100%; margin:0 auto; padding:0; border:none; display: block; float: none;}

.tag-topics {display: flex; flex-wrap: wrap; justify-content: space-between;}
.tag-topics .page-nv {flex: 1 0 100%;}
.tag-topics .topic-list {flex: 1 0 100%; margin: 0 0 32px 0; padding-bottom: 32px; position: relative;}
.tag-topics .topic-list .footer {position: absolute; margin: 0; bottom: 0; right: 0; border: none;}

.widget-content {}
.widget-item {margin:20px 10px; background: #fff; box-shadow: 1px 1px 2px #aaa; position: relative;}
.widget-item h2 {margin:0; padding:5px; color: green;}
.widget-item .summary {margin:0 10px; padding:0; overflow: hidden;}
.widget-item div.photo {margin:10px 0; padding:0; border:none;}
.widget-item .photo-th {width:100%; width: calc(100% + 14px); margin-left: calc(-7px); overflow:hidden;}
.widget-item img.image {width:100%;height:auto; margin:0; padding:0; border:none;}
.widget-item p {margin:0; padding:0;}
.widget-item h3 {margin:0; padding:4px; font-size: 1.3em; line-height: 1.3em;}
.widget-item .timestamp {position: absolute; left:10px; bottom:0;}
/* @end */

/******************
* Responsive web
******************/

.card {box-shadow: none;}


.page.-header {height: 48px;}
.nav.-main {}
.nav.-main>.menu.-main {display: none;}
.nav.-main>.menu.-main>li>a {font-size: 1.6rem;}
.nav.-main .sg-navtoggle {position: absolute; margin: 0; right: 7px; top: 5px; z-index: 1002; box-shadow: none;}
.nav.-main.-active {position: absolute; width: 100%; top: 48px; }
.nav.-main.-active .sg-navtoggle {margin-top: -48px;}
.nav.-main.-active>.menu.-main {display: block; height: auto; flex: 1 0 100%; position: absolute; background-color: green;top: 0; left: 0; right: 0;}
.nav.-main.-active>.menu.-main>li {display: block; float: none;}


#lang {position: absolute; right: 64px; top: 14px; color:#fff; z-index:1000;}
#lang>a {background: #ccc; color:#fff; padding:2px 6px; border-radius: 4px; border: none;}
#lang>a:hover,#lang>a.active:hover {background: #FF9C00;}
#lang>a.active {background: #FF9C00;}

@media (min-width:30em){    /* 480/16 */
}

@media (min-width:40em){    /* 640/16 */
	.page.-header header {overflow: hidden; float: none;}
	.nav--main {margin-left: 48px; height:48px;}
}

@media (min-width:45em) { /* 720/16 */
	.page.-header {overflow-x:initial;}

	.page.-header {}
	.page.-header header {flex: 0 0 230px;}
	.nav.-main>.menu.-main {display: block; margin-right: 70px;}
	.nav.-main .sg-navtoggle {display: none;}

	.tag-topics .topic-list {flex: 0 0 48%;}

	#lang {right: 4px;}

}

@media (min-width:60em) {    /* 960/16 */
	.page.-header .wrapper { height:48px; margin:0 auto;}
	.page.-content {}
}


/******************
* Responsive web for this web only
******************/
.page.-header {box-shadow: none;}


.module-home .page.-content {margin:56px 0 32px 0;}
.module-home h2.title {display: none;}

p.readall {padding-right:20px;text-align:right;}
p.readall a {padding: 1px 8px; display: inline-block; background: #5cbb3f; border: none; border-radius: 4px; color: #383838;}
p.readall .arrow-right {border-left: 5px solid #5cbb3f;}

.page.-secondary>.nav {margin-bottom: 16px;}
.page.-secondary h3 {padding: 2px 0px 2px 8px; font-size: 1.1em; line-height: 1.6em; border-radius: 4px 4px 0 0; display: flex; align-items: center;}
.page.-secondary h3>.icon {font-size: 18px; margin-right: 4px;}
.page.-secondary .nav>ul {}
.page.-secondary .nav>ul>li>a {margin: 0; padding: 8px; display: block; border-top: none;}
.page.-secondary .nav>ul>li:last-child>a {border-radius: 0 0 4px 4px;}
.page.-secondary a>.icon {height: 18px; font-size: 18px; margin-right: 8px;}

.page.-secondary .ceo {margin: 0 0 32px 0; padding: 0 0 8px 0;}
.page.-secondary .ceo>img {display: block; width: 95%; margin: 0 auto; border-radius: 16px;}
.page.-secondary .ceo>span {display: block; padding: 4px; text-align: center;}
.page.-secondary .ceo>.pos {margin: 4px auto;}

.home {}

.home.-slidenews {margin: 0 0 32px; height: 120px; overflow: hidden; flex: 1 0 100%;}
.home.-slidenews h3,
.home.-slidenews .timestamp,
.home.-slidenews .footer,
.home.-slidenews .summary {display: none;}
.home.-slidenews .sg-slider,
.home.-slidenews div.photo,
.home.-slidenews div.photo-th,
.home.-slidenews div.photo>a {margin: 0; height: 100%; display: block;}
.home.-slidenews div.photo img {margin: 0; padding: 0; border: none; width: 100%; height: 100%;}

.home.-image>img {width: 100%; height: auto; display: block; margin: 0 0 32px 0;}
.home.-vdo {margin-bottom: 64px;}
.home.-vdo>ul {list-style-type: none; margin: 0; padding: 0;}
.home.-vdo>ul>li {margin: 0 0 16px 0;}
.home.-vdo h3 {background-color: #1E90FF; color: #fff; padding: 8px; text-align: center;}
.home.-vdo iframe {width: 100%;}

.home-content.-card-2 {margin-bottom: 64px; position: relative;}
.home-content.-card-2 h2 {background-color: #17BA9B; color: #fff; padding: 8px 0; text-align: center; border-radius: 2px; font-size: 1.3em; line-height: 2em;}
.home-content.-card-2 h3 {background-color: transparent; font-size: 1.2em; background-color: #fff; width: calc(100% - 8px);}
.home-content.-card-2 .summary {display: none;}
.home-content.-card-2 .timestamp {display: none;}
.home-content.-card-2 .footer {display: none;}

.home-content.-card {margin: 0 0 48px 0; padding: 0; position: relative;}
	.home-content.-card h2 {margin: 0; padding: 0; background-color: #1b9363; color: #dafff0; font-size: 1.2em; line-height: 1.2em; font-weight: bold;}
	.home-content.-card h2>span {padding: 0 16px 0 16px; border-radius: 0; height: 36px; line-height: 36px; display: block; font-size: 1.2em;}
	.home-content.-card .readall {margin: 0; padding: 0; position: absolute; top: 6px; right: 4px; font-size: 0.8em;}
	.home-content.-card .widget-item {margin: 8px 0 8px 0;}
	.home-content.-card .summary {display: none;}
	.home-content.-card .timestamp {display: none;}
	.home-content.-card .footer {display: none;}
	.home-content.-card .new {display: none;}




.home-content.-list {margin: 0 0 48px 0; padding: 0; position: relative;}
	.home-content.-list h2 {margin: 0; padding: 0; background-color: #1b9363; color: #dafff0; font-size: 1.2em; line-height: 1.2em; font-weight: bold;}
	.home-content.-list h2>span {padding: 0 16px 0 16px; border-radius: 0; height: 36px; line-height: 36px; display: block; font-size: 1.8rem;}
	.home-content.-list .container {margin: 0; padding: 0; border-radius: 1px 1px 4px 4px;}
	.home-content.-list .readall {margin: 0; padding: 0; position: absolute; top: 6px; right: 4px; font-size: 0.8em;}
	.home-content.-list ul {margin: 0; padding: 0;}
	.home-content.-list li {border: 1px #eee solid; border-bottom: none; list-style-type: none; display: flex;}
	.home-content.-list li:last-child {border-bottom: 1px #eee solid;}
	.home-content.-list li>a {flex: 1; padding: 8px;}
	.home-content.-list li>img {display: none;}
	.home-content.-list .timestamp {text-align: center; white-space: nowrap; display: flex; font-size: 1.2rem;}
	.home-content.-list .timestamp>* {padding: 8px 4px; display: inline-block; border-left: 1px #eee solid;}
	.home-content.-list .timestamp>.sep {display: none;}
	.home-content.-list .timestamp>.date {width: 8em;}
	.home-content.-list .timestamp>.view {width: 5em;}
	.home-content.-list .timestamp>.reply {display: none;}


.fb_dialog_content>iframe {bottom: 6rem !important;}

/* Light Theme */
body {color: #111;}
a {color: #17599c;}
a:hover {color: #1f84eb;}

.nav.-main .menu.-main>li>a {color: #fff;}

.page.-secondary h3 {background-color: #1b9363; color: #eeffde;}
.page.-secondary h3>.icon {color: #eeffde;}
.page.-secondary .nav>ul {}
.page.-secondary .nav>ul>li>a {background-color: #fff; border: 1px #f1f1f1 solid; color: #333;}
.page.-secondary .nav a:hover {color: #808080; background-color: #f1f1f1;}
.page.-secondary a>.icon {color: #808080;}
.page.-secondary .ceo>img {box-shadow: 0 0 0 1px #ddd;}
.page.-secondary .ceo>.pos {background-color: #1499d8; color: #d1f0ff;}

/* Dark Theme */


@media (min-width:30em){    /* 480/16 = 30 */
}

@media (min-width:40em){    /* 640/16 = 40 */
	.home.-slidenews {height: 180px;}
	.module.-module-has-sidebar .page.-secondary {display: none;}
}

@media (min-width:45em) { /* 720/16 = 45 */
	body#home div#ribbon {width: 24px; position: absolute; border: none; background: transparent; margin-left: -200px; z-index: 9999; opacity: 0.8;}
	body#home ul li.head {display: none;}
	body#home li#user-menu-edit {display: block;}
	body#home ul#user-menu>li>a {border: none; padding: 0; border: 2px green solid; border-radius: 50%; padding: 0; width: 24px; height: 24px; background-color: #e1ffe1;}


	.nav.-submodule>ul>li>a>span {display: inline-block;}
	.nav.-submodule>ul>li>a>span.hidden {display: none;}

	.page.-content {display: flex; flex-wrap: wrap; justify-content: space-between;}

	.page.-primary {flex: 1; order: 2; margin-left: 32px;}
	.page.-secondary {order: 1; flex: 0 0 180px;}

	.module-home .page.-content {}

	.home-content.-card .widget-content {display: flex; flex-wrap: wrap; justify-content: space-between;}
	.home-content.-card .widget-item {flex: 0 0 calc(50% - 8px); box-shadow: none;}
	.home-content.-card h3 {position: relative; font-size: 1.6rem; margin: 0; background-color: #1b9363; max-height: 1.9rem;}
	.home-content.-card h3>a {color: #fff;}
	.home-content.-card div.photo {margin: 0;}

	.home-content.-card-2 .widget-content {display: flex; flex-wrap: wrap; justify-content: space-between;}
	.home-content.-card-2 .widget-content .widget-item {width: 47%; margin: 8px 0 8px 0;}
	.home-content.-card-2 h3 {bottom: 0; padding: 8px 4px;}


}

@media (min-width:48em) { /* 768/16 = 48 iPad */
}

@media (min-width:50em) {    /* 800/16 = 50 */

}


@media (min-width:56.25em) {    /* 900/16 = 56.25 */
	.page.-header {background-position: center top; }
	.page.-content {margin: 56px 0 32px;}
	.page.-header header {background-position: 16px -32px;}
	.page.-secondary {flex: 0 0 260px;}

	.toolbar.-main {border-radius: 2px;}

	.home.-slidenews {height: 300px;}

	body#home div#ribbon {margin-left: -285px;}

}


@media (min-width:61.25em) {    /* 980/16 = 61.25 */
}

@media (min-width:80em) {    /* 1280/16 = 80 */
}




@media print {
	body {font: 16pt/18pt "CordiaUPC","Cordia New", Tahoma, Arial, Verdana, sans-serif; color:#000;}
	.page.-header {height:30px;overflow:hidden; display: none;}
	.page.-header h1 {font-size:1em;text-align:right;height:30px;overflow:hidden;}
	.page.-footer {display:none;}
	.paper.-footer, .package-footer {display:none;}
	.widget-table {margin:0;padding:0;float:none;display:table;width:100%; border:none;}
	.widget-table>thead>tr>th {padding:2px;}
	.noprint {display: none;}
	.pagebreak {color: transparent; border: none; page-break-after:always;}

	.page.-content {margin:0; padding: 0;}

	.widget-table td {border-bottom: 2px #000 solid;}

	.widget-table tr td,
	.widget-table thead tr th {border-bottom:2px #333 solid;}
	.widget-table thead tr th {border-top:2px #333 solid;}

	.col-center {text-align: center;}
	.col-money {text-align: center;}
	.widget-table .col-no {text-align:center; padding-left:4px; padding-right:4px;}
	.widget-table .col-no:after {content:".";}
	.col-amt {text-align:center;}
	.col-tool {text-align:center;}
	.col-date {text-align:center;white-space:nowrap;}
	.col-status {text-align:center;}
	.col-poster {text-align:center;}

	.widget-table .subheader {font-weight: bold; background-color: #ddd;}
	.widget-table .subfooter {font-weight:bold; background-color: #eaeaea;}

}