@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@500;600;700;800;900&family=Roboto:wght@400;500;600;700;800&family=Allison&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Noto+Sans+Thai&family=Kanit&family=Mitr&family=Prompt&family=Sarabun&display=swap");
@import url("custom-animation.css");
@import url("animate.css");
@import url("../fonts/webexbaseicon/style.css");
@import url("../fonts/webexthemeicon/style.css");

*{
	margin:0px;
	padding:0px;
	border:none;
	outline:none !important
}

/* */
    :root{
  --primary:#1E3A8A;
  --primary-2:#1E2F5C;
  --secondary:#5A6E6E;
  --accent:#A0961E;

  --header-gold:#A0961E;
  --header-gold-soft: rgba(160,150,30,.22);

  --topbar:#0E1A33;
  --footer-1:#0E1A33;
  --footer-2:#0A1226;
  --hero-a: rgba(30,58,138,.22);
  --hero-b: rgba(160,150,30,.14);

  --bg:#F3F5F9;
  --bg-2:#FFFFFF;
  --text:#0B1220;
  --muted:#3F4B4B;
  --line:#E1E5EE;

  --shadow: 0 14px 30px rgba(0,0,0,.16);
  --shadow-sm: 0 7px 18px rgba(0,0,0,.14);

  --container: 1200px;
}

html[data-theme="corporate"]{
  --primary:#0B1530;
  --primary-2:#1E3A8A;
  --secondary:#5A6E6E;
  --accent:#A0961E;

  --header-gold:#A0961E;
  --header-gold-soft: rgba(160,150,30,.26);

  --topbar:#0B1530;
  --footer-1:#0B1530;
  --footer-2:#070E1D;
  --hero-a: rgba(11,21,48,.28);
  --hero-b: rgba(160,150,30,.16);

  --bg:#F3F5F9;
  --bg-2:#FFFFFF;
  --text:#0B1220;
  --muted:#3F4B4B;
  --line:#E1E5EE;
}
/*  */


::-moz-selection{background:var(--webex-primary-color);color:#fff;text-shadow:none}
::-webkit-scrollbar{background-color:var(--bg-silver);width:8px}
::-webkit-scrollbar-thumb{background-color:var(--webex-primary-color3)}
::selection{background:var(--webex-primary-color);color:#fff;text-shadow:none}



/* Lock sections to daily look always */
    .always-daily {
        --primary: #0B1530;
        --primary-2: #1E2F5C;
        --secondary: #4A5A66;
        --accent: #A0961E;
        --header-gold: #A0961E;
        --header-gold-soft: rgba(160,150,30,.28);
        --shadow: 0 18px 42px rgba(0,0,0,.24);
        --shadow-sm: 0 10px 26px rgba(0,0,0,.20);
    }

    /* ===== v1.10 Header & Hero reference style (based on provided mock) ===== */
    :root {
        --header-surface: #F3F6FB;
        --header-surface-2: #E9EEF7;
        --hero-image: url('https://upload.wikimedia.org/wikipedia/commons/8/85/%E0%B8%A8%E0%B8%B2%E0%B8%A5%E0%B8%9B%E0%B8%81%E0%B8%84%E0%B8%A3%E0%B8%AD%E0%B8%87%28%E0%B8%AB%E0%B8%A3%E0%B8%B7%E0%B8%AD%E0%B9%80%E0%B8%9B%E0%B8%A5%E0%B9%88%E0%B8%B2%29_-_panoramio.jpg');
    }

body{
	color:var(--body-font-color);
	font-family:var(--body-font);
	font-weight:var(--body-font-weight);
	font-size:var(--body-font-size);
	line-height: 1.8em;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

#sppb-addon-1678152024668 .topbar-info li {
    font-weight: 600;
}

p{
	position:relative;
	margin:0 0 20px;
}

h1,h2,h3,h4,h5,h6{
	color:var(--heading-font-color);
	margin:0;
	font-family:var(--heading-font);
	position:relative;
}

h1,h2{
	font-weight:var(--h1-h2-font-weight);
	line-height:1.2;
}
h3,h4{
	font-weight:var(--h3-h4-font-weight);
}
h5,h6{
	font-weight:var(--h5-h6-font-weight);
}
h1{font-size:56px}
@media screen and (max-width: 425px){h1{font-size:42px}}@media screen and (max-width: 320px){h1{font-size:38px}}h2{font-size:46px}@media screen and (max-width: 425px){h2{font-size:38px}}h3{font-size:26px;line-height:1.2}h4{font-size:22px;line-height:1.2}h5{font-size:20px;line-height:1.2}h6{font-size:16px;line-height:1.2}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--heading-font-color);font-family:var(--heading-font)}b,strong{color:var(--heading-font-color)}iframe{border:none}a,b,div,ul,li{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-moz-outline-:none}input,select,textarea,input[type="text"],input[type="date"],input[type="url"],input[type="email"],input[type="password"],input[type="tel"],button,button[type="submit"]{-moz-appearance:none;box-shadow:none !important}img:not([draggable]),embed,object,video{max-width:100%;height:auto}a{-moz-transition:all 300ms ease-out 0s;-webkit-transition:all 300ms ease-out 0s;-ms-transition:all 300ms ease-out 0s;-o-transition:all 300ms ease-out 0s;transition:all 300ms ease-out 0s;text-decoration:none;cursor:pointer;color:#049ad3;font-family:var(--body-font)}a:hover,a:focus,a:visited{text-decoration:none}a:hover{color:var(--webex-primary-color);text-decoration:none}ul,ol{list-style:outside none none;margin:0;padding:0}img{border:none;max-width:100%}

.sppb-btn.active, .sppb-btn:active {
  background-image: inherit !important;
}

.sppb-btn.focus, 
 .sppb-btn:active:focus, 
 .sppb-btn:active:hover, 
 .sppb-btn:focus, 
 .sppb-btn:hover {
  outline: 0;
}

.sppb-btn.circle {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.sppb-btn.active, .sppb-btn:active {
  outline: 0;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}

.sppb-optin-form .sppb-btn i:first-child {display: none;}

form.sppb-optin-form.submit-button-inside .button-wrap {
	top: 50% !important;
	transform: translatey(-50%);
}

#sp-footer {
	font-size: inherit;
}

#sp-footer #sp-footer2 {
	text-align: inherit;
}

.sp-scroll-up {
	background: var(--maincolor);
}

.text-underline {
	text-decoration: underline;
}

.z-index2 {z-index: 2 !important;}
.z-index0 {z-index: 0 !important;}

.sppb-media-heading {
	margin: 0;
}

.sp-slider img {
	height: auto !important;
	width: auto !important;
}

.sppb-addon-clients .sppb-carousel-extended-item {
	padding: 0;
}

.sppb-addon-header > * {color: inherit !important;}

body .sppb-btn,
body .sppb-sp-slider-button .sp-slider-btn-text {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
line-height: 26px;
color: #ffffff;
padding: 14px 42px;
font-family: var(--body-font);
font-weight: 500;
overflow: hidden;
border-radius: 5px;
border: 1px solid transparent;
cursor: pointer;
letter-spacing: 0.5px;
z-index: 3;
}

body .sppb-btn:before,
body .sppb-sp-slider-button .sp-slider-btn-text:before {
content: "";
position: absolute;
height: 400px;
width: 430px;
top: 50%;
left: 50%;
background: var(--secondcolor);
border-radius: 50%;
transform: translateX(-30%) translateY(-40%) scale(0);
-moz-transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
z-index: -1;
}

body .sppb-btn.sppb-btn-primary,
body .sppb-sp-slider-button .sp-slider-btn-text {
background: var(--gradient-color2);
}

body .sppb-btn.sppb-btn-primary:before,
body .sppb-sp-slider-button .sp-slider-btn-text:before {
	background: var(--bg-white);
}

body .sppb-btn.sppb-btn-primary:hover,
body .sppb-sp-slider-button .sp-slider-btn-text:hover {
color: var(--maincolor);
}

body .sppb-btn:hover:before,
body .sppb-sp-slider-button .sp-slider-btn-text:hover:before {
	transform: translateX(-50%) translateY(-50%) scale(1);
}

body .sppb-btn.sppb-btn-secondary,
body .sppb-sp-slider-button.slider-btn2 .sp-slider-btn-text {
background: transparent;
border: 1px solid var(--maincolor2);
color: var(--maincolor2);
border-radius: 5px;
padding: 14px 42px;
}

body .sppb-btn.sppb-btn-secondary:before,
body .sppb-sp-slider-button.slider-btn2 .sp-slider-btn-text:before {
	background: var(--gradient-color1);
}

body .sppb-btn.sppb-btn-secondary:hover,
body .sppb-sp-slider-button.slider-btn2 .sp-slider-btn-text:hover {
border-color: var(--text-white);
color: var(--text-white);
}

body .sppb-btn.sppb-btn-default {
background: var(--thirdcolor);
}

body .sppb-btn.sppb-btn-default:hover {
background: var(--secondcolor);
}

.sppb-btn i,
.sppb-sp-slider-button .sp-slider-btn-text i {
	margin-left: 10px;
	font-size: 14px;
	font-weight: 600;
}

.full-width-image .sppb-addon-single-image-container {width: 100%; display: block;}
.full-width-image .sppb-addon-single-image-container img {width: 100%;}

.sppb-btn span {
    position: relative;
}

.sppb-progress {
	border-radius: 45px;
}

.sppb-addon-clients .sppb-carousel-extended-item img {
	margin: auto;
	text-align: center;
	display: block;
}

.f-weight-400 {
	font-weight: 400;
}


.sp-slider div[class^="sppb-col"] {position: static;}

.sppb-icon .sppb-icon-container > i {
	width: auto !important;
	height: auto !important;
	line-height: inherit !important;
}

.sppb-text-left.animated-number-position-bottom .sppb-addon-content, .sppb-text-left.animated-number-position-left .sppb-addon-content {
	align-items: center;
}

.sppb-carousel-extended-list .sppb-carousel-extended-outer-stage {
	height: auto !important;
}

body .sppb-addon-optin-forms {
	padding: 0px;
}

.sppb-addon-table-main td {
	color: inherit;
	font-size: inherit;
}

.com-finder .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
	display: flex;
	align-items: center;
}

.com-finder .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) span {
margin-right: 5px;	
}

.center-section > .sppb-container-inner > .sppb-row,
.center-section  > .sppb-row {
	justify-content: center;
}

.even-section > .sppb-container-inner > .sppb-row,
.even-section  > .sppb-row {
	justify-content: space-between !important;
}

#sp-main-body .sppb-section .sppb-container-inner, #sp-main-body .sppb-section div[class^="sppb-col-"], #sp-main-body .sppb-section .sppb-column, #sp-main-body .sppb-section .sppb-column-addons, #sp-main-body .sppb-section .sppb-row-container {position: static;}

.relative-section .sppb-container-inner, .relative-section div[class^="sppb-col-"], .relative-section .sppb-column, .relative-section .sppb-column-addons {position: static;}

.nowraprow > .sppb-container-inner > .sppb-row {flex-wrap: nowrap;}

#sp-top {
	position: relative;
	z-index: 999;
}

#sp-top > .row {
	-ms-flex-align: center !important;
	align-items: center !important;
}

#sp-top > .container > .container-inner > .row {
	-ms-flex-align: center !important;
	align-items: center !important;
}

#sp-header > .row {
	-ms-flex-align: center !important;
	align-items: center !important;
}

#sp-header > .container > .container-inner > .row {
	-ms-flex-align: center !important;
	align-items: center !important;
}

#sp-logo-section > .row {
	-ms-flex-align: center !important;
	align-items: center !important;
}

#sp-logo-section > .container > .container-inner > .row {
	-ms-flex-align: center !important;
	align-items: center !important;
}

#sp-footer, #sp-bottom {
	background: inherit;
}

.sppb-carousel-extended-description {
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}

.sppb-ajaxt-contact-form i {display: none;}

@media (max-width: 992px) {
  .sppb-addon-articles .sppb-col-sm-4 {
  -ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
  }
}

@media (max-width: 768px) {
  .sppb-addon-articles .sppb-col-sm-4 {
  -ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
  }
}

.width-auto .sppb-column-addons {width: auto;}

/* HEADER */ 

#sp-header {
height: auto;
background: transparent;
box-shadow: none;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}

#sp-header.header-sticky {
background: #fff;
animation: sticky 1s;
-webkit-transition: visibility 400ms ease, -webkit-transform 400ms ease;
transition: visibility 400ms ease, -webkit-transform 400ms ease;
transition: transform 400ms ease, visibility 400ms ease;
transition: transform 400ms ease, visibility 400ms ease, -webkit-transform 400ms ease;
-webkit-box-shadow: 0px 10px 60px 0px rgba(0,0,0,0.05);
box-shadow: 0px 10px 60px 0px rgba(0,0,0,0.05);
}

  @-webkit-keyframes sticky {
    0% {
      top: -100px; }
    100% {
      top: 0; } }
  @keyframes sticky {
    0% {
      top: -100px; }
    100% {
      top: 0; } }

#sp-header .logo {
	height: auto;
	padding: 24px 0;
}

#sp-header .logo img {
	max-width: 182px;
}

.sp-megamenu-parent {
float: none;
margin: 0;
text-align: center;
}	

.sp-megamenu-parent > li {text-align: left;}

.sp-megamenu-parent > li + li > a {
  margin-left: 35px;
}

@media (max-width: 1400px) {
.sp-megamenu-parent > li + li > a {
  margin-left: 32px;
}	
}

@media (max-width: 1200px) {
#sp-header .logo img {
  max-width: 130px;
}
.sp-megamenu-parent > li + li > a {
  margin-left: 14px;
}	
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  
color: #FFFFFF;
font-weight:1000;
/*
font-weight: var(--header2-nav-font-weight);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;

*/
display: block;
padding: 30px 0;
font-size: var(--header2-nav-font-size);
font-family: var(--header2-nav-font-family);
line-height: var(--body-font-line-height);

}

.sp-megamenu-parent > li.active > a:hover,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
color: var(--maincolor);
font-weight: var(--header2-nav-font-weight);
}


@media (min-width: 992px) and (max-width: 1400px) {
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent > li:last-child > a, .sp-megamenu-parent > li.active > a {
	padding: 28px 6px;
}

body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, body.ltr .sp-megamenu-parent > li.sp-has-child > span::after {
	display: none;
}

}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
padding: 0;
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.1);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge),
.sp-megamenu-parent .sp-mega-group > li > a {
padding: 7px 20px;
color: var(--header2-nav-child-color);
font-family: var(--header2-nav-font-family);
font-size: var(--header2-nav-child-font-size);
font-weight: var(--header2-nav--child-font-weight);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
display: block;
line-height: var(--body-font-line-height);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-mega-group > li > a:hover {
background-color: var(--maincolor);
color: var(--header2-nav-child-hover-color);
}

#offcanvas-toggler {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: 20px;
	position: relative;
	z-index: 22;
	height: auto;
}

.burger-icon > span {
	background-color: #1a2428;
}

#sp-header.header-sticky .burger-icon > span {
	background-color: #1a2428;
}

.offcanvas-active .burger-icon > span, #modal-menu-toggler.active .burger-icon > span {
	background-color: #fff;
}

.close-offcanvas {
	z-index: 99;
}

@media (max-width: 992px) {
.offcanvas-menu {
	background-color: var(--maincolor);
	color: #fff;
}
.offcanvas-menu .offcanvas-inner a {
	color: #fff;
}

.offcanvas-menu .offcanvas-inner a:hover, .offcanvas-menu .offcanvas-inner a:focus, .offcanvas-menu .offcanvas-inner a:active {
	color: #fff;
}

.offcanvas-menu .p-3 {
	padding: 0 !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li span,
.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler, .offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:focus {
	color: #fff;
}

.offcanvas-menu .logo {display: none;}

.offcanvas-menu .offcanvas-inner {
	padding: 50px 25px;
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > span {
	opacity: 1;
}
}

@media (min-width: 992px) {
.offcanvas-menu .offcanvas-inner {
	padding: 0;
}

.offcanvas-menu .offcanvas-inner > .d-flex {display: none !important;}

.offcanvas-menu .offcanvas-inner .sp-module:not(:last-child) {
	margin-bottom: 0px;
}

.burger-icon > span {
  margin: 4px 0;
  transition: .3s;
  float: right;
  width: 100%:
  -webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
	background-color: #1a2428;
}
.burger-icon {
	width: 35px;
	cursor: pointer;
}
.burger-icon > span:nth-child(1) {
	width: calc(100% - 5px);
	background: #1a2428;
	height: 2px;
}
.burger-icon > span:nth-child(2) {
	width: 100%;
	background: #1a2428;
	height: 2px;
}
.burger-icon > span:nth-child(3) {
	width: calc(100% - 8px);
	background: #1a2428;
	height: 2px;
}
.burger-icon:hover > span {width: 100%;}

#sp-header.header-sticky .burger-icon > span {
	background-color: #1a2428;
}

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
	float: right;
	margin-left: 0px;
}

#offcanvas-toggler {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translatey(-50%);
	display: inline-block;
	height: auto;
}

.offcanvas-menu {
	background-color: transparent;
}

.offcanvas-menu .p-3 {
	padding: 0 !important;
}

.offcanvas-menu .logo {display: none;}

.offcanvas-menu .menu {display: none !important;}

.offcanvas-active .burger-icon > span, #modal-menu-toggler.active .burger-icon > span {
	background-color: var(--maincolor);
}

body.ltr.offcanvs-position-right .offcanvas-menu {
	right: -400px;
}

body.rtl.offcanvs-position-right .offcanvas-menu {
	left: -400px;
}

.offcanvas-menu {
	width: 400px;
}
	
}


/* */

/* PAGE TITLE */

#sp-title {position: relative;}

#sp-title .sp-module {
	height: 100%;
	position: absolute;
	width: 100%;
}

#sp-title .sp-module .sp-module-content,
#sp-title .sp-module .sp-module-content .mod-sppagebuilder,
#sp-title .sp-module .sp-module-content .mod-sppagebuilder .page-content,
#sp-title .sp-module .sp-module-content .mod-sppagebuilder .page-content .sppb-section {height: 100%; position: static !important;}

.sp-page-title {
position: relative;
z-index: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
min-height: 460px;
position: relative;
padding: 115px 0;
text-align: center;
align-items: end;
display: flex;
}

.sp-page-title:before {
background: linear-gradient(19deg, #0a0a73, #0e021b);
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0.7;
z-index: 1;
}

.sp-page-title > .container {
position: relative;
z-index: 2;
}


.sp-page-title .sp-page-title-heading {
margin-bottom: 30px;
letter-spacing: 3px;
font-size: 46px;
font-weight: var(--h1-h2-font-weight);
line-height: 1.2;
}

@media (max-width: 992px) {
.sp-page-title .sp-page-title-heading {
font-size: 36px;
}
}

@media (max-width: 768px) {
.sp-page-title .sp-page-title-heading {
font-size: 28px;
}
}

.sp-page-title .breadcrumb {
justify-content: center;
margin: 0;
display: inline-flex;
background: var(--maincolor);
padding: 8px 40px;
border-radius: 0;
}

.sp-page-title .breadcrumb > li.float-start {display: none;}

.sp-page-title .breadcrumb > li > a {
font-size: 18px;
font-weight: 500;
text-transform: capitalize;
}

.breadcrumb-item + .breadcrumb-item {
	padding-left: 12px;
}

.breadcrumb-item + .breadcrumb-item::before {
	padding-right: 12px;
}

.sp-page-title .breadcrumb > span, .sp-page-title .breadcrumb > li, .sp-page-title .breadcrumb > li + li::before, .sp-page-title .breadcrumb > li > a {
font-size: 18px;
text-transform: capitalize;
}

.sp-page-title .breadcrumb > .active span {
font-size: 18px;
text-transform: capitalize;
color: #fff;
text-decoration: underline;
}

/* */

#sp-header.header-sticky ~ section#sp-main-body {
	padding-top: 0;
}
.com-content #sp-main-body,
.com-j2store #sp-main-body,
.com-tags #sp-main-body,
.com-spsimpleportfolio #sp-main-body,
.com-search #sp-main-body,
.com-finder #sp-main-body,
.com-hikashop #sp-main-body,
.com-users #sp-main-body  {
	padding: 110px 0 110px;
}

.com-hikashop #sp-main-body, .com-content #sp-main-body {padding-bottom: 80px;}

.com-spsimpleportfolio #sp-main-body {
	z-index: 2;
	position: relative;
}


.com-content #sp-header.header-sticky ~ section#sp-main-body,
.com-j2store #sp-header.header-sticky ~ section#sp-main-body,
.com-tags #sp-header.header-sticky ~ section#sp-main-body,
.com-spsimpleportfolio #sp-header.header-sticky ~ section#sp-main-body,
.com-search #sp-header.header-sticky ~ section#sp-main-body,
.com-finder #sp-header.header-sticky ~ section#sp-main-body,
.com-hikashop #sp-header.header-sticky ~ section#sp-main-body,
.com-users #sp-header.header-sticky ~ section#sp-main-body  {
	padding-top: 110px;
}


/* SIDEBAR */

.sidebar-class  .sppb-row-container {width: 100% !important; }
.sidebar-class.com-sppagebuilder #sp-main-body {margin: 0 auto;}
@media (min-width: 768px) {
.sidebar-class.com-sppagebuilder #sp-main-body {max-width: 750px;}
}
@media (min-width: 992px) {
.sidebar-class.com-sppagebuilder #sp-main-body {max-width: 970px;}
}
@media (min-width: 1200px) {
.sidebar-class.com-sppagebuilder #sp-main-body {max-width: 1170px;}
}

.com-sppagebuilder #sp-right, .com-sppagebuilder #sp-left {
	padding-top: 50px;
	padding-bottom: 130px;
	position: relative;
}

#sp-left .sp-module, #sp-right .sp-module {
	border: 0px solid #f3f3f3;
	padding: 0;
	border-radius: 0px;
}

#sp-left .sp-module ul > li, #sp-right .sp-module ul > li {
	display: block;
	border-bottom: 0px solid #f3f3f3;
}

.category-module li, .categories-module li, .archive-module li, .latestnews li, .newsflash-horiz li, .mostread li, .form-links li, .list-striped li {
	padding: 0;
}

/* */

/* CUSTOM CLASS */

.client-section::after {
	position: absolute;
	height: 0;
	width: 100%;
	bottom: 0;
	right: 0;
	border-style: solid;
	border-width: 0 275px 25px 0;
	border-color: transparent transparent var(--maincolor2) transparent;
	content: "";
	z-index: 1;
}
.text-gradient-color {
	background-clip: text;
	-o-background-clip: text;
	-ms-background-clip: text;
	-moz-background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-o-text-fill-color: transparent;
	-ms-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	background-image: var(--gradient-color1);
}

@media (min-width: 768px) {
.why-choose-us-section-style1::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 200px;
	background: #000000;
	left: -40px;
	top: 0;
	opacity: 0.1;
	transform: skew(20deg, 0);
	z-index: 1;
}
}

.text-gray {
	color: var(--text-gray) !important;
}

.call-to-action-call-to-action-inner::after {
	content: "";
	background-image: url(../images/wave2.png);
	background-size: cover;
	background-position: center left;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0.35;
	filter: brightness(1);
	animation: heartbeat 1.5s infinite alternate;
}

@media screen and (max-width: 425px) {
.section-title-big_text {
  font-size: 56px !important;
}
}

.get-a-quote-section::after {
	background: url(../images/7.jpg);
	content: "";
	height: 110%;
	width: 865px;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	clip-path: polygon(15% 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 15%);
}

/* */


/* BLOG */

.article-list .article {
	padding: 0;
	border: 0;
	position: relative;
	transition: all 0.3s ease-out;
}

.articles-leading .article {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background: transparent;
	box-shadow: none;
}

.article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery {
	margin: 0;
	border-bottom: 0px solid #f5f5f5;
	overflow: hidden;
	position: relative;
	display: block;
}

.articles-leading .article .article-intro-image, .articles-leading .article .article-featured-video, .articles-leading .article .article-featured-audio, .articles-leading .article .article-feature-gallery {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}

.article-list .article .article-intro-image:after, .article-list .article .article-featured-video:after, .article-list .article .article-featured-audio:after, .article-list .article .article-feature-gallery:after {
position: absolute;
background: linear-gradient(-60deg, #252531e3, #332304ed);
height: 100%;
width: 100%;
content: "";
left: 0;
bottom: 0;
opacity: 0.15;
-moz-transition: all 500ms ease-out 0s;
-webkit-transition: all 500ms ease-out 0s;
-ms-transition: all 500ms ease-out 0s;
-o-transition: all 500ms ease-out 0s;
transition: all 500ms ease-out 0s;
}

.article-list .article:hover .article-intro-image:after, .article-list .article:hover .article-featured-video:after, .article-list .article:hover .article-featured-audio:after, .article-list .article:hover .article-feature-gallery:after {
	opacity: 0.8;
}

.article-list .article .article-intro-image img, .article-list .article .article-featured-video img, .article-list .article .article-featured-audio img, .article-list .article .article-feature-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
-moz-transition: all 400ms ease-out 0s;
-webkit-transition: all 400ms ease-out 0s;
-ms-transition: all 400ms ease-out 0s;
-o-transition: all 400ms ease-out 0s;
transition: all 400ms ease-out 0s;
}

.articles-leading .article .article-intro-image img, .articles-leading .article .article-featured-video img, .articles-leading .article .article-featured-audio img, .articles-leading .article .article-feature-gallery img {
	width: auto;
	height: auto;
}

.article-list .article:hover .article-intro-image img, .article-list .article:hover .article-featured-video img, .article-list .article:hover .article-featured-audio img, .article-list .article:hover .article-feature-gallery img {
	transform: scale(1.1);
}

.article-intro-image > a {display: block; width: 100%;}

.article-body {
display: flex;
flex-direction: column;
	flex-flow: wrap;
padding: 45px 25px 30px 25px;
background: #ffffff;
border: 1px solid #eee;
margin-right: 40px;
margin-top: -50px;
position: relative;
}

.article-list .article .article-header {order: 1;}

.article-list .article .article-header h2 {
font-size: 22px;
line-height: 1.2;
margin-bottom: 30px;
font-weight: var(--h3-h4-font-weight);
color: var(--heading-font-color);
}

.article-list .article .article-header h2 a {
color: inherit;
transition: all 500ms ease;
display: block;

}

.article-list .article .article-header h2 a:hover {
color: var(--maincolor);
}

.article-introtext .post-author {
	display: flex;
	align-items: center;
}

.article-introtext .post-author .author-img {
  margin-right: 10px;
}

.article-introtext .post-author .author-img img {
  width: 48px;
  border: 2px solid var(--maincolor);
}

.article-list .article .article-info {
order: 3;
margin-bottom: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
justify-content: flex-end;
}

.article-info > span {
line-height: 1;
font-size: 16px;
margin-bottom: 0;
color: var(--theme-text-gray);
}

.article-info > span + span::before {
padding: 0;
margin: 0;
}

.article-info > span:before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	margin-right: 10px !important;
	font-weight: 400;
	font-family: "Font Awesome 5 Free";
background-clip: text;
-o-background-clip: text;
-ms-background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-o-text-fill-color: transparent;
-ms-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
background-image: var(--gradient-color1);
}

.article-info > span.createdby:before {content: "\f2bd";}
.article-info > span.published:before {content: "\f073";}

.article .article-info > span.category-name {
position: absolute;
top: -18px;
left: 30px;
background: var(--gradient-color2);
color: #fff;
padding: 5px 18px;
font-size: 14px;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
text-align: center;
z-index: 1;
line-height: var(--body-font-line-height);
}

.article .article-info > span.category-name > a {color: inherit;}

.article .article-info > span.category-name:before, .article .article-info > span.category-name i {display: none;}

.article-introtext {
	order: 2;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}

.article-introtext p {margin: 0;}

.article-list .article .readmore a {
font-weight: 600;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
text-transform: capitalize;
color: #666666;
line-height: 30px;
font-size: 16px;
}

.article-list .article .readmore a:hover {color: var(--secondcolor);}

ul.pagination {
	display: flex;
justify-content: space-between;
margin-top: 30px;
padding: 25px 30px 25px;
}

.page-item:first-child .page-link {
	margin-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.page-item:last-child .page-link {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.page-link {
	padding: 0;
color: #565151;
font-weight: 500;
height: 54px;
width: 54px;
line-height: 54px !important;
display: inline-block;
border: 1px solid #ddd;
position: relative;
border-radius: 50% !important;
margin-right: 15px;
text-align: center;
}

.page-item.active .page-link,
.page-link:hover {
border-color: transparent;
background-color: var(--maincolor);
color: #fff;
}

.page-item.active .page-link,
.page-link:hover {
border-color: transparent;
background-color: var(--maincolor);
color: #fff !important;
}

.pagination-counter {margin-top: 40px;}

/* SINGLE ARTICLE */

.article-details .sppb-row-container {padding: 0; max-width: 100%;}

.article-details {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-flow: wrap;
}

.article-details > * {
	order: 4;
	width: 100%;
}

.article-details .article-header {
	order: 2;
}

.article-details .article-info {
	margin-bottom: 28px;
	order: 3;
}

.article-details .article-info > span a {
	color: var(--theme-text-gray);
}

.article-details .article-info > span.category-name:before {
  content: "\f07b";
}

.article-details .article-info > span + span {margin-left: 20px;}

.article-details .article-can-edit {
	position: relative;
	margin-bottom: 0px;
}

.article-details .article-header h1, .article-details .article-header h2 {
font-size: 26px;
line-height: 1.2;
font-weight: var(--h3-h4-font-weight);
color: var(--heading-font-color);
margin-bottom: 25px;
}

.article-details .article-full-image {
position: relative;
display: block;
overflow: hidden;
	order: 1;
}

.article-details .article-full-image img {
	display: inline-block;
	border-radius: 0;
	width: 100%;
}


.article-details .article-ratings-social-share {
	border-top: 0;
	margin-top: 0;
	padding: 0;
	border-top: 0;
	border-bottom: 0;
	margin: 0;
  align-items: center;
  order: 5;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
margin: 45px 0 38px !important;
border-top: 2px solid #eee;
padding: 40px 0px 45px;
border-bottom: 1px solid #eeee;
}

.tags {
	list-style: none;
	padding: 0;
	margin: 0 !important;
	border: none;
	justify-content: center;
display: block;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
margin: 45px 0 38px !important;
border-top: 2px solid #eee;
padding: 40px 0px 45px;
border-bottom: 1px solid #eeee;
}

@media (max-width: 768px) {
.tags, .article-details .article-ratings-social-share {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
display: block !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.article-social-share {
	float: none;
}
}

.tags:before {
color: var(--heading-font-color);
margin: 0;
font-weight: var(--h5-h6-font-weight);
font-size: 20px;
line-height: 1.2;
margin-bottom: 15px;
display: block;
font-family: var(--heading-font);
content: "Popular Tags";
}

.tags > li {
	margin: 0;
}

.tags > li a {
padding: 6px 12px;
background: var(--bg-silver);
font-size: 14px;
color: var(--body-font-color);
border-radius: 0;
display: inline-block;
border: none;
}

.tags > li a:hover {
background: var(--maincolor);
color: #fff;
}

.tags > li + li {margin-left: 5px;}

.article-social-share .social-share-icon:before {
color: var(--heading-font-color);
margin: 0;
font-weight: var(--h5-h6-font-weight);
font-size: 20px;
line-height: 1.2;
margin-bottom: 15px;
display: block;
font-family: var(--heading-font);
content: "Share Projects";
}

.article-social-share .social-share-icon ul {
	display: inline-block;
}

.article-social-share .social-share-icon ul li a {
display: block;
line-height: 1;
font-size: 18px;
border: 0;
width: auto;
height: auto;
border-radius: 50px;
transition: .4s all;
text-align: left;
color: var(--maincolor);
}

.article-social-share .social-share-icon ul li a:hover {
color: var(--maincolor);
}

.article-social-share .social-share-icon ul li:not(:last-child) {
	margin-right: 20px;
}

.article-details .article-author-information {
padding: 0;
margin-bottom: 0;
text-align: left;
border: 0;
margin: 0;
border: 2px solid #f3f3f3;
padding: 38px 38px 38px;
margin-top: 50px;
margin-bottom: 50px;
}

.article-details .article-author-information > .d-flex {
gap: 40px;
align-items: center;
}

.article-details .article-author-information > .d-flex .flex-shrink-0 img {
border-radius: 100%;
}

.article-details .article-author-information h5 {
font-size: 36px;
text-transform: uppercase;
line-height: 1;
margin-bottom: 15px;
}

.article-details .article-author-information .author-bio {
margin-bottom: .5rem !important;
}

.author-website {color: inherit; margin-left: 4px;}

.author-website a,
.author-website a:hover {color: var(--maincolor);}

#article-comments {
	border-top: 0px solid #f5f5f5;
	padding: 0px;
	margin-top: 0px;
  order: 7;
  width: 100%;
  background: var(--bg-silver);
padding: 30px 30px;
}


.article-details ul.pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 0px;
	padding: 0;
}

.article-details .page-link,
.article-details .page-link:hover {
	background: transparent;
	padding: 0;
	border: none;
	margin-right: 0;
	font-weight: 600;
	color: var(--maincolor) !important;
}

.article-details .pagenavigation {
	order: 6;
margin-bottom: 40px;
width: 100%;
}

.article-details .pagenavigation .pagination {
	justify-content: space-between;
}

.article-details .pagenavigation .btn {
 background: var(--maincolor);
color: #fff;
border: none; 
}

/* */


@media (min-width: 320px) {#sp-top1 .sppb-container-inner {max-width: 400px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 576px) {#sp-top1 .sppb-container-inner {max-width: 540px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 768px) {#sp-top1 .sppb-container-inner {max-width: 720px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 992px) {#sp-top1 .sppb-container-inner {max-width: 960px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {#sp-top1 .sppb-container-inner {max-width: 1140px;width: 100%;
margin-right: auto;
margin-left: auto;}}

@media (min-width: 320px) {#sp-top2 .sppb-container-inner {max-width: 400px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 576px) {#sp-top2 .sppb-container-inner {max-width: 540px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 768px) {#sp-top2 .sppb-container-inner {max-width: 720px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 992px) {#sp-top2 .sppb-container-inner {max-width: 960px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {#sp-top2 .sppb-container-inner {max-width: 1140px;width: 100%;
margin-right: auto;
margin-left: auto;}}

@media (min-width: 320px) {#sp-bottom1  .sppb-container-inner {max-width: 400px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 576px) {#sp-bottom1  .sppb-container-inner {max-width: 540px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 768px) {#sp-bottom1  .sppb-container-inner {max-width: 720px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 992px) {#sp-bottom1 .sppb-container-inner {max-width: 960px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {#sp-bottom1  .sppb-container-inner {max-width: 1140px;width: 100%;
margin-right: auto;
margin-left: auto;}}


@media (min-width: 320px) {#sp-banner  .sppb-container-inner {max-width: 400px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}
@media (min-width: 576px) {#sp-banner  .sppb-container-inner {max-width: 540px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}
@media (min-width: 768px) {#sp-banner  .sppb-container-inner {max-width: 720px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}
@media (min-width: 992px) {#sp-banner .sppb-container-inner {max-width: 960px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {#sp-banner  .sppb-container-inner {max-width: 1140px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 320px) {#sp-footer  .sppb-container-inner {max-width: 400px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 576px) {#sp-footer  .sppb-container-inner {max-width: 540px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 768px) {#sp-footer  .sppb-container-inner {max-width: 720px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 992px) {#sp-footer .sppb-container-inner {max-width: 960px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {#sp-footer  .sppb-container-inner {max-width: 1140px;width: 100%;
margin-right: auto;
margin-left: auto;}}


@media (min-width: 320px) {.contained-row  .sppb-container-inner {max-width: 400px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}
@media (min-width: 576px) {.contained-row  .sppb-container-inner {max-width: 540px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 768px) {.contained-row  .sppb-container-inner {max-width: 720px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 992px) {.contained-row .sppb-container-inner {max-width: 960px;width: 100%;
margin-right: auto;
margin-left: auto;}}
@media (min-width: 1200px) {.contained-row  .sppb-container-inner {max-width: 1140px;width: 100%;
margin-right: auto;
margin-left: auto;}}

.row > *,
.sppb-row > * {
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
}

/* J4 Optimization */

.sp-megamenu-wrapper, #sp-header > .container > .container-inner > .row > div:not(#sp-logo) > .sp-column,
#sp-header > .row > div:not(#sp-logo) > .sp-column  {display: block !important;}

#sp-header .sp-module {
	margin-left: 0px !important; 
}

@media (min-width: 1400px) {#sp-banner  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-bottom1  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-top1  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-top2  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-position4  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {#sp-footer  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {.contained-row  .sppb-container-inner {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {.contained-section {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

@media (min-width: 1400px) {.sp-slider .sppb-container {max-width: 1320px;width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;}}

:root{
	--maincolor-rgb: 59,56,235;
	--maincolor2: #6600d3;
	--maincolor2-rgb: 102,0,211;
	--maincolor3: #15ebae;
	--maincolor3-rgb: 21,235,174;
	--maincolor4: #fd4a18;
	--maincolor4-rgb: 253,74,24;
	--maincolor5: #eb9e01;
	--maincolor5-rgb: 235,158,1;
	--maincolor6: #da0212;
	--maincolor6-rgb: 218,2,18;
	--maincolor7: #e42032;
	--maincolor7-rgb: 228,32,50;
	--secondcolor: #0d1525;
	--secondcolor-rgb: 13,21,37;
	--secondcolor2: #353666;
	--secondcolor2-rgb: 13,21,37;
	--theme-text-gray: #a5a5a5;
	--link-color: #006cff;
	--text-white: #ffffff;
	--text-black: #303031;
	--text-gray: #d7d9f2;
	--text-blue: #447bde;
	--text-light-gray: #a7a8b4;
	--text-silver: #f1f3f8;
	--text-silver-light: #f0efff;
	--text-gray-light: #cccccc;
	--text-dark-light: #808093;
	--bg-white: #ffffff;
	--bg-light-pink: #faf3f3;
	--bg-silver: #f1f3f8;
	--bg-silver-light: #e7e3f0;
	--bg-silver-light2: #f0f1f7;
	--bg-silver-deep: #ecdaee;
	--bg-gray: #f7f7f7;
	--bg-dark-color: #0b0c26;
	--bg-blue-color: #571bcd;
	--gradient-color1: linear-gradient(45deg, var(--maincolor) 0%, var(--maincolor2) 100%);
	--gradient-color2: linear-gradient(45deg, var(--maincolor2) 0%, var(--maincolor) 100%);
	--gradient-color3: linear-gradient(45deg, var(--maincolor5) 0%, var(--maincolor6) 100%);
	--gradient-color4: linear-gradient(45deg, var(--maincolor6) 0%, var(--maincolor5) 100%);
	--gradient-section-overlay: linear-gradient(90deg, var(--maincolor2) 10%, var(--maincolor) 100%);--heading-font: "Mulish", sans-serif;
	--body-font2: "Roboto", sans-serif;
    --body-font: "Sarabun", sans-serif;
	--secondary-font1: "Allison", cursive;
	--heading-font-color: #232323;
	--h1-h2-font-weight: 900;
	--h3-h4-font-weight: 800;
	--h5-h6-font-weight: 800;
	--body-font-color: #515264;
	--body-font-size: 1rem;
	--body-font-weight: 400;
	--body-font-line-height: 1.8rem;
	--header1-nav-color: #fff;
	--header1-nav-hover-color: var(--maincolor3);--header1-nav-font-family: var(--heading-font);
	--header1-nav-font-size: 16px;
	--header1-nav-font-weight: 800;
	--header1-nav-child-color: var(--heading-font-color);--header1-nav-child-hover-color: #fff;
	--header1-nav-child-font-size: 15px;
	--header1-nav--child-font-weight: 700;
	--header2-nav-color: var(--heading-font-color);
	--header2-nav-hover-color: var(--maincolor);--header2-nav-font-family: var(--body-font);
	--header2-nav-font-size: 16px;
	--header2-nav-font-weight: 800;
	--header2-nav-child-color: var(--heading-font-color);--header2-nav-child-hover-color: #fff;
	--header2-nav-child-font-size: 15px;
	--header2-nav--child-font-weight: 700;
	--header3-nav-color: var(--heading-font-color);
	--header3-nav-hover-color: var(--maincolor);--header2-nav-font-family: var(--body-font);
	--header3-nav-font-size: 16px;
	--header3-nav-font-weight: 800;
	--header3-nav-child-color: var(--heading-font-color);--header3-nav-child-hover-color: #fff;
	--header3-nav-child-font-size: 15px;
	--header3-nav--child-font-weight: 700;
	--sub-title-font-size: 18px;
	--sub-title-font-weight: 700;
	--sub-title-letter-spacing: 0.02rem;
	--box-shadow: 6px 6px 25px 0px rgba(0, 0, 0, 0.08);
	--text-categories: #b5b5b5;
	--footer-text-color: #bbb7c2;
	--widget-content-bg-color: #fbf6f3;
	--widget-content-bg-text-color: var(--heading-font-color);
}

/* Joomla/Sp Page Builder 5 Optimization */

#sp-main-body .sppb-section .sppb-row-container .sppb-row .sppb-row-column,
#sp-footer .sppb-section .sppb-row-container .sppb-row .sppb-row-column {
  position: static;
}
#sp-header .sppb-section > .sppb-row-container {padding: 0;}

.sppb-addon-title {
	display: inherit;
}

.sppb-img-container {
  display: block;
}

#sp-header .logo img {
    position: absolute;
    width: 415px;
    margin-top: 10px;
}

img.logo-image {
    width: 410px;
  /*  height:60px; */
    margin-top: 16px;
}

.sp-megamenu-parent > li.active > a:hover, .sp-megamenu-parent > li:hover > a, .sp-megamenu-parent > li.active > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a, .sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
    color: var(--maincolor);
    font-weight: normal;
}
#sppb-addon-1678328084935 .sppb-addon-title {
    font-family: var(--sarabun);
}
.sp-page-title .sp-page-title-heading {
    font-family: var(--noto);
}
.sp-page-title .breadcrumb,.sp-page-title .breadcrumb > li > a {
    font-family: var(--noto);
}
.sp-page-title {
    min-height: 300px;
}
#sppb-addon-1678152024668 .topbar-info {
    font-family: 'Mitr', ms sans serif;
}
#sppb-addon-1678152024668 .topbar-info li i {
    margin-right: 5px !important;
}

/* box */
#navmain .item.active .submenu,.submenu.active {
    opacity: 1;
    visibility: visible;
    display: block
}

#home .contentlink .WebLink .item.box-right-mobile,.submenu .submenu-inner ul li:last-child,footer#sp-footer {
    padding-bottom: 0
}

#home .container--news .announce .card .item:last-child .announce-line,.highlight-news .sppb-addon-article div,.sp-page-title h2 {
    display: none
}

.sppb-article-info-wrap h3 a,.text-cover,.text-ellipsis,.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

body {
    color: #333;
    background-color: #fcfcfc!important
}

.highlight-news .sppb-addon-article .sppb-article-img-wrap .sppb-img-responsive {
    margin: 0 auto;
    width: 350px;
    height: 350px
}

#offcanvas-toggler>span,.highlight-news .sppb-article-info-wrap h3 a {
    color: #fff
}

.box-content.cletter .sppb-btn-default.sppb-btn-3d,.box-content.news .sppb-btn-default.sppb-btn-3d,.box-content.show_regulations.publish .sppb-btn-default.sppb-btn-3d {
    float: right;
    margin-top: -335px;
    z-index: 30000;
    border: none;
    color: #c94d25;
    background-color: #fff
}

.blogbrochures .entry-header h2 {
    font-size: 18px;
    font-family: Prompt;
    text-align: center
}

.blogbrochures .entry-image .img_caption .caption {
    width: 190px;
    height: 271px
}

.pagination-wrapper .pagination li:first-child:not(.active) a,.pagination-wrapper .pagination li:last-child:not(.active) a {
    width: auto;
    height: auto;
    border-radius: 0;
    font-size: 16px;
    font-family: Sarabun;
    color: #0f5499
}

.entry-header h2 a {
    font-family: Sarabun;
    font-weight: 400;
    font-size: 70%
}

.entry-image img {
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    transform: scale(1) rotate(0);
    border: 1px solid #eee;
    border-radius: 25px
}

.article-info>dd,.article-info>dd a {
    color: #a94442
}

.sp-module.visitor {
    margin-top: -25px
}

#histats_counter_4131,.tb-interest-rate tbody tr td:last-child {
    text-align: right
}

#sp-footer1,.tb-interest-rate tbody tr td:first-child {
    text-align: left
}

#searchForm .element-invisible,.form-inline .btn-group,.form-inline label,.form-search .btn-group,.form-search label {
    display: table-column
}

.mod-sppoll .btn.btn-primary {
    padding: 6px 12px
}

.result-text {
    color: #607d8b
}

.blog>.items-row>.col-sm-6 article.item .blog-content-wrap {
    padding: 0 20px 20px 0
}

.sp-module.rss {
    margin-left: 7px!important;
    margin-top: 3px!important
}

.items-row.row-0.row.clearfix {
    margin-bottom: 25px
}

.pink-color {
    color: #f05283!important
}

.blue-color {
    color: #28387b!important
}

.sp-page-title .breadcrumb {
    margin: 5px 0
}

#sp-logo-wrapper {
    color: #fff;
    padding: 10px;
    background-color: #28387b
}

#sp-main-body {
    padding: 25px 0
}

.sp-page-title {
    background-color: #eee;
    padding: 15px 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover
}

.box-content .table thead~tbody tr:nth-of-type(odd),.submenu {
    background: #f3f3f3
}

img.sp-default-logo.hidden-xs {
    width: 494px;
    height: 73px;
    max-width: none
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item span,.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
    font-size: 10pt
}

#sp-bottom {
    background-color: #28387b!important;
    padding: 20px 0!important
}

#sp-footer1 {
    font-size: 12pt;
    font-weight: 400
}

#sp-bottom .sp-module ul li a {
    color: #d8d8d8;
    text-transform: initial;
    font-family: Prompt;
    line-height: 14px
}

#sp-bottom .sp-module .nav>li>a:focus,.nav>li>a:hover {
    text-decoration: none;
    background-color: #009688
}

#sp-bottom .sp-module ul li a:hover {
    color: #5ca4d9;
    text-transform: initial
}

#sp-bottom .sp-module .sp-module-title {
    font-family: Sarabun;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: normal;
    color: #f5f5f5;
    border-bottom: 2px solid #c9950a;
    margin: 0 0 15px;
    float: left;
    clear: right
}

.sp-page-title .breadcrumb>.active {
    color: #843534
}

.sp-page-title .breadcrumb>li,.sp-page-title .breadcrumb>li+li:before,.sp-page-title .breadcrumb>li>a,.sp-page-title .breadcrumb>span {
    color: #0e4f90
}

.sp-page-title h2 {
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1;
    color: #0f5499;
    font-weight: 600
}

h3.sppb-addon-title.sppb-feature-box-title {
    margin-top: 20px!important;
    margin-bottom: 20px!important
}

span.sp-copyright {
    font-size: 80%
}

footer#sp-footer {
    padding-top: 5px
}

#sp-top2 .sp-column,.box-content.interest-rate .see-all {
    float: right
}

#sp-cookie-consent {
    background-color: #607d8b;
    color: #fff
}

#contact-form-section .homepage-feature .sppb-addon-text,#contact-form-section .homepage-feature .sppb-addon-text h4 a {
    font-size: 14px;
    color: #333
}

#contact-form-section .sppb-addon-feature.homepage-feature .sppb-feature-box-title a {
    color: #d72570
}

.homepage-feature:hover {
    transition: .5s;
    transform: scale(1.2)
}

.homepage-feature {
    padding: 40px!important;
    min-height: 250px;
    border-radius: 5px;
    box-shadow: 0 5px 5px 0 rgba(64,24,157,.15);
    margin-bottom: 30px;
    text-align: center;
    transition: .5s;
    border: 1px solid #40189d80
}

.sppb-addon-ajax-contact .sppb-ajax-contact-content .sppb-ajaxt-contact-form button {
    float: right;
    margin-top: -120px
}

#sppb-addon-1634617443845 #btn-1634617443845.sppb-btn-primary {
    letter-spacing: 0;
    margin-top: -120px
}

select.sppb-form-control:not([size]):not([multiple]) {
    height: auto
}

.ks-top-nav .submenu--content {
    height: 65px;
    position: absolute;
    width: 100%;
    left: 0;
    display: flex;
    z-index: -1;
    background: #fff;
    box-shadow: 0 1px 6px 0 rgba(90,90,90,.2)
}

.navbottom {
    width: 1170px;
    margin: 0 auto;
    min-height: 65px;
    line-height: 65px
}

.ks-top-nav .submenu--content .group .item {
    flex: 0 0 auto;
    cursor: pointer;
    margin: 0;
    font-family: Krungsri-Condensed-Medium;
    color: #5a5a5a;
    text-decoration: none;
    outline: 0;
    position: initial;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    bottom: 0;
    top: 0;
    padding: 0
}

.submenu {
    width: 100%;
    padding: 40px 0;
    border-top: 1px solid #eee;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    line-height: 1.5;
    position: absolute;
    left: 0;
    top: 65px;
    z-index: 9999;
    filter: Alpha(opacity=0);
    opacity: 0;
    visibility: hidden
}

.submenu .submenu--container {
    max-width: 1170px;
    margin: 0 auto
}

.line-top-none,.none-line-top,.submenu .heading {
    margin-bottom: 10px
}

#navmain .item.active .submenu {
    filter: Alpha(opacity=100%)
}

.ks-top-nav .submenu--content .group .item hr {
    display: none;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 3px solid #ffd400;
    width: 100%
}

.ks-top-nav .submenu--content .group .item.active hr,.ks-top-nav .submenu--content .group .item:hover hr {
    position: initial;
    display: block;
    bottom: -15px
}

.submenu .heading {
    font-size: 16px;
    line-height: 30px;
    color: #545454;
    font-family: Krungsri-Condensed-Bold
}

.submenu .submenu-inner ul {
    padding: 0;
    list-style-type: none;
    margin-bottom: 0
}

.submenu .submenu-inner ul li {
    color: #545454;
    font-family: Thongterm-Roman;
    font-size: 14px;
    line-height: 26px;
    font-weight: 400;
    padding-bottom: 8px
}

.submenu .submenu-inner ul li a {
    color: #545454
}

.submenu .submenu-inner ul li:hover {
    font-family: Thongterm-Bold
}

.menu--bars div.btn.btn-primary.btn-xs {
    font-family: Krungsri-Condensed-Bold;
    font-weight: 400
}

.ks-top-nav .menu--content .menu--logo img {
    height: 111px;
    width: auto
}

.ks-top-nav .submenu--content .group.active {
    display: flex;
    padding-left: 100px
}

.submenu .submenu--container .submenu-inner {
    padding-left: 117px!important
}

@media screen and (max-width: 1199px) {
    .ks-top-nav .menu--content .menu--logo img {
        height:48px
    }
}

@media screen and (max-width: 767px) {
    .hwc-pdpa #cookieSettingModal .modal-content {
        max-height:none;
        background-color: #fff
    }
}

#home .container--promotion,#home .contentlink {
    max-width: 1170px;
    margin: auto
}

#home .container--promotion .item {
    padding-bottom: 30px
}

#home .container--promotion .item.box-photo img {
    transition: .3s ease-in-out
}

#home .container--promotion .item.box-photo:hover img {
    transform: scale(1.05)
}

#home .container--promotion .item .hover-img {
    overflow: hidden;
    position: relative
}

#home .container--promotion .item.box-photo:hover .bg {
    background: #000;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    opacity: .2
}

#home .container--promotion .button-promotion-mobile a {
    text-align: center;
    border: 1px solid #e8e8e8;
    padding: 7px 20px;
    font-size: 16px;
    font-family: Krungsri-Condensed-Bold;
    line-height: 30px;
    color: #554242;
    width: 270px;
    margin: 16px auto 0;
    height: 44px
}

#home .container--news .announce .card,.contentlink .ProductLink .item .inner,.contentlink .WebLink .item .inner,.contentlink .WebLink .item .inner-mobile {
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
}

#home contentlink .ProductLink .item,.contentlink .WebLink .item {
    padding-bottom: 8px
}

.contentlink .ProductLink .item .inner {
    display: inline-block;
    padding: 32px 24px;
    color: #5a5a5a
}

.contentlink .ProductLink .item .inner .left,.contentlink .WebLink .item .inner .left {
    float: left;
    width: calc(100% - 30px)
}

.box-content.product .inner-box .left .detail h3,.contentlink .ProductLink .item .inner .left h3,.contentlink .WebLink .item .inner .left .detail h3 {
    margin-bottom: 3px
}

#home.contentlink .ProductLink .item .inner .right,.contentlink .WebLink .item .inner .right {
    float: left;
    width: 16px;
    text-align: right;
    margin-left: 14px
}

.contentlink .ProductLink .item .inner .right span,.contentlink .WebLink .item .inner .right i {
    color: #5e4b4b
}

.contentlink .WebLink .item .inner {
    display: inline-block;
    padding: 33px 24px
}

.box-content.product .inner-box .left .img,.contentlink .WebLink .item .inner .left .img {
    float: left;
    margin-right: 16px
}

.contentlink .WebLink .item .inner .left .detail {
    width: calc(100% - -35px)
}

.contentlink .WebLink .item .inner-mobile {
    display: inline-block;
    padding: 35px;
    width: 140px;
    height: 135px;
    margin-top: 20px
}

#categorylist_header_date,#categorylist_header_hits,#home .contentlink .WebLink .item.box-right-mobile .title-mobile,.list-date,.list-hits,.text-credit-mobile {
    text-align: center
}

#home .contentlink .Currency .inner .btn {
    height: 44px;
    padding-top: 9px!important;
    padding-bottom: 8px!important
}

#home #lblERC_Operation_B,#home #lblERC_Operation_S {
    font-size: 16px;
    line-height: 27px;
    color: #554242;
    font-family: Krungsri-Condensed-Bold
}

#home .container--news .announce .card {
    border: 0;
    padding-bottom: 46px
}

#home .container--news .announce .card h3 {
    margin-bottom: 32px
}

#home .container--news .announce .card .item .announce-title {
    color: #222;
    font-family: Krungsri-Condensed-Medium;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 26px
}

#home .container--news .announce .card .item .announce-date {
    color: #949494;
    font-family: Thongterm-Roman;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 26px
}

#home .container--news .announce .card .item .announce-line {
    border-bottom: 1px solid #e8e8e8;
    margin: 24px 0;
    width: 100%
}

#home .container--news .news .card {
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    border: 0;
    padding: 24px 24px 34px
}

#home .container--news .news .card h3 {
    margin-bottom: 16px
}

#home .container--banner .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 52px!important
}

.line-top {
    height: 4px;
    width: 60px;
    background-color: #0f5499;
    margin-bottom: 8px
}

.block-credit,.block-credit-mobile,.box-content-1 {
    background-color: #fff
}

.container--contentInterest {
    max-width: 1170px;
    margin: auto;
    margin-top: -53px!important;
    margin-bottom: 40px!important
}

.desktop-credit {
    border-radius: 3px;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
}

.box-content,.box-content-1,.box-shadow {
    box-shadow: 1px 2px 20px 0 rgb(35 19 18 / 5%)
}

.block-credit {
    z-index: 99;
    display: inline-block;
    padding: 24px 55px 10px;
    cursor: pointer
}

.block-credit:last-child,.box-content-1:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.block-content .sppb-addon-content .content1,.box-content .content1 div,.box-content-1 .content1 div,.text-content-interest {
    font-size: 20px;
    line-height: 30px;
    font-family: Mitr,sans-serif;
    color: #303030;
    padding-bottom: 11px;
    width: calc(100% - 79px);
    float: left
}

.arrow-right,img.icon-credit {
    float: right;
    position: relative
}

.interest-text {
    clear: both
}

.text-interest {
    font-size: 18px;
    line-height: 30px;
    font-family: 'Noto Sans Thai';
    font-weight: 500;
    color: #5a5a5a
}

.text-percent {
    font-size: 32px;
    line-height: 48px;
    font-family: Kanit,sans-serif;
    color: #f05283
}

img.icon-credit {
    width: 56px;
    height: auto
}

.arrow-right {
    bottom: 32px;
    right: 5px
}

.block-credit-mobile {
    display: inline-block;
    padding: 20px 35px;
    border-radius: 3px;
    width: 212px;
    height: auto;
    border: 1px solid #d8d5d580
}

.block-credit:first-child,.box-content-1:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.box-content-1:first-child,.box-line {
    border-right: 1px solid #e5e5e5
}

.owl-carousel .owl-item img.icon-credit-mobile {
    display: block;
    width: 66px;
    margin: 10px 35px;
    float: none
}

.owl-carousel {
    margin: 0 auto
}

@media (max-width: 767px) {
    #home .container--news .announce .card h3,#home .container--news .news .card h3 {
        margin-bottom:11px
    }

    #home .container--promotion .item {
        padding-bottom: 8px
    }

    #home .container--promotion .item:nth-child(odd) {
        padding-right: 4.5px
    }

    #home .container--promotion .item:nth-child(2n) {
        padding-left: 4.5px
    }

    #home .container--news .announce .card,#home .container--news .news .card {
        padding: 16px
    }

    #home .contentlink .Currency .inner {
        padding: 16px 8px
    }

    #home.contentlink .Currency .form-control {
        height: 42px
    }

    #home .contentlink .WebLink .title-mobile h3 {
        margin-bottom: 0
    }

    #home.contentlink .Currency .inner .money .ExchangeValue1 {
        padding-right: 10px
    }

    #home.contentlink .Currency .inner .money .ExchangeValue2 {
        padding-left: 10px
    }

    #home .container--banner .owl-dots {
        bottom: 0!important
    }

    .block-credit-mobile {
        padding: 16px;
        min-width: 215px
    }

    .container--contentInterest {
        margin-right: -15px;
        margin-top: 16px!important
    }

    .zonebtn {
        margin-top: 24px
    }

    .moblie-line {
        border-bottom: 1px solid #e8e8e8;
        margin-bottom: 16px;
        width: 100%
    }

    .text-content-interest {
        width: 100%
    }

    .contentlink .Currency {
        margin-bottom: 40px
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .block-credit {
        padding:24px 24px 10px
    }

    .text-content-interest {
        font-size: 18px;
        line-height: 28px
    }

    .text-percent {
        font-size: 30px;
        line-height: 46px
    }
}

@media screen and (max-width: 991px) and (min-width:768px) {
    .block-credit {
        padding:24px 24px 10px
    }

    img.icon-credit {
        width: 40px
    }

    .text-content-interest {
        font-size: 14px;
        line-height: 24px;
        width: calc(100% - 50px)
    }

    .text-interest {
        font-size: 14px;
        line-height: 28px
    }

    .text-percent {
        font-size: 24px;
        line-height: 40px
    }
}

.block-content,.box-content,.box-content-1 {
    padding: 24px 55px
}

.hwcCustomization .table-responsive {
    margin-bottom: 10.5px!important
}

#sp-top-bar {
    color: #2f4f4f!important;
    padding: 0
}

.ProductLink .item h3 {
    color: #222;
    font-family: Mitr,sans-serif;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
    margin-bottom: 0
}

.block-content .sppb-addon-content .content1 img {
    float: right;
    position: relative;
    margin-top: -55px
}

#column-wrap-id-1641752360956,#highlight .sppb-row-container .sppb-row .sppb-col-md-4 {
    padding-right: 0;
    padding-left: 0
}

.box-content .content1,.box-content-1 .content1 {
    font-size: 20px;
    line-height: 30px;
    font-family: Mitr,sans-serif;
    color: #303030;
    padding-bottom: 11px;
    width: 100%;
    float: left
}

.box-content .content1 img,.box-content-1 .content1 img {
    float: right;
    position: relative;
    margin-top: -35px;
    margin-right: -20px
}

.box-content .content2,.box-content-1 .content2 {
    width: 100%;
    float: left;
    font-size: 18px;
    line-height: 30px;
    font-family: 'Noto Sans Thai';
    font-weight: 500;
    color: #7e7911;
}

.box-content .content3,.box-content-1 .content3 {
    font-size: 32px;
    line-height: 48px;
    font-family: Kanit,sans-serif;
    color: #0616fc;
    transition: transform .2s;
    font-weight: 500;
}

.box-content-1 .content3:hover {
    transform: scale(1.1);
}

.box-content .content3 span,.box-content-1 .content3 span {
    position: relative;
    color: #0f5499;
    margin-top: 45px;
    font-size: 18px;
    margin-right: -15px
}

.show_regulations h3 a {
    color: #222;
    font-family: Sarabun,sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 26px;
    font-weight: 500
}

.show_regulations .sppb-addon-article {
    margin-bottom: 0
}

.box-content.show_regulations {
    padding: 24px
}

.box-content.show_regulations span.sppb-meta-date {
    float: right;
    position: relative;
    margin-top: -30px;
    color: #d72570;
    font-family: 'Noto Sans Thai',sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 26px
}

.box-content.show_regulations .sppb-col-sm-12 {
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
    padding-bottom: 15px
}

.box-content.show_regulations .sppb-col-sm-12:last-child {
    border-bottom: 0 solid #e8e8e8;
    width: 100%;
    padding-bottom: 15px
}

.box-content.show_regulations .sppb-btn-default.sppb-btn-3d {
    border: none;
    color: #c94d25;
    background-color: #fff
}

.box-content.show_regulations .sppb-article-introtext {
    color: #5a5a5a;
    font-family: Sarabun,sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 30px;
    font-weight: 400
}

.product-header {
    float: left;
    clear: both;
    width: 100%;
    font-family: Kanit,sans-serif;
    color: #28387b
}

.page-header,.see-all-right {
    font-family: Sarabun,sans-serif
}

.see-all-right {
    float: right;
    color: #832d48;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

.outstanding-activity .product-header {
    background-color: #e9e9e9;
    padding: 10px;
    font-size: 20px;
    font-weight: 500
}

#sp-bottom1 .sp-module-content {
    font-size: small;
    font-family: 'Noto Sans Thai';
    color: #d8d8d8
}

#sp-bottom .sp-module ul li {
    border: 0;
    clear: both
}

.custom.identity-address {
    text-align: justify;
    width: 90%
}

#home .contentlink .ProductLink .item .inner,.contentlink .inner-box {
    display: inline-block;
    background-color: #fff;
    padding: 32px 24px;
    border-radius: 3px;
    box-shadow: 1px 2px 20px 0 rgb(35 19 18 / 5%);
    color: #5a5a5a
}

.box-content.product {
    padding: 32px 24px
}

.box-content.product .inner-box div.left h3 {
    color: #222;
    font-family: Mitr,sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
    margin-bottom: 3px;
    margin-top: 3px
}

.box-content.product .inner-box div.left div {
    color: #575757;
    font-family: Kanit;
    text-transform: capitalize;
    font-weight: 400
}

.box-content.product .inner-box .right {
    float: right;
    width: 16px;
    text-align: right;
    margin-left: 14px
}

.box-content.product .inner-box .left {
    width: calc(100% - 30px)
}

.box-content.product .inner-box .right span.arrow-right {
    color: #0f5499;
    bottom: 50px
}

.box-content.interest-rate {
    padding: 24px;
    margin-bottom: 16px
}

.tb-interest-rate thead tr th {
    border-top: 0;
    border-bottom: 0;
    font-family: Kanit;
    font-size: 16px;
    font-weight: 500;
    color: #eee;
    line-height: 29px
}

.tb-interest-rate tbody tr td {
    border-top: 0;
    border-bottom: 0;
    font-family: Sarabun;
    font-size: 14px;
    color: #525252;
    line-height: 29px
}

.box-content.interest-rate .header {
    float: left
}

.box-content.interest-rate .row {
    margin-bottom: 6px
}

.box-content.interest-rate .header .text-truncate {
    margin-top: 0;
    color: #222;
    font-family: Mitr,sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
    margin-bottom: 3px
}

.custom.identity-address.text-center {
    margin-left: 60px
}

.table tbody tr td.list-title a {
    font-family: Sarabun;
    font-weight: 400;
    color: #222;
    font-size: 90%
}

.table tbody tr td.list-date {
    font-family: Sarabun;
    font-weight: 400;
    color: #006057
}

#sp-component {
    min-height: 550px!important
}

.input-mini {
    width: 80px;
    font-size: 90%
}

.pagination>li>a,.pagination>li>span {
    color: #222
}

table.category {
    width: 100%;
    margin-top: 10px
}

.pagination {
    display: block;
    padding-left: 0;
    margin: 10px 0;
    border-radius: 4px;
    font-size: 90%;
    color: #222
}

.page-header {
    padding-bottom: 15px;
    font-size: 100%;
    font-weight: 500
}

table.category thead>tr {
    background-color: #f5f5f5
}

.badge.badge-info {
    background-color: #337ab7
}

.blog-details-content-wrap .entry-header h2 {
    text-transform: uppercase;
    color: #a94442;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 400
}

.sppb-addon-article .sppb-article-img-wrap .sppb-img-responsive {
    display: block;
    width: 120px;
    height: 150px;
    border: 1px solid #40303022
}

.sppb-article-info-wrap h3 a {
    font-size: medium;
    font-family: Prompt;
    font-weight: 300;
    display: inline-block;
    max-width: 100%;
    width: 80%
}

.accordion-service .sppb-panel-modern>.sppb-panel-heading {
    background: rgb(0 0 0 / 4%)
}

.accordion-service .sppb-panel .sppb-panel-heading .sppb-panel-title {
    font-size: 95%
}

.accordion-service .sppb-addon-content ol li p,.accordion-service .sppb-addon-content p {
    color: #222;
    font-size: 90%;
    font-weight: 400
}

table.category tbody>tr,table.category thead>tr {
    border: 1px solid #ddd
}

.personnel img {
    display: inline-block;
    max-width: 100%;
    height: auto
}

.offcanvas-text {
    display: inline-flex;
    width: 300px;
    margin-top: 19px;
    position: absolute;
    margin-left: 40px;
    color: #fff
}

.box-content-1 span.arrow-right:hover,.box-content.product.left span.arrow-right:hover,.box-content.product.right span.arrow-right:hover {
    color: #e94c1ad9;
    font-size: x-large
}

#column-wrap-id-1641752360955 {
    padding-right: 1px;
    padding-left: 0
}

#column-wrap-id-1641752360957 {
    padding-right: 0;
    padding-left: 1px
}

#column-wrap-id-1641752360957 .box-content-1.box-art {
    border-right: none
}

.box-content-1.box-art.form-download {
    width: 380px;
    height: 189px;
    background-color: #ccc;
    background-image: url(images/homepage/boxes/istockphoto-1299656624-612x612.jpg)
}

.box-content-1.box-art .sppb-addon-content a .content3 {
    font-size: x-large
}

.box-content-1.box-art .sppb-addon-content a p {
    margin-top: 10px;
    font-family: Mitr;
    font-size: 20px
}

h3.sppb-title-heading {
    font-family: Kanit;
    font-size: 40px;
    line-height: 67px;
    font-weight: 400
}

.sppb-addon-title .sppb-addon-content p,div.sppb-section-title p.sppb-title-subheading {
    color: #5c5d60)!important;
    font-size: 18px!important;
    font-family: Sarabun,sans-serif!important
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-moz-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
    #sp-logo-wrapper .sp-retina-logo {
        display:block;
        max-width: none
    }
}

@media (min-width: 360px) and (max-width:640px) {
    .custom.identity-address {
        text-align:justify;
        float: left
    }

    .custom.identity-address p img {
        margin-left: 0!important
    }

    #sp-bottom2,#sp-bottom3 {
        margin-left: auto;
        margin-right: auto
    }
}

@media (min-width: 576px) and (max-width:768px) {
    .custom.identity-address {
        text-align:justify;
        float: left
    }

    .custom.identity-address p img {
        margin-left: 30px!important
    }

    #sp-bottom2,#sp-bottom3 {
        margin-left: auto;
        margin-right: auto
    }
}

@media (min-width: 768px) and (max-width:1024px) {
    .custom.identity-address p img {
        margin-left:40px!important
    }
}

@media (min-width: 1024px) and (max-width:1366px) {
    .custom.identity-address p img {
        margin-left:40px!important
    }
}

@media (max-width: 768px) {
    #sp-bottom2,#sp-bottom3 {
        margin-left:auto;
        margin-right: auto
    }

    #sp-top1 {
        display: none
    }

    #sp-top2 {
        text-align: center
    }
}

@media (min-width: 992px) {
    #sp-bottom2 {
        margin-left:60px;
        margin-right: -60px
    }

    #sp-bottom3 {
        margin-left: 40px;
        margin-right: -40px
    }
}

@media (min-width: 1200px) {
    #sp-bottom2 {
        margin-left:60px;
        margin-right: -60px
    }

    #sp-bottom3 {
        margin-left: 40px;
        margin-right: -40px
    }
}

@media (min-width: 1400px) {
    #sp-bottom2 {
        margin-left:60px;
        margin-right: -60px
    }

    #sp-bottom3 {
        margin-left: 40px;
        margin-right: -40px
    }
}

#sp-top1,#sp-top2 {
    margin-top: 5px
}

.offcanvas-menu {
    background-color: #1E3A8A;
}

@media only screen and (max-width : 320px) {
    .box-content.show_regulations span.sppb-meta-date {
        float:none
    }
}

@media only screen and (max-width : 480px) {
    .box-content.show_regulations span.sppb-meta-date {
        float:none
    }
}

.sp-module-content .mod-languages ul.lang-inline li {
    margin: 0 15px 0 0 !important;
}

.top-social p a {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.box-content.product .inner-box div.left div.text-cover.header {
    color: #222222;
    font-family: 'Mitr', sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
}

#sp-bottom .sp-module ul li {
    border: 0;
    clear: both;
    margin-bottom: 10px;
}

.tb-interest-rate thead tr th {
    border-top: 0;
    border-bottom: 0;
    font-family: Kanit;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 29px;
}

#sp-cookie-consent {
    background-color: #0f5499 !important;
    color: #fff;
}

.box-content.interest-rate .header .text-truncate.header {
    margin-top: 0;
    color: #222;
    font-family: Mitr,sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
    margin-bottom: 3px;
}

.box-content.product .inner-box div.left div.header {
    color: #222;
    font-family: Mitr,sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
    margin-bottom: 3px;
    margin-top: 3px;
}

.box-content.show_regulations h1.sppb-addon-title {
    margin-top: 0px;
    color: #28387B;
    font-weight: 400;
    font-size: 24px;
}
/*end box*/
#hilight-news .hilight-news img {
    height: 350px;
    /* width: 350px; */
}

/* custom template for new design */
.sp-page-builder .page-content #section-id-1678152024666 {
    background: #e3e7f1 !important;
    color: #0B1220 !important;
    border-bottom: 1px solid rgba(15,23,42,.08);
    font-size: 14px;
}
#sppb-addon-1678152024668 {
    color: #0B1220;
    border-radius: 0px;
}
header {
    background: linear-gradient(180deg, var(--header-surface), var(--header-surface-2));
    color: var(--text);
    border-bottom: 1px solid rgba(15,23,42,.10);
}
#sp-section-2 {
  background: linear-gradient(180deg, var(--header-surface), var(--header-surface-2));
    color: var(--text);
    border-bottom: 1px solid rgba(15, 23, 42, .10);
    backdrop-filter: saturate(120%) blur(10px);
}
.hero-ref {
    position: relative;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--hero-image);
    background-size: cover;
    background-position: center;
    min-height: 320px;
    display: flex;
    align-items: center;
}

 /* new design & custom design */
  :root{
  --primary:#1E3A8A;
  --primary-2:#1E2F5C;
  --secondary:#5A6E6E;
  --accent:#A0961E;

  --header-gold:#A0961E;
  --header-gold-soft: rgba(160,150,30,.22);

  --topbar:#0E1A33;
  --footer-1:#0E1A33;
  --footer-2:#0A1226;
  --hero-a: rgba(30,58,138,.22);
  --hero-b: rgba(160,150,30,.14);

  --bg:#F3F5F9;
  --bg-2:#FFFFFF;
  --text:#0B1220;
  --muted:#3F4B4B;
  --line:#E1E5EE;

  --shadow: 0 14px 30px rgba(0,0,0,.16);
  --shadow-sm: 0 7px 18px rgba(0,0,0,.14);

  --container: 1200px;
}

html[data-theme="corporate"]{
  --primary:#0B1530;
  --primary-2:#1E3A8A;
  --secondary:#5A6E6E;
  --accent:#A0961E;

  --header-gold:#A0961E;
  --header-gold-soft: rgba(160,150,30,.26);

  --topbar:#0B1530;
  --footer-1:#0B1530;
  --footer-2:#070E1D;
  --hero-a: rgba(11,21,48,.28);
  --hero-b: rgba(160,150,30,.16);

  --bg:#F3F5F9;
  --bg-2:#FFFFFF;
  --text:#0B1220;
  --muted:#3F4B4B;
  --line:#E1E5EE;
}
*{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: "Sarabun","TH Sarabun New",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.6;
    }
    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
    .muted{ color:var(--muted); }
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); border:0;
    }
    .divider{ height:1px; background:var(--line); }

    /* Topbar */
    .topbar{ background: var(--topbar); color:#eaf3fb; font-size:14px; }
    .topbar .wrap{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; gap:12px; }
    .topbar .left, .topbar .right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(255,255,255,.06);
      backdrop-filter: blur(8px);
      white-space:nowrap;
    }

    /* Buttons */
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      border-radius:10px;
      padding:11px 16px;
      font-weight:600;
      border:1px solid transparent;
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
      user-select:none;
      min-height:44px;
      text-decoration:none !important;
      white-space:nowrap;
    }
    .btn:active{ transform: translateY(1px); }
    .btn-primary{
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 78%, color-mix(in srgb, var(--primary-2) 75%, white) 135%);
      color:#fff;
      box-shadow: 0 10px 22px rgba(11,60,93,.18);
    }
    .btn-primary:hover{ background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, black) 0%, var(--primary-2) 78%, color-mix(in srgb, var(--primary-2) 75%, white) 135%); }
    .btn-secondary{ background: var(--secondary); color:#fff; box-shadow: 0 10px 18px rgba(30,127,92,.14); }
    .btn-secondary:hover{ background:#196a4d; }
    .btn-ghost{ background: transparent; color:#fff; border-color: rgba(255,255,255,.35); }
    .btn-ghost:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); }
    .btn-outline{ background: transparent; color: var(--primary); border-color: rgba(11,60,93,.25); }
    .btn-outline:hover{ background: var(--primary-soft); border-color: rgba(11,60,93,.35); }
    .btn-line{ background: #06C755; color:#04210f; font-weight:900; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 10px 18px rgba(6,199,85,.18); }
    .btn-line:hover{ background:#05b14c; }

    /* Header */
    header{
      position:sticky; top:0; z-index:50;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(229,231,235,.7);
    }
    .header-wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:16px; }
    .brand{ display:flex; align-items:center; gap:12px; min-width: 260px; }
    /*
    .logo{
      width:44px; height:44px; border-radius:12px;
      background: radial-gradient(circle at 30% 30%, #1f6fb2 0%, #0b3c5d 55%, #082a42 100%);
      box-shadow: var(--shadow-sm);
      position:relative; overflow:hidden;
    }
    .logo:after{ content:""; position:absolute; inset:-20px; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0)); transform: rotate(20deg); }
    .brand .title{ display:flex; flex-direction:column; line-height:1.2; }
    .brand .title strong{ font-size:16px; }
    .brand .title span{ font-size:13px; color:var(--muted); }
*/
    nav ul{ margin:0; padding:0; list-style:none; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    nav a{ display:inline-flex; padding:10px 10px; border-radius:10px; font-weight:600; color:#0f172a; text-decoration:none !important; transition: background .15s ease, color .15s ease; white-space:nowrap; }
    nav a:hover{ background: var(--primary-soft); color: var(--primary); }

    .header-actions{ display:flex; align-items:center; gap:10px; justify-content:flex-end; min-width: 240px; }

    .hamburger{
      display:none;
      border:1px solid rgba(11,60,93,.2);
      border-radius:12px;
      background:#fff;
      width:44px; height:44px;
      align-items:center; justify-content:center;
      cursor:pointer;
    }
    .hamburger span{ width:18px; height:2px; background: var(--primary); position:relative; }
    .hamburger span:before,.hamburger span:after{ content:""; position:absolute; left:0; width:18px; height:2px; background: var(--primary); }
    .hamburger span:before{ top:-6px; }
    .hamburger span:after{ top:6px; }

    .mobile-menu{ display:none; border-top:1px solid var(--line); padding:10px 0 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); }
    .mobile-menu a{ display:flex; padding:12px 10px; border-radius:12px; font-weight:600; }
    .mobile-menu a:hover{ background: var(--primary-soft); }

    /* Hero */
    .hero{
      position:relative;
      background:
        radial-gradient(1200px 600px at 20% 0%, var(--hero-a), rgba(255,255,255,0) 60%),
        radial-gradient(900px 500px at 80% 10%, var(--hero-b), rgba(255,255,255,0) 55%),
        linear-gradient(180deg, #ffffff 0%, #f6fbff 35%, #ffffff 100%);
      padding: 22px 0 28px;
    }
    .hero-grid{ display:grid; grid-template-columns: 1.35fr .65fr; gap: 24px; align-items:stretch; }
    .hero-card{ border-radius: 18px; overflow:hidden; box-shadow: var(--shadow); background: var(--primary); color:#fff; min-height: 420px; position:relative; }
    .hero-slide{
      position:absolute; inset:0;
      display:flex; flex-direction:column; justify-content:flex-end;
      padding: 28px;
      background:
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.75) 100%),
        radial-gradient(900px 600px at 20% 10%, rgba(31,111,178,.60), rgba(11,60,93,0) 60%),
        linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 70%, var(--primary-2)) 55%, var(--primary-2) 115%);
    }
    .hero-slide h1{ margin:0 0 8px 0; font-size: 34px; line-height:1.25; letter-spacing:.2px; }
    .hero-slide p{ margin:0 0 16px 0; color: rgba(255,255,255,.9); max-width: 60ch; }
    .hero-dots{ position:absolute; top:18px; left:18px; display:flex; gap:8px; }
    .dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.25); cursor:pointer; }
    .dot.active{ background: #fff; }

    .hero-side{ display:flex; flex-direction:column; gap:16px; min-height: 420px; }
    .panel{ background:#fff; border:1px solid rgba(229,231,235,.9); border-radius: 18px; box-shadow: var(--shadow-sm); padding:16px; }
    .panel h3{ margin:0 0 10px 0; font-size:18px; }
    .panel .sub{ margin:0 0 12px 0; color:var(--muted); font-size:14px; }

    .search{ display:flex; gap:10px; align-items:center; }
    .input{
      flex:1;
      height:44px;
      padding: 0 12px;
      border:1px solid rgba(11,60,93,.22);
      border-radius: 12px;
      outline:none;
      font-size:16px;
      background:#fff;
      transition: box-shadow .15s ease, border-color .15s ease;
    }
    .input:focus{ border-color: rgba(31,111,178,.75); box-shadow: 0 0 0 4px rgba(31,111,178,.14); }

    .login-cta{ display:grid; grid-template-columns: 1fr; gap:10px; }

    /* Notice strip */
    .notice-strip{
      margin-top: 18px;
      background: var(--primary-soft);
      border: 1px solid rgba(31,111,178,.18);
      border-left: 6px solid var(--accent);
      border-radius: 14px;
      padding: 12px 14px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .notice-strip .left{ display:flex; gap:12px; align-items:flex-start; }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding: 6px 10px;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(11,60,93,.14);
      font-weight:700;
      font-size:13px;
      color: var(--primary);
      white-space:nowrap;
    }
    .notice-strip .title{ font-weight:700; margin: 0; }
    .notice-strip .meta{ margin:2px 0 0 0; color: var(--muted); font-size: 14px; }

    /* Sections */
   /*  section{ padding: 26px 0; } */
    .section-head{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom: 14px; }
    .section-head h2{ margin:0; font-size: 26px; line-height:1.2; letter-spacing:.2px; color:#0f172a; }

    /* Quick */
    .quick{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .quick a{
      background:#fff;
      border:1px solid rgba(229,231,235,.95);
      border-radius: 16px;
      padding: 16px;
      display:flex;
      align-items:center;
      gap:14px;
      box-shadow: 0 10px 18px rgba(17,24,39,.06);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      text-decoration:none !important;
      min-height:72px;
    }
    .quick a:hover{ transform: translateY(-2px); border-color: rgba(31,111,178,.28); box-shadow: 0 18px 28px rgba(11,60,93,.10); }
    .qicon{ width:44px; height:44px; border-radius: 14px; background: linear-gradient(135deg, rgba(31,111,178,.18), rgba(11,60,93,.05)); border:1px solid rgba(31,111,178,.16); display:grid; place-items:center; color: var(--primary); flex:0 0 auto; }
    .qtext strong{ display:block; font-size:16px; }
    .qtext span{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }

    /* Split + cards */
    .split{ display:grid; grid-template-columns: 1.6fr .9fr; gap: 20px; align-items:start; }
    .card{ background:#fff; border:1px solid rgba(229,231,235,.95); border-radius: 18px; box-shadow: var(--shadow-sm); overflow:hidden; }
    .card .card-body{ padding: 16px; }
    .card .card-title{ margin: 0 0 10px 0; font-size: 18px; font-weight: 800; color:#0f172a; }

    .list{ display:flex; flex-direction:column; gap: 10px; }
    .item{ display:flex; gap:12px; padding: 12px 12px; border:1px solid rgba(229,231,235,.9); border-radius: 14px; background: #fff; transition: background .15s ease, border-color .15s ease; }
    .item:hover{ background: #f8fbff; border-color: rgba(31,111,178,.22); }
    .item .tag{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 12px; white-space:nowrap; border:1px solid rgba(31,111,178,.18); height: fit-content; }
    .item .content{ flex:1; }
    .item .content .t{ font-weight: 700; margin: 0; line-height: 1.35; }
    .item .content .m{ margin: 4px 0 0 0; font-size: 13px; color: var(--muted); display:flex; gap:10px; flex-wrap:wrap; }

    .news-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .news{ border-radius: 18px; overflow:hidden; border: 1px solid rgba(229,231,235,.95); background:#fff; box-shadow: var(--shadow-sm); text-decoration:none !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
    .news:hover{ transform: translateY(-2px); border-color: rgba(31,111,178,.24); box-shadow: 0 18px 28px rgba(11,60,93,.10); }
    .news .thumb{ height: 160px; background: radial-gradient(700px 220px at 20% 10%, rgba(31,111,178,.40), rgba(255,255,255,0) 55%), linear-gradient(135deg, #0b3c5d 0%, #1f6fb2 65%, #6bb6ff 140%); }
    .news .body{ padding: 14px 14px 16px; }
    .news .body h4{ margin:0 0 6px 0; font-size: 18px; line-height:1.35; }
    .news .body p{ margin:0 0 10px 0; color:var(--muted); font-size:14px; }
    .news .meta{ font-size: 13px; color: var(--muted); }

    .rates{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items:stretch; }
    table{ width:100%; border-collapse: collapse; overflow:hidden; border-radius: 14px; border:1px solid rgba(229,231,235,.95); }
    thead th{ background: var(--primary-soft); color: var(--primary); text-align:left; padding: 12px; font-weight: 900; font-size: 14px; border-bottom: 1px solid rgba(229,231,235,.95); }
    tbody td{ padding: 12px; border-bottom: 1px solid rgba(229,231,235,.8); font-size: 14px; }
    tbody tr:hover{ background: #f8fbff; }
    tbody tr:last-child td{ border-bottom:none; }

    .kpi{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .kpi .k{ background:#fff; border:1px solid rgba(229,231,235,.95); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 16px; }
    .k .num{ font-weight: 900; font-size: 30px; color: var(--primary); letter-spacing: .3px; }
    .k .lbl{ color: var(--muted); font-weight: 700; margin-top: 4px; }
    .k .hint{ margin-top: 10px; font-size: 13px; color: var(--muted); }

    .contact{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items:stretch; }
    .map-embed{ position: relative; width: 100%; min-height: 260px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(229,231,235,.95); box-shadow: var(--shadow-sm); background: #fff; }
    .map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

    /* Footer */
    .footer{ background: linear-gradient(180deg, var(--footer-1) 0%, var(--footer-2) 100%); color:#eaf3fb; margin-top: 32px; }
    .footer .footer-main{ padding: 38px 0 28px; }

    .footer-topline{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); flex-wrap:wrap; }

    .footer-brand{ display:flex; align-items:center; gap:12px; min-width: 280px; }
    .footer-logo-real{
      width:52px; height:52px;
      border-radius: 14px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.18);
      display:grid; place-items:center;
      overflow:hidden;
      box-shadow: 0 10px 18px rgba(0,0,0,.18);
      flex: 0 0 auto;
    }
    .footer-logo-real img{ width:100%; height:100%; object-fit:contain; padding:6px; }
    .footer-brand .name{ display:flex; flex-direction:column; line-height:1.2; }
    .footer-brand .name strong{ color:#fff; font-size: 16px; font-weight:800; }
    .footer-brand .name span{ color: rgba(234,243,251,.82); font-size: 13px; margin-top: 2px; }

    .footer-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
    .footer-actions .btn-outline{ color:#fff; border-color:rgba(255,255,255,.28); background:transparent; }
    .footer-actions .btn-outline:hover{ background: rgba(255,255,255,.10); }

    /* 5 columns */
    .footer-grid{ display:grid; grid-template-columns: 1.35fr 1fr 1fr 1.15fr 1.15fr; gap: 22px; }

    .footer h5{ margin:0 0 14px 0; font-size: 16px; font-weight: 700; color:#ffffff; }
    .footer p{ margin:0 0 8px 0; font-size:14px; color: rgba(234,243,251,.85); }
    .footer a{ color: rgba(234,243,251,.9); font-size:14px; text-decoration:none; }
    .footer a:hover{ color:#ffffff; text-decoration:underline; }
    .footer-links{ display:flex; flex-direction:column; gap:8px; }
    .footer-contact span{ display:block; margin-bottom:6px; font-size:14px; color: rgba(234,243,251,.85); }
    .footer-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
    .footer-badge{ border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 12px; font-size:13px; white-space:nowrap; color: rgba(255,255,255,.92); }

    .footer-box{
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      border-radius: 18px;
      padding: 14px;
      box-shadow: 0 10px 18px rgba(0,0,0,.14);
    }
    .footer-box .label{ font-weight: 900; color:#fff; margin: 0 0 6px 0; font-size: 14px; }
    .footer-box .hint{ font-size: 13px; color: rgba(234,243,251,.82); margin: 0 0 10px 0; }

    .mini-list{ display:grid; gap:10px; }
    .mini-item{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      border-radius: 14px;
      padding: 10px 10px;
    }
    .mini-item .t{ margin:0; font-weight: 800; color:#fff; line-height:1.35; font-size: 13.5px; }
    .mini-item .m{ margin:4px 0 0 0; color: rgba(234,243,251,.78); font-size: 12.5px; }

    .qr{
      width:88px; height:88px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.18);
      background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 2px, transparent 2px 10px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 10px);
      display:grid; place-items:center;
      color: rgba(255,255,255,.85);
      font-weight: 900;
      font-size: 12px;
      text-align:center;
      padding: 6px;
      flex: 0 0 auto;
    }
    .line-row{ display:flex; gap:12px; align-items:center; }
    .line-row .t{ margin:0; font-weight:900; color:#fff; }
    .line-row .m{ margin:4px 0 0 0; color: rgba(234,243,251,.82); font-size: 13px; }

    .footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding:14px 0; font-size:13px; color: rgba(234,243,251,.8); }
    .footer-bottom .bottom-wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
    .footer-bottom a{ font-size:13px; margin-right:12px; }

    /* Responsive */
    @media (max-width: 1024px){
      .container{ padding: 0 18px; }
      .hero-grid{ grid-template-columns: 1fr; }
      .hero-card{ min-height: 380px; }
      .hero-side{ min-height:auto; }
      .split{ grid-template-columns: 1fr; }
      .rates{ grid-template-columns: 1fr; }
      .kpi{ grid-template-columns: repeat(2, 1fr); }
      .contact{ grid-template-columns: 1fr; }
      .footer-grid{ grid-template-columns: 1fr 1fr; }
      .header-actions{ min-width:auto; }
    }
    @media (max-width: 860px){
      nav{ display:none; }
      .hamburger{ display:inline-flex; }
      .header-actions .btn-outline{ display:none; }
      .topbar .right{ gap:10px; }
      .quick{ grid-template-columns: repeat(2, 1fr); }
      .news-grid{ grid-template-columns: 1fr; }
      .hero-slide h1{ font-size: 28px; }
    }
    @media (max-width: 480px){
      .topbar .left{ display:none; }
      .btn{ padding: 10px 14px; }
      .hero-card{ min-height: 340px; }
      .hero-slide{ padding: 18px; }
      .hero-slide p{ font-size: 14px; }
      .kpi{ grid-template-columns: 1fr; }
      .footer-grid{ grid-template-columns: 1fr; }
      .footer-topline{ align-items:flex-start; }
      .footer-actions{ justify-content:flex-start; }
    }
}


    /* Fallback if color-mix is unsupported */
    @supports not (color: color-mix(in srgb, black 50%, white)){
      .hero-slide{
        background:
          linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.75) 100%),
          radial-gradient(900px 600px at 20% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
          linear-gradient(135deg, var(--primary) 0%, var(--primary) 55%, var(--primary-2) 115%);
      }
    }


    @supports not (color: color-mix(in srgb, black 50%, white)){
      .btn-primary{ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 80%, var(--primary-2) 120%); }
      .btn-primary:hover{ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 80%, var(--primary-2) 120%); }
    }


    /* ===== Krungthai-like (ultra) styling layer ===== */
    /* Header becomes solid corporate blue with white nav (bank-like) */
    header{
      background: color-mix(in srgb, var(--primary) 92%, black);
      border-bottom: 1px solid rgba(255,255,255,.10);
      backdrop-filter: none;
    }
    .brand .title strong{ color:#fff; }
    .brand .title span{ color: rgba(255,255,255,.78); }
    nav a{ color: rgba(255,255,255,.92); }
    nav a:hover{
      background: rgba(255,255,255,.12);
      color:#fff;
      text-decoration:none !important;
    }
    .hamburger{
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.22);
    }
    .hamburger span,
    .hamburger span:before,
    .hamburger span:after{ background: #fff; }

    /* Topbar slightly darker + tighter */
    .topbar{
      background: var(--topbar);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    .pill{
      border-color: rgba(255,255,255,.20);
      background: rgba(255,255,255,.08);
    }

    /* Buttons: more bank-like pill/rounded */
    .btn{ border-radius: 999px; letter-spacing:.1px; }
    .btn-outline{ border-width: 1.5px; }
    .btn-outline:hover{ background: rgba(255,255,255,.14); }
    header .btn-outline{
      color:#fff;
      border-color: rgba(255,255,255,.28);
      background: rgba(255,255,255,.06);
    }
    header .btn-outline:hover{
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.34);
    }

    /* Hero: add wave/diagonal glow like bank sites */
    .hero{
      padding-top: 16px;
      background:
        radial-gradient(1200px 600px at 18% 0%, var(--hero-a), rgba(255,255,255,0) 62%),
        radial-gradient(900px 520px at 85% 8%, var(--hero-b), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 60%, white) 0%, #ffffff 45%, #ffffff 100%);
      position:relative;
      overflow:hidden;
    }
    .hero:before{
      content:"";
      position:absolute;
      left:-10%;
      right:-10%;
      top:-140px;
      height: 340px;
      background: linear-gradient(135deg,
        rgba(0,0,0,0) 0%,
        rgba(255,255,255,.10) 28%,
        rgba(255,255,255,0) 60%);
      transform: rotate(-6deg);
      pointer-events:none;
      opacity:.9;
    }
    .hero:after{
      content:"";
      position:absolute;
      left:-25%;
      right:-25%;
      bottom:-220px;
      height: 420px;
      background: radial-gradient(closest-side at 50% 40%, rgba(0,91,203,.18), rgba(255,255,255,0) 70%);
      filter: blur(8px);
      pointer-events:none;
    }

    /* Hero card more glossy */
    .hero-card{
      border-radius: 22px;
      box-shadow: 0 22px 60px rgba(0,45,114,.18);
      border: 1px solid rgba(255,255,255,.10);
    }
    .hero-dots .dot{
      width: 11px; height: 11px;
      background: rgba(255,255,255,.28);
      border-color: rgba(255,255,255,.22);
    }
    .hero-dots .dot.active{ background:#fff; }
    .hero-slide h1{ font-size: 36px; }
    .panel{
      border-radius: 22px;
      border-color: rgba(0,45,114,.10);
    }

    /* Section titles: underline accent bar (bank-like) */
    .section-head h2{
      position:relative;
      padding-bottom: 8px;
    }
    .section-head h2:after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width:64px;
      height:4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--secondary), var(--primary-2));
      opacity:.95;
    }

    /* Cards: slightly larger rounding + border */
    .card{
      border-radius: 22px;
      border-color: rgba(0,45,114,.10);
      box-shadow: 0 14px 34px rgba(0,45,114,.10);
    }
    .item{
      border-radius: 16px;
      border-color: rgba(0,45,114,.10);
    }
    .news{
      border-radius: 22px;
      border-color: rgba(0,45,114,.10);
    }
    .news .thumb{
      height: 170px;
      background:
        radial-gradient(800px 260px at 20% 5%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, black) 0%, var(--primary-2) 60%, color-mix(in srgb, var(--primary-2) 65%, white) 140%);
    }

    /* Quick actions: icon chip closer to bank style */
    .qicon{
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(0,91,203,.18), rgba(0,45,114,.06));
      border-color: rgba(0,91,203,.18);
    }

    /* Footer: more corporate depth */
    .footer{
      background: linear-gradient(180deg, var(--footer-1) 0%, var(--footer-2) 100%);
    }
    .footer-topline{
      border-bottom-color: rgba(255,255,255,.14);
    }
    .footer-box{
      border-color: rgba(255,255,255,.18);
      background: rgba(255,255,255,.07);
    }
    .mini-item{
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
    }

    /* Mobile menu matches header */
    .mobile-menu{
      background: color-mix(in srgb, var(--primary) 92%, black);
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .mobile-menu a{
      color: rgba(255,255,255,.92);
    }
    .mobile-menu a:hover{
      background: rgba(255,255,255,.12);
    }

    /* Graceful fallback if color-mix not supported */
    @supports not (color: color-mix(in srgb, black 50%, white)){
      header{ background: var(--primary); }
      .hero:before{ opacity:.7; }
      .news .thumb{ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 70%); }
    }


    /* ===== Bank-like typography scale ===== */
    body{ letter-spacing: .1px; }
    .brand .title strong{ font-size: 16.5px; }
    .section-head h2{ font-size: 28px; }
    .hero-slide h1{ font-size: 40px; letter-spacing: .2px; }

    /* ===== Mega menu (desktop) ===== */
    .nav{ position:relative; }
    .nav-list{ margin:0; padding:0; list-style:none; display:flex; align-items:center; gap:6px; }
    .nav-link{
      display:inline-flex; align-items:center; gap:8px;
      padding: 12px 12px;
      border-radius: 999px;
      font-weight: 800;
      text-decoration:none !important;
      transition: background .18s ease, transform .18s ease, color .18s ease;
      will-change: transform;
    }
    .nav-link:active{ transform: translateY(1px); }

    .nav-btn{
      background: transparent;
      border: 0;
      cursor: pointer;
      color: inherit;
    }
    .chev{ font-size: 12px; opacity: .9; }

    .has-mega{ position:relative; }
    .mega{
      position:absolute;
      left:50%;
      transform: translateX(-50%);
      top: calc(100% + 14px);
      width: min(980px, calc(100vw - 48px));
      background: rgba(255,255,255,.98);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 22px;
      box-shadow: 0 26px 80px rgba(0,45,114,.18);
      overflow:hidden;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
      transform-origin: top center;
    }
    .has-mega.open .mega{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform: translateX(-50%) translateY(0);
    }
    .mega-inner{
      display:grid;
      grid-template-columns: 1fr 1fr 1.15fr;
      gap: 0;
      align-items:stretch;
    }
    .mega-col{
      padding: 18px 18px 20px;
      border-right: 1px solid rgba(0,0,0,.06);
    }
    .mega-col:last-of-type{ border-right:0; }
    .mega-title{
      font-weight: 900;
      color: #0f172a;
      margin: 0 0 10px 0;
      font-size: 15px;
      letter-spacing: .2px;
    }
    .mega-item{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 14px;
      font-weight: 800;
      color: #0f172a;
      text-decoration:none !important;
      border: 1px solid rgba(0,0,0,0);
      transition: background .15s ease, border-color .15s ease, transform .15s ease;
      margin-bottom: 8px;
    }
    .mega-item:hover{
      background: var(--primary-soft);
      border-color: rgba(0,91,203,.18);
      transform: translateY(-1px);
    }
    .mi-ic{ width: 26px; height: 26px; display:grid; place-items:center; border-radius: 10px;
      background: rgba(0,91,203,.10); border: 1px solid rgba(0,91,203,.12);
    }

    .mega-highlight{
      padding: 18px 18px 20px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, black) 0%, var(--primary-2) 70%, color-mix(in srgb, var(--primary-2) 65%, white) 140%);
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .mega-highlight:before{
      content:"";
      position:absolute;
      inset:-60px;
      background: radial-gradient(closest-side at 20% 25%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%);
      transform: rotate(10deg);
      opacity:.95;
      pointer-events:none;
    }
    .mh-badge{
      display:inline-flex; align-items:center; justify-content:center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.18);
      font-weight: 900;
      font-size: 12px;
      margin-bottom: 10px;
      position:relative;
    }
    .mh-title{ font-weight: 1000; font-size: 18px; margin: 0 0 6px 0; position:relative; }
    .mh-desc{ color: rgba(255,255,255,.88); font-size: 13.5px; margin: 0 0 14px 0; position:relative; }
    .mh-actions{ display:flex; gap:10px; flex-wrap:wrap; position:relative; }

    /* Focus ring like bank */
    .nav-link:focus-visible,
    .btn:focus-visible,
    .input:focus-visible{
      outline: none;
      box-shadow: 0 0 0 4px rgba(0,91,203,.22);
    }

    /* Header subtle shadow on scroll (set by JS) */
    header.is-scrolled{
      box-shadow: 0 14px 30px rgba(0,0,0,.10);
    }

    /* Mobile menu accordion */
    .mgroup{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      font-weight: 900;
      cursor:pointer;
      margin: 8px 0 6px;
    }
    .msub{
      display:none;
      margin: 0 0 8px;
      padding: 6px 0 2px;
      border-left: 2px solid rgba(255,255,255,.14);
    }
    .msub a{ padding-left: 14px; opacity: .95; }
    .msub a:hover{ opacity: 1; }

    /* Hide mega on small screens */
    @media (max-width: 860px){
      .nav{ display:none; }
    }


    /* ===== Daily Header Accents (Gold only in header) ===== */
    header{
      position:sticky;
      
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    header:after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:-1px;
      height: 3px;
      background: linear-gradient(90deg, rgba(0,0,0,0), var(--header-gold), rgba(0,0,0,0));
      opacity:.95;
      pointer-events:none;
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      background: var(--header-gold-soft);
    }
    .pill{
      border-color: rgba(255,255,255,.22);
    }


    /* ===== Menu contrast (Court Daily) ===== */
    header .nav-link,
    header .nav-btn{
      color:#FFFFFF !important;
      opacity: 1 !important;
      font-weight: 900;
      letter-spacing: .15px;
    }
    header .nav-link:hover,
    header .nav-link:focus-visible,
    header .nav-btn:hover,
    header .nav-btn:focus-visible{
      color:#FFFFFF !important;
      background: rgba(255,255,255,.16) !important;
      border: 1px solid rgba(255,255,255,.18);
    }
    header .nav-link{ text-shadow: 0 1px 0 rgba(0,0,0,.25); }
    header .brand .title strong,
    header .brand .title span{ text-shadow: 0 1px 0 rgba(0,0,0,.25); }


    .k-footer{ color:#fff; }
    .k-footer-top{
      background: linear-gradient(180deg, var(--footer-1) 0%, var(--footer-2) 100%);
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .kft-grid{
      display:grid;
      grid-template-columns: 1.15fr 1.35fr 1fr;
      gap: 18px;
      padding: 26px 0;
      align-items:start;
    }
    .kft-brand{ display:flex; gap:14px; align-items:center; }
    .kft-logo{
      width: 60px; height: 60px; border-radius: 18px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      display:grid; place-items:center;
      overflow:hidden;
    }
    .kft-logo img{ width: 54px; height: 54px; object-fit:contain; }
    .kft-title{ font-weight: 1000; font-size: 16px; }
    .kft-sub{ color: rgba(255,255,255,.80); font-size: 12.5px; margin-top:2px; }

    .kft-head{ font-weight: 1000; letter-spacing:.2px; margin-bottom: 8px; }
    .kft-callnum{ font-size: 18px; font-weight: 1000; }
    .kft-meta{ color: rgba(255,255,255,.80); font-size: 12.5px; margin-top:6px; line-height:1.55; }

    .kft-badges{ display:flex; gap:10px; flex-wrap:wrap; }
    .kbadge{
      display:inline-flex; align-items:center; gap:10px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      color:#fff; text-decoration:none !important;
      font-weight: 900;
    }
    .kbadge:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }
    .kb-ic{
      width: 28px; height: 28px; border-radius: 10px;
      display:grid; place-items:center;
      background: var(--header-gold-soft);
      border: 1px solid rgba(255,255,255,.18);
      font-size: 12px;
      font-weight: 1000;
    }

    .kft-social{ display:flex; gap:10px; flex-wrap:wrap; }
    .ksoc{
      width: 38px; height: 38px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      color:#fff; text-decoration:none !important;
      font-weight: 1000;
    }
    .ksoc:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }

    .k-footer-links{
      background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .kfl-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      padding: 22px 0;
    }
    .kfl-title{
      font-weight: 1000;
      margin-bottom: 10px;
      position:relative;
      padding-bottom: 10px;
    }
    .kfl-title:after{
      content:"";
      position:absolute;
      left:0; bottom:0;
      width: 56px; height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--header-gold), rgba(255,255,255,0));
      opacity:.95;
    }
    .kfl-a{
      display:block;
      color: rgba(255,255,255,.86);
      text-decoration:none !important;
      padding: 8px 0;
      font-weight: 800;
    }
    .kfl-a:hover{ color:#fff; }

    .k-footer-bottom{
      background: color-mix(in srgb, var(--footer-2) 88%, black);
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .kfb-row{
      padding: 14px 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      flex-wrap:wrap;
      color: rgba(255,255,255,.80);
      font-size: 12.5px;
    }
    .kfb-left a{ color: rgba(255,255,255,.86); text-decoration:none !important; font-weight: 800; }
    .kfb-left a:hover{ color:#fff; }
    .kfb-dot{ margin: 0 8px; opacity:.7; }
    .kfb-chip{
      display:inline-flex; align-items:center; justify-content:center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.92);
      font-weight: 900;
      letter-spacing:.2px;
    }

    @media (max-width: 980px){
      .kft-grid{ grid-template-columns: 1fr; }
      .kfl-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px){
      .kfl-grid{ grid-template-columns: 1fr; }
    }


    /* ===== SCB-like footer (structure inspired) ===== */
    .s-footer{ color:#fff; }
    .s-footer-top{
      background: linear-gradient(180deg, var(--footer-1) 0%, var(--footer-2) 100%);
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .sft-wrap{
      padding: 26px 0 22px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 18px;
      flex-wrap:wrap;
    }
    .sft-left{ display:flex; flex-direction:column; gap: 14px; min-width: 320px; flex: 1.2; }
    .sft-right{ display:flex; flex-direction:column; gap: 12px; align-items:flex-end; min-width: 280px; flex: .9; }

    .sft-apps{ display:flex; gap: 10px; flex-wrap:wrap; }
    .sft-pill{
      display:inline-flex; align-items:center; gap:10px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      color:#fff; text-decoration:none !important;
      font-weight: 900;
    }
    .sft-pill:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }
    .sft-ic{
      width: 34px; height: 34px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: var(--header-gold-soft);
      border: 1px solid rgba(255,255,255,.18);
      font-size: 12px;
      font-weight: 1000;
      letter-spacing:.2px;
    }

    .sft-brand{ display:flex; gap: 12px; align-items:center; }
    .sft-logo{
      width: 64px; height: 64px;
      border-radius: 18px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      display:grid; place-items:center;
      overflow:hidden;
    }
    .sft-logo img{ width: 56px; height: 56px; object-fit:contain; }

    .sft-name{ font-weight: 1000; font-size: 16px;color: white; }
    .sft-sub{ color: rgba(255,255,255,.80); font-size: 9px; margin-top:2px; }

    .sft-cc-title{ font-weight: 1000; opacity: .92; }
    .sft-cc-num{ font-size: 18px; font-weight: 1000; }
    .sft-cc-meta{ color: rgba(255,255,255,.80); font-size: 12.5px; margin-top:6px; }

    .sft-social{ display:flex; gap: 10px; flex-wrap:wrap; }
    .sft-soc{
      width: 38px; height: 38px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      color:#fff; text-decoration:none !important;
      font-weight: 1000;
      font-size: 12px;
    }
    .sft-soc:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }

    .s-footer-links{
      background: linear-gradient(180deg, var(--footer-1) 0%, var(--footer-2) 100%);
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .sfl-grid{
      padding: 20px 0 22px;
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .sfl-title{
      font-weight: 1000;
      letter-spacing: .18px;
      margin-bottom: 10px;
      color: rgba(255,255,255,.92);
      position:relative;
      padding-bottom: 10px;
    }
    .sfl-title:after{
      content:"";
      position:absolute;
      left:0; bottom:0;
      width: 58px; height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--header-gold), rgba(255,255,255,0));
      opacity:.95;
    }
    .sfl-a{
      display:block;
      padding: 8px 0;
      color: rgba(255,255,255,.84);
      text-decoration:none !important;
     /* font-weight: 800; */
    }
    .sfl-a:hover{ color:#fff; }
    .sfl-text{
      color: rgba(255,255,255,.80);
      font-size: 12.5px;
      line-height: 1.6;
    }

    .s-footer-bottom{
      background: linear-gradient(180deg, var(--footer-1) 0%, var(--footer-2) 100%);
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .sfb-row{
      padding: 12px 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      flex-wrap:wrap;
      color: rgba(255,255,255,.78);
      font-size: 12.5px;
    }
    .sfb-right a{
      color: rgba(255,255,255,.86);
      text-decoration:none !important;
    }
    .sfb-right a:hover{ color:#fff; }
    .sfb-dot{ margin: 0 8px; opacity:.7; }

    @media (max-width: 980px){
      .sft-right{ align-items:flex-start; }
      .sfl-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px){
      .sfl-grid{ grid-template-columns: 1fr; }
    }


    /* ===== Main menu single-line enforcement ===== */
    header .nav{
      display:flex;
      align-items:center;
      white-space:nowrap;
      overflow:hidden;
    }
    header .nav-list{
      display:flex;
      align-items:center;
      flex-wrap:nowrap;           /* force single line */
      gap:4px;
    }
    header .nav-link,
    header .nav-btn{
      white-space:nowrap;
    }


    
    /* ===== Header layout: Fixed logo (px) + Flexible menu ===== */
    header .container{
      display:flex;
      align-items:center;
      gap:16px;
    }
    header .brand{
      flex: 0 0 260px;        /* fixed logo width */
      max-width: 260px;
    }
    header .nav{
      flex: 1 1 auto;        /* menu stretches */
      max-width: calc(100% - 260px);
      justify-content:flex-end;
      overflow: visible;
    }

    header .container{
      display:flex;
      align-items:center;
      gap:12px;
    }
    header .brand{
      flex: 0 0 30%;
      max-width: 30%;
    }
    header .nav{
      flex: 0 0 70%;
      max-width: 70%;
      justify-content:flex-end;
    }


    /* ===== v1.1 Menu responsiveness + equal typography ===== */
    header .header-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
    }

    /* Ensure nav consumes remaining width and adapts */
    header .brand{ flex: 0 0 auto; }
    header .nav{ flex: 1 1 auto; min-width: 0; }

    /* Equal typography for links/buttons (with or without submenu) */
    header .nav-link,
    header .nav-btn{
      font-size: 14.5px;
      line-height: 1;
      padding: 12px 12px;
      font-weight: 900;
      letter-spacing: .15px;
    }

    /* Desktop: single line where possible */
    @media (min-width: 981px){
      header .nav-list{
        flex-wrap: nowrap;
        white-space: nowrap;
      }
    }

          header .brand{
        flex: 1 1 100%;
        max-width: 100%;
      }
      header .nav{
        flex: 1 1 100%;
        max-width: 100%;
      }
      header .nav-list{
        justify-content:flex-start;
        flex-wrap: wrap;
        white-space: normal;
        gap: 6px;
      }
    }

    /* Mobile: stacked brand; nav hidden (hamburger), but keep touch sizing consistent */
    @media (max-width: 860px){
      header .brand .title strong{ font-size: 15px; }
      header .brand .title span{ font-size: 12px; }
    }


    /* ===== v1.1 Accessibility helpers ===== */
    .skip-link{
      position:absolute;
      left: 12px;
      top: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: #fff;
      color: var(--text);
      border: 2px solid var(--header-gold);
      z-index: 9999;
      transform: translateY(-140%);
      transition: transform .18s ease;
      font-weight: 900;
      text-decoration:none !important;
    }
    .skip-link:focus{ transform: translateY(0); }

    .visually-hidden{
      position:absolute !important;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }

    /* Better focus for keyboard */
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
      outline: none;
      box-shadow: 0 0 0 4px rgba(160,152,32,.26);
      border-radius: 12px;
    }

    /* Mobile menu touch targets */
    .mobile-menu a, .mgroup{
      min-height: 44px;
    }


    /* ===== v1.2 Tablet overflow -> 'เพิ่มเติม …' ===== */
    @media (min-width: 861px) and (max-width: 980px){
      header .nav-list{
        flex-wrap: nowrap;
        white-space: nowrap;
      }
      #moreMenuItem{
        display: inline-flex !important;
      }
    }


    /* ===== v1.3 Menu: one line + 100% flexible (desktop/tablet) ===== */
    @media (min-width: 861px){
      header .header-wrap{ flex-wrap: nowrap; }
      header .nav{ flex: 1 1 auto; min-width: 0; }
      header .nav-list{
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
      }
    }


    /* ===== v1.3 Submenu hover contrast (fg/bg) ===== */
    .mega-item:hover,
    .mega-item:focus-visible{
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 90%);
      color:#fff !important;
      border-color: rgba(255,255,255,.14);
    }
    .mega-item:hover .mi-ic,
    .mega-item:focus-visible .mi-ic{
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.18);
    }
    .mega-item:hover .mi-ic,
    .mega-item:focus-visible .mi-ic{
      color:#fff;
    }


    /* ===== v1.6 Foreground color accents ===== */
    /* Headings accent underline */
    h2.section-title::after,
    h3.section-title::after{
      content:"";
      display:block;
      width:64px;
      height:4px;
      margin-top:8px;
      border-radius:999px;
      background: linear-gradient(90deg, var(--header-gold), var(--primary-2));
    }

    /* Icon chips */
    .icon-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:40px;
      height:40px;
      border-radius:14px;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      box-shadow: var(--shadow-sm);
    }

    /* Links with accent hover */
    a {
      transition: color .2s ease, background .2s ease!important;
    }
    a:hover{
      color: var(--header-gold) !important;
      text-decoration: none;
    }

    /* Card foreground highlight */
    .card{
      border-top: 3px solid var(--header-gold) !important;
    }

    /* Badge accent */
    .badge-accent{
      display:inline-block;
      padding:6px 10px;
      border-radius:999px;
      font-weight:900;
      background: rgba(160,152,32,.14);
      color: var(--primary);
    }


    /* ===== v1.7 Section accents (ข่าว/ประกาศ) ===== */
    /* Try to target sections by id if present; fallback to headings text classes */
    section#ข่าว, section#ประกาศ{
      position: relative;
    }
    section#ข่าว::before, section#ประกาศ::before{
      content:"";
      position:absolute;
      inset: -14px -14px auto -14px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--header-gold), rgba(255,255,255,0));
      opacity: .9;
      pointer-events:none;
    }
    section#ข่าว .card, section#ประกาศ .card{
      border-top-color: var(--header-gold);
    }
    section#ข่าว h2::after, section#ประกาศ h2::after{
      background: linear-gradient(90deg, var(--header-gold), var(--primary-2));
    }

    /* ===== v1.7 Icon color system ===== */
    .ic-primary{
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
    }
    .ic-secondary{
      background: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--secondary) 70%, var(--primary)));
      color:#fff;
    }
    .ic-gold{
      background: linear-gradient(135deg, var(--header-gold), color-mix(in srgb, var(--header-gold) 70%, #fff));
      color: #0B1326;
      border: 1px solid rgba(255,255,255,.18);
    }
    .icon-chip.ic-gold{ box-shadow: 0 10px 22px rgba(160,152,32,.18); }

    /* ===== v1.7 Modern government motion (subtle) ===== */
    .card,
    .btn,
    .nav-link,
    .nav-btn,
    .sft-pill,
    .sft-soc,
    .sfl-a{
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
      will-change: transform;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(7,14,31,.16);
    }
    .btn:hover{
      transform: translateY(-1px);
    }
    .nav-link:hover, .nav-btn:hover{
      transform: translateY(-1px);
    }
    .card:focus-within{
      box-shadow: 0 0 0 4px rgba(160,152,32,.22), var(--shadow);
    }


    /* ===== v1.8 Responsive menu collapse (small screens) ===== */
    /* Compact header on medium screens */
    @media (max-width: 1100px){
      header .brand .title strong{ font-size: 14.5px; }
      header .brand .title span{ font-size: 11.5px; }
      header .nav-link, header .nav-btn{
        padding: 10px 10px;
        font-size: 14px;
      }
      header .nav-list{ gap: 2px; }
    }

    /* Collapse to hamburger earlier for clarity */
    @media (max-width: 980px){
      header .nav{ display:none !important; }
      header .hamburger{ display:inline-flex !important; }
      header .header-wrap{
        gap: 10px;
      }
      /* Ensure mega panels don't force layout when hidden */
      .mega{ display:none !important; }
    }

    /* Mobile menu panel styling polish */
    @media (max-width: 980px){
      .mobile-menu{
        width: min(420px, calc(100vw - 18px));
      }
      .mobile-menu .mhead{
        font-weight: 1000;
      }
      .mobile-menu a{
        padding: 12px 14px;
        border-radius: 14px;
      }
    }


    /* ===== v1.9 Burger icon + responsive behavior ===== */
    .hamburger{
      display:none;
      align-items:center;
      justify-content:center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.18);
      color: #fff;
      box-shadow: 0 10px 22px rgba(0,0,0,.20);
    }
    .hamburger:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); transform: translateY(-1px); }
    .hamburger:active{ transform: translateY(0); }
    .burger-ic{ display:block; }


    /* ===== v1.9 Court sharp contrast tweaks ===== */
    header{
      backdrop-filter: saturate(120%) blur(10px);
    }
    header .nav-link:hover,
    header .nav-btn:hover,
    header .nav-link:focus-visible,
    header .nav-btn:focus-visible{
      background: rgba(255,255,255,.18) !important;
      border-color: rgba(255,255,255,.22) !important;
    }
    header:after{
      background: linear-gradient(90deg, rgba(0,0,0,0), var(--header-gold), rgba(0,0,0,0));
      opacity: 1;
      height: 3px;
    }


    /* ===== Hero auto slider (timed) ===== */
    .hero-slide{
      transition: opacity .28s ease, transform .28s ease;
      will-change: opacity, transform;
    }
    .hero-slide.is-fading{
      opacity: 0;
      transform: translateY(4px);
    }
    @media (prefers-reduced-motion: reduce){
      .hero-slide{ transition:none !important; }
      .hero-slide.is-fading{ opacity: 1; transform:none; }
    }

    /* ===== Mode switch: Daily / Daily use (single class) ===== */
    html.daily{
      --primary:#0B1530;
      --primary-2:#1E2F5C;
      --secondary:#4A5A66;
      --accent:#A0961E;

      --header-gold:#A0961E;
      --header-gold-soft: rgba(160,150,30,.28);

      --topbar:#0B1530;
      --footer-1:#0B1530;
      --footer-2:#070E1D;
      --hero-a: rgba(11,21,48,.30);
      --hero-b: rgba(160,150,30,.18);

      --shadow: 0 18px 42px rgba(0,0,0,.28);
      --shadow-sm: 0 10px 26px rgba(0,0,0,.24);
    }

    html.daily{
      --primary:#1E3A8A;
      --primary-2:#1E2F5C;
      --secondary:#5A6E6E;
      --accent:#A0961E;

      --header-gold:#A0961E;
      --header-gold-soft: rgba(160,150,30,.18);

      --topbar:#0E1A33;
      --footer-1:#0E1A33;
      --footer-2:#0A1226;
      --hero-a: rgba(30,58,138,.22);
      --hero-b: rgba(160,150,30,.14);

      --shadow: 0 14px 30px rgba(0,0,0,.16);
      --shadow-sm: 0 7px 18px rgba(0,0,0,.14);
    }


    /* ===== Mode auto-switch + admin toggle ===== */
    .mode-admin{
      margin-left: auto;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .mode-toggle{
      height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      font-weight: 900;
      letter-spacing: .1px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      color: #fff;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
      user-select:none;
      white-space:nowrap;
    }
    .mode-toggle:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); transform: translateY(-1px); }
    .mode-toggle:active{ transform: translateY(0); }
    .mode-toggle[aria-pressed="true"]{
      background: rgba(160,150,30,.22);
      border-color: rgba(160,150,30,.48);
    }
    @media (max-width: 860px){
      .mode-admin{ display:none; }
    }

    /* Lock sections to daily look always */
    .always-daily{
      --primary:#0B1530;
      --primary-2:#1E2F5C;
      --secondary:#4A5A66;
      --accent:#A0961E;

      --header-gold:#A0961E;
      --header-gold-soft: rgba(160,150,30,.28);

      --shadow: 0 18px 42px rgba(0,0,0,.24);
      --shadow-sm: 0 10px 26px rgba(0,0,0,.20);
    }


    /* ===== v1.10 Header & Hero reference style (based on provided mock) ===== */
    :root{
      --header-surface:#F3F6FB;
      --header-surface-2:#E9EEF7;
      --hero-image:url('https://upload.wikimedia.org/wikipedia/commons/8/85/%E0%B8%A8%E0%B8%B2%E0%B8%A5%E0%B8%9B%E0%B8%81%E0%B8%84%E0%B8%A3%E0%B8%AD%E0%B8%87%28%E0%B8%AB%E0%B8%A3%E0%B8%B7%E0%B8%AD%E0%B9%80%E0%B8%9B%E0%B8%A5%E0%B9%88%E0%B8%B2%29_-_panoramio.jpg');
    }

    header{
      background: linear-gradient(180deg, var(--header-surface), var(--header-surface-2));
      color: var(--text);
      border-bottom: 1px solid rgba(15,23,42,.10);
    }
    header:after{ display:none; }

    .topbar{
      background: transparent !important;
      color: var(--text) !important;
      border-bottom: 1px solid rgba(15,23,42,.08);
    }
    .topbar a{ color: var(--text) !important; }
    .topbar .mode-toggle{
      color: var(--text);
      background: rgba(15,23,42,.06);
      border-color: rgba(15,23,42,.10);
      box-shadow:none;
    }
    .topbar .mode-toggle:hover{ background: rgba(15,23,42,.10); border-color: rgba(15,23,42,.14); }

    .header-wrap{
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 0;
    }
    .brand img{
      width: 52px;
      height: 52px;
      border-radius: 999px;
      background: #fff;
      border: 2px solid rgba(160,150,30,.28);
      box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }
    .brand .title strong{
      font-size: 20px;
      font-weight: 1000;
      letter-spacing: .1px;
      color: var(--primary-2);
      white-space: nowrap;
    }
    .brand .title span{
      display:block;
      margin-top: 2px;
      font-size: 12.5px;
      color: rgba(15,23,42,.70);
      font-weight: 800;
      letter-spacing: .08px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      max-width: 58ch;
    }

    .header-login{
      margin-left: auto;
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .btn-login{
      height: 40px;
      padding: 0 14px;
      border-radius: 12px;
      background: linear-gradient(180deg, var(--primary-2), var(--primary));
      color: #fff;
      border: 1px solid rgba(0,0,0,.08);
      font-weight: 1000;
      letter-spacing: .1px;
      box-shadow: 0 14px 26px rgba(30,47,92,.18);
      display:inline-flex;
      align-items:center;
      gap: 10px;
      text-decoration:none !important;
    }
    .btn-login:hover{
      transform: translateY(-1px);
      box-shadow: 0 18px 34px rgba(30,47,92,.24);
    }

    header .nav-link, header .nav-btn{
      color: rgba(15,23,42,.92) !important;
      background: transparent !important;
      border: 1px solid transparent !important;
      font-weight: 1000;
    }
    header .nav-link:hover, header .nav-btn:hover,
    header .nav-link:focus-visible, header .nav-btn:focus-visible{
      background: rgba(15,23,42,.06) !important;
      border-color: rgba(15,23,42,.10) !important;
      transform: translateY(-1px);
    }
    .hamburger{
      background: rgba(15,23,42,.06) !important;
      border-color: rgba(15,23,42,.10) !important;
      color: rgba(15,23,42,.92) !important;
      box-shadow:none !important;
    }

    .hero{
      background: #e9eef7;
      padding: 0;
    }
    .hero-ref{
position: relative;
      border-radius: 0px;
      overflow:hidden;
      box-shadow: var(--shadow);
      background: var(--hero-image);
      background-size: cover;
      background-position: center;
      min-height: 320px;
      display:flex;
      align-items:center;
    
}
    .hero-ref::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, rgba(11,21,48,.86), rgba(11,21,48,.40), rgba(11,21,48,.12));
    }
    .hero-ref .inner{
      position:relative;
      z-index:1;
      padding: 42px 42px;
      max-width: var(--container);
      margin: 0 auto;
      width: 100%;
    }
    .hero-ref h1{
      margin:0;
      font-size: 44px;
      line-height: 1.12;
      font-weight: 1100;
      letter-spacing: .1px;
      color:#fff;
      text-shadow: 0 10px 22px rgba(0,0,0,.26);
    }
    .hero-ref .tagline{
      margin-top: 10px;
      font-size: 22px;
      font-weight: 1000;
      color: var(--header-gold);
      text-shadow: 0 10px 20px rgba(0,0,0,.22);
    }
    .hero-ref .hero-actions{
      margin-top: 20px;
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
    }
    .hero-ref .btn-ghost{
      height: 42px;
      padding: 0 16px;
      border-radius: 12px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      color:#fff;
      font-weight: 1000;
      text-decoration:none !important;
    }
    .hero-ref .btn-ghost:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }
    .hero-ref .btn-solid{
      height: 42px;
      padding: 0 16px;
      border-radius: 12px;
      background: linear-gradient(180deg, var(--header-gold), rgba(160,150,30,.82));
      color: #0B1530;
      border: 1px solid rgba(255,255,255,.16);
      font-weight: 1100;
      text-decoration:none !important;
      box-shadow: 0 16px 30px rgba(160,150,30,.18);
    }
    .hero-ref .btn-solid:hover{ transform: translateY(-1px); box-shadow: 0 18px 36px rgba(160,150,30,.24); }

    .hero-strip{
      margin-top: -18px;
      position: relative;
      z-index: 2;
    }
    .hero-strip .strip{
      max-width: var(--container);
      margin: 0 auto;
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(15,23,42,.10);
      border-radius: 16px;
      box-shadow: 0 18px 40px rgba(0,0,0,.10);
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      overflow:hidden;
      backdrop-filter: blur(10px);
    }
    .hero-strip .item{
      padding: 18px 18px;
      display:flex;
      align-items:center;
      gap: 12px;
      min-height: 78px;
    }
    .hero-strip .item + .item{
      border-left: 1px solid rgba(15,23,42,.08);
    }
    .hero-strip .ic{
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(30,58,138,.16), rgba(160,150,30,.18));
      border: 1px solid rgba(15,23,42,.10);
      display:grid;
      place-items:center;
      color: var(--primary-2);
      font-size: 22px;
    }
    .hero-strip .txt strong{
      display:block;
      font-weight: 1100;
      color: var(--primary-2);
    }
    .hero-strip .txt span{
      display:block;
      margin-top: 2px;
      font-weight: 800;
      color: rgba(15,23,42,.66);
      font-size: 12.5px;
    }

    @media (max-width: 980px){
      .hero-ref .inner{ padding: 28px 18px; }
      .hero-ref h1{ font-size: 30px; }
      .hero-ref .tagline{ font-size: 18px; }
      .hero-strip{ margin-top: 10px; }
      .hero-strip .strip{ grid-template-columns: 1fr; }
      .hero-strip .item + .item{ border-left:none; border-top: 1px solid rgba(15,23,42,.08); }
    }


    /* ===== v1.12 Hero edge-to-edge, boxed content, responsive heights ===== */
    .hero{
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: 0;
    }

    .hero-ref{
      width: 100%;
      min-height: 520px; /* Desktop default */
      border-radius: 0;
    }

    .hero-ref .inner{
      max-width: var(--container);
      margin: 0 auto;
      padding-left: 24px;
      padding-right: 24px;
    }

    /* Heights by device */
    @media (max-width: 1200px){
      .hero-ref{ min-height: 420px; } /* Tablet */
    }
    @media (max-width: 768px){
      .hero-ref{ min-height: 300px; } /* Mobile */
    }

    /* Gold divider under Hero – daily only */
    html.daily .hero::after{
      content:"";
      display:block;
      height: 4px;
      width: 100%;
      background: linear-gradient(
        90deg,
        rgba(0,0,0,0),
        var(--header-gold),
        rgba(0,0,0,0)
      );
    }


    /* ===== v1.13 Daily hero (taller) + special-day note + slow fade-in ===== */
    html.daily .hero-ref{
      min-height: 640px; /* Desktop daily */
    }
    @media (max-width: 1200px){
      html.daily .hero-ref{ min-height: 520px; } /* Tablet daily */
    }
    @media (max-width: 768px){
      html.daily .hero-ref{ min-height: 360px; } /* Mobile daily */
    }

    /* Daily slow fade-in (only daily, respects reduced motion) */
    html.daily .hero-ref .inner{
      animation: ceremonialFade 1.25s ease forwards;
      opacity: 0;
      transform: translateY(6px);
    }
    @keyframes ceremonialFade{
      to{ opacity:1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce){
      html.daily .hero-ref .inner{ animation:none !important; opacity:1 !important; transform:none !important; }
    }

    /* Special-day daily note */
    .daily-note{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(11,21,48,.58);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      box-shadow: 0 16px 32px rgba(0,0,0,.18);
      margin-bottom: 14px;
      max-width: 100%;
    }
    .cn-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 4px 10px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--header-gold), rgba(160,150,30,.78));
      color: #0B1530;
      font-weight: 1100;
      letter-spacing: .1px;
      white-space: nowrap;
    }
    .cn-text{
      color: rgba(255,255,255,.92);
      font-weight: 950;
      letter-spacing: .08px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    @media (max-width: 768px){
      .daily-note{ border-radius: 16px; }
      .cn-text{ white-space: normal; }
    }


    /* ===== v1.14 Responsive navigation rebuild (burger + drawer) ===== */
    .hamburger{ display:none; }
    @media (max-width: 980px){
      header .nav{ display:none !important; }
      .hamburger{
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        width:44px; height:44px;
        border-radius: 12px;
        margin-left: 10px;
        background: rgba(15,23,42,.06);
        border: 1px solid rgba(15,23,42,.10);
        cursor:pointer;
      }
      .hamburger span{
        position: relative;
        width: 18px;
        height: 2px;
        background: rgba(15,23,42,.92);
        border-radius: 999px;
        display:block;
      }
      .hamburger span::before,
      .hamburger span::after{
        content:"";
        position:absolute;
        left:0;
        width: 18px;
        height: 2px;
        background: rgba(15,23,42,.92);
        border-radius: 999px;
      }
      .hamburger span::before{ top: -6px; }
      .hamburger span::after{ top: 6px; }
      .hamburger[aria-expanded="true"] span{ background: transparent; }
      .hamburger[aria-expanded="true"] span::before{ top:0; transform: rotate(45deg); }
      .hamburger[aria-expanded="true"] span::after{ top:0; transform: rotate(-45deg); }
    }

    .mobile-overlay{
      position: fixed;
      inset: 0;
      background: rgba(11,21,48,.42);
      backdrop-filter: blur(4px);
      z-index: 999;
      opacity: 0;
      transition: opacity .22s ease;
    }
    .mobile-overlay.show{ opacity: 1; }

    .mobile-menu{
      display:block;
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: min(420px, 92vw);
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(12px);
      border-left: 1px solid rgba(15,23,42,.10);
      z-index: 1000;
      transform: translateX(110%);
      transition: transform .24s ease;
      padding: 0;
      overflow:auto;
    }
    .mobile-menu.open{ transform: translateX(0); }

    .mobile-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 16px 6px 10px;
      position: sticky;
      top:0;
      background: rgba(255,255,255,.94);
      border-bottom: 1px solid rgba(15,23,42,.08);
      z-index: 2;
    }
    .mobile-title{
      font-weight: 1100;
      color: rgba(15,23,42,.92);
      letter-spacing: .08px;
    }
    .mobile-close{
      width: 40px; height: 40px;
      border-radius: 12px;
      background: rgba(15,23,42,.06);
      border: 1px solid rgba(15,23,42,.10);
      cursor: pointer;
      font-size: 18px;
      font-weight: 1000;
      color: rgba(15,23,42,.86);
    }
    .mobile-menu a{
      display:flex;
      padding: 12px 10px;
      border-radius: 12px;
      font-weight: 900;
      color: rgba(15,23,42,.90);
      text-decoration:none;
    }
    .mobile-menu a:hover{ background: rgba(15,23,42,.06); }

    .mobile-menu .mgroup{
      width: 100%;
      text-align:left;
      padding: 12px 10px;
      border-radius: 12px;
      background: transparent;
      border: 1px solid transparent;
      font-weight: 1100;
      color: rgba(15,23,42,.92);
      display:flex;
      align-items:center;
      justify-content:space-between;
      cursor:pointer;
    }
    .mobile-menu .mgroup:hover{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.08); }
    .mobile-menu .msub{
      display:none;
      padding: 4px 0 10px 10px;
    }
    .mobile-menu .msub a{
      font-weight: 850;
      color: rgba(15,23,42,.80);
      padding: 10px 10px;
    }
    .mobile-menu .msub.open{ display:block; }

    @media (prefers-reduced-motion: reduce){
      .mobile-menu, .mobile-overlay{ transition:none !important; }
    }


    /* ===== v1.15 Material-inspired surfaces & accents ===== */
    :root{
      --md-surface: #FFFFFF;
      --md-surface-2: #F7F8FC;
      --md-surface-3: #EEF2F8;
      --md-outline: rgba(15,23,42,.10);
      --md-outline-2: rgba(15,23,42,.14);
      --md-elev-1: 0 6px 16px rgba(0,0,0,.10);
      --md-elev-2: 0 12px 28px rgba(0,0,0,.14);
      --md-elev-3: 0 18px 42px rgba(0,0,0,.18);
      --md-radius: 18px;
      --md-radius-sm: 14px;
    }

    body{
      background: linear-gradient(180deg, var(--bg), var(--bg-2));
    }

    /* Cards / panels */
    .card, .news, .notice, .panel, .tile, .box,
    .hero-strip .strip,
    main{
      border: 1px solid var(--md-outline);
      border-radius: var(--md-radius);
      background: var(--md-surface);
      box-shadow: var(--md-elev-1);
    }
    main{
      border-radius: var(--md-radius);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
      backdrop-filter: blur(8px);
    }

    /* Subtle color accents by section */
    .sec-accent{
      position: relative;
    }
    .sec-accent::before{
      content:"";
      position:absolute;
      left:0;
      top: 10px;
      bottom: 10px;
      width: 4px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--primary), var(--header-gold));
      opacity: .9;
    }
    .sec-accent > *{ position: relative; }

    /* Headings with small material chip */
    h2, .h2{
      position: relative;
    }
    h2::after{
      content:"";
      display:block;
      width: 64px;
      height: 4px;
      border-radius: 999px;
      margin-top: 10px;
      background: linear-gradient(90deg, var(--header-gold), rgba(0,0,0,0));
      opacity: .9;
    }

    /* Buttons */
    .btn, button, .btn-login, .hero-ref .btn-solid, .hero-ref .btn-ghost{
      box-shadow: var(--md-elev-1);
    }
    .btn-login, .hero-ref .btn-solid{
      border-radius: 14px;
    }
    .hero-ref .btn-ghost{
      border-radius: 14px;
      background: rgba(255,255,255,.12);
    }
    .btn:hover, button:hover, .btn-login:hover, .hero-ref .btn-solid:hover, .hero-ref .btn-ghost:hover{
      box-shadow: var(--md-elev-2);
    }

    /* Hover lift on interactive tiles */
    a.card, a.news, .card:hover, .news:hover, .notice:hover, .tile:hover{
      transform: translateY(-2px);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      border-color: var(--md-outline-2);
      box-shadow: var(--md-elev-2);
    }

    /* Form fields */
    input, select, textarea{
      border-radius: 12px;
      border: 1px solid var(--md-outline);
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
      transition: border-color .16s ease, box-shadow .16s ease;
    }
    input:focus, select:focus, textarea:focus{
      outline: none;
      border-color: rgba(30,47,92,.45);
      box-shadow: 0 0 0 4px rgba(30,58,138,.12);
    }

    /* Table */
    table{
      border-radius: 16px;
      overflow:hidden;
      border: 1px solid var(--md-outline);
      box-shadow: var(--md-elev-1);
      background: #fff;
    }
    thead th{
      background: linear-gradient(180deg, rgba(30,58,138,.10), rgba(30,58,138,.06));
    }

    /* Material-like ripple */
    .ripple{
      position: relative;
      overflow:hidden;
    }
    .ripple span.rip{
      position:absolute;
      border-radius:999px;
      transform: scale(0);
      opacity:.28;
      background: #fff;
      animation: ripple .6s ease-out;
      pointer-events:none;
      mix-blend-mode: overlay;
    }
    @keyframes ripple{
      to{ transform: scale(18); opacity:0; }
    }

    @media (prefers-reduced-motion: reduce){
      a.card, a.news, .card:hover, .news:hover, .notice:hover, .tile:hover{
        transform:none !important;
      }
    }


    /* ===== v1.16 UI Kit integration (Gov + Material) ===== */
    :root{
      --font: "Sarabun", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      --kanit: "Kanit",ms sans serif;
      --noto: "Noto Sans Thai",ms sans serif;
      --prompt: "Prompt",ms sans serif;
      --Mitr: "Mitr",ms sans serif;
      --Sans: "Google Sans", sans-serif;

      /* Material roles */
      --surface: #FFFFFF;
      --surface-2:#F7F8FC;
      --surface-3:#EEF2F8;
      --outline: rgba(15,23,42,.10);
      --outline-2: rgba(15,23,42,.14);

      /* Icon colors */
      --icon-primary: var(--primary);
      --icon-secondary: #5A6E6E;
      --icon-gold: var(--header-gold);

      /* Elevation */
      --e1: 0 6px 16px rgba(0,0,0,.10);
      --e2: 0 12px 28px rgba(0,0,0,.14);
      --e3: 0 18px 42px rgba(0,0,0,.18);

      /* Radius */
      --r-lg: 18px;
      --r-md: 16px;
      --r-sm: 12px;
    }

    html, body{
      font-family: var(--font);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1{ letter-spacing: .1px; }
    h2{ font-weight: 900; letter-spacing: .08px; }
    h3{ font-weight: 900; letter-spacing: .06px; }
    p, li{ line-height: 1.65; }

    main{
      background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
      border: 1px solid var(--outline);
      border-radius: var(--r-lg);
      box-shadow: var(--e1);
    }

    .sec-accent{
      position: relative;
      padding-left: 16px;
    }
    .sec-accent::before{
      content:"";
      position:absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 4px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--primary), var(--header-gold));
      opacity: .95;
    }

    .service-card, .service-item, .service-tile{
      position: relative;
      border-radius: var(--r-lg);
      border: 1px solid var(--outline);
      background: var(--surface);
      box-shadow: var(--e1);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      overflow: hidden;
    }
    .service-card::before, .service-item::before, .service-tile::before{
      content:"";
      position:absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--header-gold));
      opacity: .9;
    }
    .service-card:hover, .service-item:hover, .service-tile:hover{
      transform: translateY(-2px);
      border-color: var(--outline-2);
      box-shadow: var(--e2);
    }

    .card, .news, .notice, .panel, .tile, .box{
      border-radius: var(--r-lg);
      border: 1px solid var(--outline);
      background: var(--surface);
      box-shadow: var(--e1);
    }

    .btn, button, .btn-login{
      border-radius: 14px;
      box-shadow: var(--e1);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .btn:hover, button:hover, .btn-login:hover{
      transform: translateY(-1px);
      box-shadow: var(--e2);
    }
    .btn:active, button:active, .btn-login:active{
      transform: translateY(0);
      box-shadow: var(--e1);
    }

    .ic-primary{ color: var(--icon-primary) !important; }
    .ic-secondary{ color: var(--icon-secondary) !important; }
    .ic-gold{ color: var(--icon-gold) !important; }


    /* ===== v1.17 Material 3 (tonal surfaces + state layers + stronger elevation) ===== */
    :root{
      /* M3 color roles (mapped to brand navy/gold) */
      --m3-primary: var(--primary);
      --m3-on-primary: #FFFFFF;
      --m3-primary-container: rgba(30,58,138,.12);
      --m3-on-primary-container: var(--primary-2);

      --m3-secondary: #3E4C59;
      --m3-on-secondary: #FFFFFF;
      --m3-secondary-container: rgba(62,76,89,.12);
      --m3-on-secondary-container: #22303A;

      --m3-tertiary: var(--header-gold);
      --m3-on-tertiary: #0B1530;
      --m3-tertiary-container: rgba(160,150,30,.18);
      --m3-on-tertiary-container: #0B1530;

      /* Tonal surfaces */
      --m3-surface: #FFFFFF;
      --m3-surface-1: color-mix(in srgb, #FFFFFF 92%, var(--m3-primary) 8%);
      --m3-surface-2: color-mix(in srgb, #FFFFFF 88%, var(--m3-primary) 12%);
      --m3-surface-3: color-mix(in srgb, #FFFFFF 84%, var(--m3-primary) 16%);
      --m3-surface-4: color-mix(in srgb, #FFFFFF 80%, var(--m3-primary) 20%);
      --m3-surface-5: color-mix(in srgb, #FFFFFF 76%, var(--m3-primary) 24%);

      --m3-surface-container: var(--m3-surface-1);
      --m3-surface-container-low: var(--m3-surface);
      --m3-surface-container-high: var(--m3-surface-3);
      --m3-surface-container-highest: var(--m3-surface-4);

      --m3-outline: rgba(15,23,42,.12);
      --m3-outline-variant: rgba(15,23,42,.18);

      /* Elevation scale (stronger) */
      --m3-e1: 0 8px 18px rgba(0,0,0,.12);
      --m3-e2: 0 16px 34px rgba(0,0,0,.16);
      --m3-e3: 0 24px 52px rgba(0,0,0,.18);
      --m3-e4: 0 32px 72px rgba(0,0,0,.22);

      /* State layers */
      --m3-state-hover: rgba(30,58,138,.10);
      --m3-state-focus: rgba(30,58,138,.16);
      --m3-state-press: rgba(30,58,138,.18);
      --m3-state-hover-inv: rgba(255,255,255,.14);
      --m3-state-focus-inv: rgba(255,255,255,.18);
    }

    body{
      background: radial-gradient(1200px 600px at 20% -10%, rgba(30,58,138,.12), rgba(255,255,255,0) 60%),
                  radial-gradient(900px 520px at 90% 0%, rgba(160,150,30,.10), rgba(255,255,255,0) 55%),
                  linear-gradient(180deg, var(--bg), var(--bg-2));
    }

    main{
      background: linear-gradient(180deg, var(--m3-surface-container), var(--m3-surface-container-low));
      border: 1px solid var(--m3-outline);
      box-shadow: var(--m3-e1);
    }

    .card, .news, .notice, .panel, .tile, .box, .hero-strip .strip{
      background: var(--m3-surface-container-low);
      border: 1px solid var(--m3-outline);
      box-shadow: var(--m3-e1);
    }
    .card:hover, .news:hover, .notice:hover, .tile:hover{
      box-shadow: var(--m3-e2);
      border-color: var(--m3-outline-variant);
    }

    .btn, button, .btn-login, a.btn, a.btn-login{
      position: relative;
      overflow: hidden;
      box-shadow: var(--m3-e1);
    }
    .btn:hover, button:hover, .btn-login:hover{ box-shadow: var(--m3-e2); }
    .btn:focus-visible, button:focus-visible, .btn-login:focus-visible{
      outline: none;
      box-shadow: 0 0 0 4px var(--m3-state-focus), var(--m3-e2);
    }

    input, select, textarea{
      background: var(--m3-surface-container-low);
      border-color: var(--m3-outline);
    }
    input:focus, select:focus, textarea:focus{
      border-color: color-mix(in srgb, var(--m3-primary) 50%, #fff 50%);
      box-shadow: 0 0 0 4px var(--m3-state-focus);
    }

    /* ===== Menu hover contrast ===== */
    header .nav-link, header .nav-btn{
      border-radius: 12px !important;
    }
    header .nav-link:hover, header .nav-btn:hover,
    header .nav-link:focus-visible, header .nav-btn:focus-visible{
      background: var(--m3-primary) !important;
      color: var(--m3-on-primary) !important;
      border-color: rgba(0,0,0,.06) !important;
    }

    /* Submenu: high-contrast navy surface */
    .submenu{
      background: linear-gradient(180deg, var(--primary-2), var(--primary)) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      box-shadow: var(--m3-e2) !important;
    }
    .submenu a{
      color: rgba(255,255,255,.92) !important;
      font-weight: 900 !important;
    }
    .submenu a:hover, .submenu a:focus-visible{
      background: rgba(255,255,255,.10) !important;
      color: #fff !important;
      outline: none;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
    }
    .submenu a.active{
      background: rgba(160,150,30,.22) !important;
      color: #fff !important;
    }

    /* Mobile drawer tonal */
    .mobile-menu{
      background: color-mix(in srgb, #FFFFFF 84%, var(--m3-primary) 16%) !important;
      border-left: 1px solid var(--m3-outline) !important;
    }
    .mobile-menu a:hover, .mobile-menu .mgroup:hover{
      background: var(--m3-state-hover) !important;
      border-color: var(--m3-outline-variant) !important;
    }

    @supports not (color-mix: in srgb, #fff, #000){
      :root{
        --m3-surface-1: #F3F6FB;
        --m3-surface-2: #EDF2FA;
        --m3-surface-3: #E7EEF9;
        --m3-surface-4: #E1EAF7;
      }
      .mobile-menu{ background:#EEF2F8 !important; }
    }


    /* Alias selectors for submenu variants */
    .dropdown-menu, .nav-dropdown, .nav-submenu{ 
      background: linear-gradient(180deg, var(--primary-2), var(--primary)) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      box-shadow: var(--m3-e2) !important;
    }
    .dropdown-menu a, .nav-dropdown a, .nav-submenu a{
      color: rgba(255,255,255,.92) !important;
      font-weight: 900 !important;
    }
    .dropdown-menu a:hover, .nav-dropdown a:hover, .nav-submenu a:hover,
    .dropdown-menu a:focus-visible, .nav-dropdown a:focus-visible, .nav-submenu a:focus-visible{
      background: rgba(255,255,255,.10) !important;
      color: #fff !important;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
      outline:none;
    }

  
/* === v1.18.1 Stats polish === */
.stat-item{
  display:flex;
  align-items:center;
  gap:12px;
  background: linear-gradient(180deg,#ffffff,#f6f8fc);
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:14px 16px;
}
.stat-icon{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:rgba(30,58,138,.12);
  color:#1E3A8A;
  font-size:20px;
}
.stat-value{font-size:28px;font-weight:900;color:#0B1530;}
.stat-label{color:#475569;}


/* === v1.18.1 News images === */
.news-thumb{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:14px;
  margin-bottom:10px;
}


/* === v1.18.1 Topbar CTA contrast === */
.topbar .btn-signup{
  background:#A0961E;
  color:#0B1530 !important;
  font-weight:900;
}
.topbar .btn-login{
  background:#1E3A8A;
  color:#ffffff !important;
  font-weight:900;
}
.topbar .btn-signup:hover,
.topbar .btn-login:hover{
  filter:brightness(1.05);
}


/* === v1.18.2 Topbar login contrast fix === */
.topbar .btn-login{
  background:#0B1530 !important; /* deep navy */
  color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.25);
}
.topbar .btn-login:hover,
.topbar .btn-login:focus-visible{
  background:#162a5a !important;
  color:#FFFFFF !important;
}


/* === v1.18.3 logo as image === */
.brand .logo{
  width: 52px;
  height: 52px;
  display:block;
  object-fit: contain;
}
@media (max-width: 980px){
  .brand .logo{ width: 46px; height: 46px; }
}


/* === v1.18.4 layout tweaks === */
html.daily .hero-ref{
  min-height: 440px;
}
.header-wrap{
  padding-top: 20px;
  padding-bottom: 20px;
}


/* === v1.18.5 brand subtitle refinement === */
.brand .title span{
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: rgba(15,23,42,.70);
  font-weight: 800;
  letter-spacing: .08px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 58ch;
}


/* === v1.18.6 modern stats icons === */
.stat-item{
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* end custom template */

.article-list .article .article-header h2 a {
    font-size: small;
    font-weight: 500;
  font-family:var(--sarabun);
}

.article .article-info > span.category-name > a {
    font-weight: 500;
    font-family:var(--noto);
}
.article-info > span {
    font-size: small;
    font-family:var(--noto);
}
#sp-top {
    position: relative;
    z-index: 999;
    background: #e3e7f1 !important;
    color: var(--text) !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    /* color: black; */
}
#sppb-addon-1678152024668 .topbar-info li + li,.sp-module ul > li > a:hover {
    color: var(--text) !important;
}
#sppb-addon-1678152024668 .sp-module ul > li > a:hover {
    color: var(--text) !important;
}
#sppb-addon-1678152024668 .topbar-info {
    font-family: var(--mitr) !important;
    color: var(--text) !important;
}
#sppb-addon-1678152024668 a {
    color: var(--text) !important;
}
#sppb-addon-1678152024673 .topbar-social li a {
    color: var(--text);
}
section#member-service h2::after, section#news-section h2::after {
    background: linear-gradient(90deg, var(--header-gold), var(--primary-2));
}
.section-head h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--secondary), var(--primary-2));
    opacity: .95;
}
#daily-outstanding-news .project-item-style2 img {
    border-radius: 5px;
    height: 375px;
}
.s-footer-top .sft-right .sft-cc {
    color: white !important;
}
.sp-megamenu-parent .sp-dropdown {
    margin: 0;
    position: absolute;
    z-index: 1000000 !important;
}