.c1 { color: var(--primary); } 
.c2 { color: var(--secondary); } 
.c3 { color: var(--accent); }

p, ul, ol { margin: 1.5rem 0 !important; line-height: 2rem; }
ul li, ol li { margin: 1rem 0 1rem 3rem !important; line-height: 2rem; }
.bg-title { background-position: top center !important; }
.txtshadow { text-shadow: 1px 2px 2px #002e5b; }

table { width: 100%; text-align: center; border: 1px solid #dfdfdf; border-collapse: collapse; }
table th { color: #fff; padding: 0 1rem; font-size: 120%; font-weight: 400; background: #39c5de; border: none !important; }
table td { padding: 0 1rem; border: 1px solid #dfdfdf; color: #666; line-height: 20px; }
table tr:nth-child(odd) { background: #f2f2f2; }

.info ul { padding: 0; margin: 0; list-style: none; }
.info li { display: grid; grid-template-columns: 20% 80%; margin: 0; padding: 1rem; }
.info li:nth-child(odd) { background: #fafafa; }
.info li:nth-child(even) { background: #eee; }

header.header { position: relative !important; z-index: 1000 !important; overflow: visible !important; background: #008efe; height: calc(40px + 2rem); padding: 0; margin: 0; }
header.header .ba-section, header.header .top-L, header.header .top-R { background: transparent !important; }
header.header::before { content: ''; position: absolute; top: 0; left: 5px; width: 40vw; height: calc(100% + 2rem); background: #fff; box-shadow: 5px 5px 15px rgba(0,0,0,0.25); z-index: 1; transform: skewX(-20deg); }
header.header .ba-wrapper { position: relative; z-index: 10 !important; }

.home .slide-txt { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; min-height: 85vh !important; padding: 25vh 3vw !important; margin: 0 !important; overflow: visible !important; }
.home .slide-txt.blue { background-color: rgba(0,142,254,0.95) !important; }
.home .slide-txt.green { background-color: rgba(38,127,14,0.95) !important; }
.home .slide-txt.orange { background-color: rgba(255,154,0,0.95) !important; }
.home .slide-txt .ba-item-headline { width: auto !important; margin: 0 0 10px !important; padding: 0 !important; }
.home .slide-txt .headline-wrapper h2 { text-shadow: 3px 3px 0px #002e5b; line-height: 1.2; white-space: nowrap !important; overflow: visible !important; }
.home .slide-txt .box1 .headline-wrapper h2 { font-size: clamp(1rem,2vw,1.5rem) !important; font-weight: 600; }
.home .slide-txt .box2 .headline-wrapper h2 { font-size: clamp(2rem,5vw,5rem) !important; }

.footer-R { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%); }

.mainnav ul { margin: 0 !important; }
.mainnav ul li { margin: 0 1rem !important; }
.mainnav ul ul { margin: 1rem !important; padding: 0 !important; }
.mainnav ul ul li { margin: 0 !important; padding: 1rem !important; }
.mainnav .nav-header { position: relative; padding-right: 15px !important; cursor: pointer; }
.mainnav .nav-header::after { content: "\f103"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 0.8em; }
.mainnav li.deeper > span i.ba-icon-caret-right, .mainnav li.deeper > a i.ba-icon-caret-right { display: none; }
.mainnav .nav > li:last-child { position: relative; z-index: 1; }
.mainnav .nav > li:last-child > a { color: #fff !important; padding: 1rem 3rem !important; display: flex; align-items: center; }
.mainnav .nav > li:last-child::before { content: ''; position: absolute; inset: 0; background: var(--secondary); clip-path: polygon(15px 0, 100% 0, 100% 100%, 0% 100%); z-index: -1; transition: .3s; }
.mainnav .nav > li:last-child:hover::before { background: var(--accent); }
.mainnav .nav > li:last-child > a i { color: var(--accent) !important; margin-right: 8px; font-size: 1.2em; }
.mainnav .nav > li:last-child:hover > a i { color: #fff !important; }
.mainnav .mod-menu__sub { background: #ff9a00 !important; padding: 0 !important; border: none !important; box-shadow: 2px 5px 15px rgba(0,0,0,0.15) !important; border-radius: 0 !important; }
.mainnav .mod-menu__sub::before { content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; background: transparent; } /* สะพานล่องหน */
.mainnav .mod-menu__sub > li { border-bottom: 1px solid #fff !important; margin: 0 !important; }
.mainnav .mod-menu__sub > li:last-child { border-bottom: none !important; }
.mainnav .mod-menu__sub > li > a { color: #fff !important; padding: 12px 25px !important; display: flex !important; align-items: center; transition: background 0.2s; }
.mainnav .mod-menu__sub > li > a::before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; font-size: 1.1em; }
.mainnav .mod-menu__sub > li > a:hover { background: rgba(0,0,0,0.1) !important; }
.mainnav .mod-menu__sub > li.active > a { background: rgba(0,0,0,0.15) !important; }

.ba-blog-posts-wrapper .ba-blog-post:first-child { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 2rem; }
.ba-blog-posts-wrapper .ba-blog-post:first-child .ba-blog-post-image { width: 100% !important; max-width: 100% !important; height: 80vh !important; }
.ba-blog-posts-wrapper .ba-blog-post:first-child .ba-blog-post-image img,
.ba-blog-posts-wrapper .ba-blog-post:first-child .ba-blog-post-image a { width: 100% !important; height: 100% !important; object-fit: cover !important; background-position: center !important; }
.ba-blog-posts-wrapper .ba-blog-post:first-child .ba-blog-post-title { font-size: 2rem; }

@media (min-width: 769px) and (max-width: 1024px) {
    header.header::before { width: 50vw; }
}
@media (max-width: 991px) {
    .mainnav .nav > li:last-child { margin: 0 !important; }
    .mainnav .nav > li:last-child::before, .footer-R { clip-path: none; }
    .footer-R { text-align: center; }
    .info li { grid-template-columns: 100%; }
}
@media (max-width: 768px) {
    header.header::before { display: block !important; width: 60vw; }
}
@media (max-width: 420px) {
    header.header::before { width: 80vw; height: calc(100% + 1rem); }
}