:root{
    --primary-color: #1B3E85;
    --primary-pressed-color: rgba(3, 91, 161, 1);
    --light-blue-gray-color: #F3F7FC;
    --white-font-color: #fff;
    --yellow-font-color: #FCC419;
    --normal-text-color: #1F2A37;
    --secondary-text-color: #0E0E11;
    --primary-blue-color: #3268D5;
    --primary-blue-100-color: #DAECFF;
    --primary-blue-300-color: #86A6E6;
    --primary-blue-500-color: rgba(50, 104, 213, 1);
    --secondary-blue-color: #74C0FC;
    --secondary-blue-100-color: #D8EDFE;
    --secondary-blue-500-color: rgba(116, 192, 252, 1);
    --secondary-blue-700-color: #1093FA;
    --top-button-mobile-border-color: #DAE4F8;
    --bg-general-blue: #D0EBFF;
    --bg-light-blue: #E7F5FF;
    --bg-light-gray: #F9FAFB;
    --light-blue-shadow: rgba(231, 245, 255, 0.8);
    --error-400-button: #C35252;
    --error-400-color: #FF6B6B;
    --error-300-color: #FF9396;
    --error-600-color: rgba(229, 29, 29, 1);
    --warning-50-color: #FFFCEB;
    --warning-300-color: #FDD94C;
    --warning-400-color: #FCC419;
    --warning-600-color: #DA7E05;
    --success-color: #82C91E;
    --success-600-color: #619D13;
    --success-300-color: #B9EC56;
    --bg-gray: #E8E8ED;
    --slider-bullet-color: #0F172A99;
    --dark-disable-color: #9CA3AF;
    --text-muted-color: #717683;
    --dark-body-color: #4B5563;
    --mb-icon-menu: url("../../images/icons/mb-menu-icon.svg");
    --mb-icon-menu-x: url("../../images/icons/mb-menu-icon-x.svg");
    --icon-search: url("../../images/icons/search-icon.png");
    --mb-icon-font: url("../../images/icons/mb-font-icon.svg");
    --mb-icon-font-active: url("../../images/icons/mb-font-icon-active.svg");
    --white-transparent-color: rgba(255, 255, 255, 0.75);
    --white-shadow: rgba(255, 255, 255, 0.8);
    --bg-light-blue-gray: rgba(243, 247, 252, 1);
    --dark-border-color: #E5E7EB;
    --tab-icon-all: url("../../images/icons/all-square-icon.svg");
    --tab-icon-all-active: url("../../images/icons/all-square-icon-active.svg");
    --tab-icon-video: url("../../images/icons/video-icon.svg");
    --tab-icon-video-active: url("../../images/icons/video-icon-active.svg");
    --tab-icon-article: url("../../images/icons/article-icon.svg");
    --tab-icon-article-active: url("../../images/icons/article-icon-active.svg");
    --tab-icon-info-graphic: url("../../images/icons/info-graphic-icon.svg");
    --tab-icon-info-graphic-active: url("../../images/icons/info-graphic-icon-active.svg");
    --reload-icon-button: url("../../images/icons/reload-icon.svg");
    --reload-white-icon-button: url("../../images/icons/reload-icon-white.svg");
    --download-icon-button: url("../../images/icons/download-icon.svg");
    --download-white-icon-button: url("../../images/icons/download-icon-white.svg");
    --plus-icon-button: url("../../images/icons/plus-icon.svg");
    --plus-white-icon-button: url("../../images/icons/plus-icon-white.svg");
    --bg-light-alpha: rgba(255, 255, 255, 0.75);
}
body{
  font-family: "Kanit", sans-serif !important;
  font-weight: 400;
  font-style: normal;
}
input::placeholder, textarea::placeholder {
    color: var(--dark-disable-color) !important;
}
.top-bar{
    position: fixed;
    top:0;
    width: 100%;
    height: 56px;
    background-color: var(--primary-color);
    z-index: 4;
}
.top-bar-divider{
    height: 24px;
    background-color: var(--dark-border-color);
    width: 1px;
    margin: 8px 10px;
}
.top-bar-button{
    border-radius: 24px;
    background-color: var(--light-blue-gray-color);
    border:0;
    padding: 2px 16px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 14px;
    margin-top: 8px;
    line-height: 22px;
    height: 24px;
}
.top-bar-button.mobile{
    height: auto;
    padding: 8px 2px;
    font-size: 16px;
}
.size-button .top-bar-button{
    font-size: 16px;
}
.size-button .top-bar-button.active{
    background-color: var(--light-blue-gray-color);
    color: var(--primary-color);
}
.size-button .top-bar-button:disabled{
    opacity: 0.35;
    cursor: not-allowed;
}
html.theme-bw {
    filter: grayscale(100%);
}
.color-button .top-bar-button.active {
    background-color: var(--light-blue-gray-color);
    color: var(--primary-color);
}
.top-bar-button > img{
    margin-top: -3px;
}
.lang-selection .dropdown button,
.lang-selection .dropdown button:hover,
.lang-selection .dropdown button:focus,
.lang-selection .dropdown button:active{
    color: var(--white-font-color);
    background-color: var(--primary-color);
    border: 0;
}
.menu-panel{
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
}
.menu-container{
    height: 100%;
    background-color: var(--white-font-color);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    position:relative;
    box-shadow: 0px 2px 4px -1px rgba(15, 15, 16, 0.06);
    box-shadow: 0px 4px 4px 0px rgba(27, 62, 133, 0.25);
    
}
.navbar-expand-lg{
    width: 100%;
    position: fixed;
    top: 56px;
    z-index: 3;
    height: 68px;
}
#navbarFontContent.collapse:not(.show){
    display: none !important;
}
.call-button-panel-lg{
    position: absolute;
    display: none;
}
.call-button{
    border-radius: 24px;
    background-color: var(--primary-color);
    border:1px solid var(--top-button-mobile-border-color);
    padding: 5px 24px;
    color: var(--white-font-color);
    font-size: 20px;
    font-weight: 800;
    font-style: italic;
    height: 40px;
    margin-top: 8px;
}
.call-button > .yellow{
    color: var(--yellow-font-color);
}
.call-button > img{
    margin-top: -3px;
}
.nav-title{
    position: absolute;
    display: inline;
    color: var(--primary-color);
    background-color: var(--white-font-color);
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    margin-top: 20px;
}
.nav-title > small{
    display: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}
.nav-title > small > a{
    text-decoration: none;
    color: inherit;
}
.form-control.search-text{
    border-radius: 40px;
    border: 1.6px solid var(--primary-blue-color);
    height: 60px;
    font-size: 1.2rem;
}
.form-control.search-text-with-icon{
    border-radius: 40px;
    border: 1.6px solid var(--primary-blue-color);
    border-right: 0px solid var(--primary-blue-color);
    height: 60px;
    font-size: 1.2rem;
}
.form-control.search-text-with-icon + .input-group-text{
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    color: var(--primary-color);
    border-width: 1.6px;
    border-left-color: transparent;
    border-top-color: var(--primary-color);
    border-right-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    padding-right: 25px;
}
.dropdown-toggle.no-caret::after{
    border: 0;
}
.navbar-brand > img {
    margin-top: 10px;
    margin-left: 15px;
    width: 48px;
}
.mb-right-group{
    position: absolute;
    right: 15px;
    top: 15px;
}
.home-banner{
    position: relative;
}
.home-banner .bottom-cloud{
    position: absolute;
    bottom: -1px;
    width: 100%;
    z-index: 2;
}
.home-banner .slider{
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    position: relative;
}
.home-section{
    padding-top: 40px;
    padding-bottom: 60px;
}
.home-section.py-60{
    padding-top: 60px;
    padding-bottom: 60px;
}
.title-box{
    position: relative;
}
.title-box::after{
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 40px;
    height: 4px;
    background-color: var(--secondary-blue-color);
    border-radius: 24px;
    transform: translate(-50%, -50%);
}
.home-section-title{
    font-size: 32px;
    color: var(--normal-text-color);
    line-height: 48px;
    font-weight: 700;
    text-align: center;
}
.home-section-sub-title{
    font-size: 18px;
    color: var(--secondary-text-color);
    line-height: 27px;
    font-weight: 500;
    text-align: center;
}
.fw-bold{
    font-weight: 700;
}
.page-footer{
    margin-right: auto;
    margin-left: auto;
    padding-top: 60px;
    background-color: var(--primary-color);
}
.footer-comment-box{
    display: inline-block;
    background-color: var(--bg-light-blue);
    border-radius: 24px;
    padding: 16px 24px;
    width: 848px;
    max-width: 100%;
    min-height: 123px;
    position: relative;
}
.footer-comment-box .btn-send{
    padding: 8px 24px;
    border-radius: 24px;
    background-color: var(--primary-color);
    color: var(--white-font-color);
    font-size: 16px;
    line-height: 24px;
    height: 48px;
    margin-top:25px;
    border: 0;
}
.footer-comment-box .btn-send:hover, .footer-comment-box .btn-send:active, .footer-comment-box .btn-send:focus{
    background-color: var(--primary-pressed-color);
}
.footer-comment-emoji{
    cursor: pointer;
    position:relative;
    width: 48px;
    display: inline-block;
}
.footer-comment-emoji img{
    width: 48px;
    height: 48px;
}
.footer-comment-emoji .text{
    margin-top:5px;
    text-align: center;
    font-size: 11px;
    line-height: 16px;
}
.footer-title{
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
    color:var(--white-font-color);
}
.footer-text{
    color: var(--primary-blue-100-color);
    font-size: 16px;
    line-height: 24px;
}
.footer-input{
    height: 48px;
    background-color: var(--white-font-color);
    color: var(--normal-text-color);
}
/* WCAG 1.4.3 — เลิกใช้ alpha .65 ของ Bootstrap ให้ label เป็นสีทึบอ่านง่าย */
.form-floating > label{
    color: var(--dark-body-color);
    opacity: 1;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label{
    opacity: 1;
}
.btn-general-blue{
    background-color: var(--bg-general-blue);
}
.btn-general-blue:hover{
    background-color: var(--secondary-blue-color);
}
.footer-bottom-box{
    border-top: 0.5px solid var(--white-font-color);
    padding: 24px 0px;
    min-height: 68px;
}
.footer-bottom-box a, .footer-bottom-box p{
    color: var(--white-font-color);
    text-decoration: none;
    font-size: 12px;
}
.footer-bottom-divider{
    height: 18px;
    background-color: var(--white-font-color);
    width: 1px;
    margin: -3px 5px;
    display: inline-block;
}
.footer-super-text-call{
    font-weight: 700;
    font-style: Bold;
    font-size: 48px;
    line-height: 1;
    color: var(--white-font-color);
}
.section-card-box{
    border-radius: 24px;
    padding: 16px 10px 16px 24px;
    min-height: 152px;
}
.section-card-box .img-fluid{
    width: 120px;
}
.section-card-box.red{
    background-color: var(--error-300-color);
}
.section-card-box.yellow{
    background-color: var(--warning-300-color);
}
.section-card-box.green{
    background-color: var(--success-300-color);
}
.section-card-box .title{
    color: var(--normal-text-color);
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    line-height: 1;
}
.section-card-box .text{
    color: var(--normal-text-color);
    font-size: 16px;
    line-height: 1;
}
.section-card-box .button{
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius: 24px;
    height: 48px;
    padding: 11px 24px;
    border: 1px solid var(--primary-color);
    background: var(--white-font-color);
    color: var(--primary-color);
    width: 200px;
    line-height: 24px;

}
.section-card-box .button:hover, .section-card-box .button:focus, .section-card-box .button:active{
    background-color: var(--primary-color);
    color: var(--white-font-color);
}
.section-card-box .button > .arrow-icon{
    background: url('../../images/icons/section-card-arrow-right.svg') no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-top: -5px;
    margin-left: 5px;
    vertical-align: middle;
}
.section-card-box .button:hover > .arrow-icon, .section-card-box .button:focus > .arrow-icon, .section-card-box .button:active > .arrow-icon{
    background: url('../../images/icons/arrow-right-white.svg') no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-top: -5px;
    margin-left: 5px;
    vertical-align: middle;
}
.quote-slider{
    position:relative;
    margin-bottom: 30px;
}
.quote-slider-item{
    position: relative;
    border-radius: 16px;
    background-color: var(--bg-light-blue);
    z-index: 1;
    padding: 30px;
    height: 200px;
    box-shadow: 0 0px 5px 5px var(--light-blue-shadow);
    
}
.quote-slider-item .icon{
    position: absolute;
    top: -10px;
    left: 5px;
}
.quote-slider-item .arrow{
    position: absolute;
    bottom: -25px;
    right: 25px;
    z-index: 0;
}
.quote-slider-item .text{
    font-size: 16px;
    line-height: 24px;
    color: var(--dark-body-color);
}
.quote-slider-item .bottom-text{
    position: absolute;
    width:100%;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.quote-slider-item .bottom-text p.subject{
    font-size: 12px;
    color: var(--secondary-blue-700-color);
    padding-right:15px;
}
.quote-slider-item .bottom-text p.age{
    font-size: 12px;
    color: var(--primary-color);
    background-color: var(--bg-light-blue);
    font-style: italic;
    padding-right:15px;
    margin-bottom:5px;
}
.quote-icon{
    position:absolute;
    z-index: 2;
    margin-top: 160px;
    width: 80px;
}
.quote-button{
    display: inline-block;
    background-color: var(--error-400-button);
    color: var(--white-font-color);
    border-radius: 24px;
    padding: 8px 24px;
    height: 48px;
    text-decoration: none;
    font-size: 16px;
    line-height: 32px;
}
.quote-button:hover, .quote-button:focus, .quote-button:active{
    background-color: var(--error-600-color);
}
.quote-button .arrow-icon{
    background: url('../../images/icons/arrow-right-white.svg') no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-top: -5px;
    margin-left: 5px;
    vertical-align: middle;
}
.vdo-slider{
    position:relative;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
.vdo-button{
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 16px;
    border-radius: 24px;
    padding: 8px 24px;
    height: 48px;
    line-height: 32px;
}
.vdo-button:hover, .vdo-button:focus, .vdo-button:active {
    background-color: var(--primary-blue-100-color);
    color: var(--primary-color);
}
.vdo-button .arrow-icon{
    background: url('../../images/icons/section-card-arrow-right.svg') no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-top: -5px;
    margin-left: 5px;
    vertical-align: middle;
}
.article-slider{
    position:relative;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
.article-button{
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 16px;
    border-radius: 24px;
    padding: 8px 24px;
    height: 48px;
    line-height: 32px;
}
.article-button:hover, .article-button:focus, .article-button:active {
    background-color: var(--primary-color);
    color: var(--white-font-color);
}
.article-button .arrow-icon{
    background: url('../../images/icons/section-card-arrow-right.svg') no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-top: -5px;
    margin-left: 5px;
    vertical-align: middle;
}
.article-button:hover .arrow-icon, .article-button:focus .arrow-icon, .article-button:active .arrow-icon{
    background: url('../../images/icons/arrow-right-white.svg') no-repeat;
}
.nav-tab-cat{
    display: inline-block;
    max-width: 100%;
    border-radius: 40px;
    padding: 8px 16px;
    overflow: hidden;
}
.nav-tab-mb-scroll{
    overflow: auto;
}
.nav-tab-wrapper{
    width: max-content;
}
.nav-tab-cat.white{
    background-color: var(--white-font-color);
}
.nav-tab-cat.gray{
    background-color: var(--bg-gray);
}
.nav-tab-cat .item{
    cursor: pointer;
    display: inline-block;
    padding: 8px 24px;
    color: var(--normal-text-color);
}
.nav-tab-cat .item:hover{
    color: var(--primary-color);
}
.nav-tab-cat .item.active{
    border-radius: 24px;
    background-color: var(--primary-color);
    color: var(--white-font-color);
}
.inner-tab-cat{
    display: inline-block;
    max-width: 100%;
    border-radius: 40px;
    padding: 8px 16px;
    overflow: hidden;
}
.inner-tab-mb-scroll{
    overflow: auto;
}
.inner-tab-wrapper{
    width: max-content;
}
.inner-tab-cat .item{
    cursor: pointer;
    display: inline-block;
    padding: 8px 24px;
    color: var(--normal-text-color);
    border-bottom: 4px solid var(--dark-border-color);
}
.inner-tab-cat .item .icon{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
}
.inner-tab-cat .item .icon.all{
    background-image: var(--tab-icon-all);
}
.inner-tab-cat .item .icon.video{
    background-image: var(--tab-icon-video);
}
.inner-tab-cat .item .icon.article{
    background-image: var(--tab-icon-article);
}
.inner-tab-cat .item .icon.info-graphic{
    background-image: var(--tab-icon-info-graphic);
}
.inner-tab-cat .item.active .icon.all{
    background-image: var(--tab-icon-all-active);
}
.inner-tab-cat .item.active .icon.video{
    background-image: var(--tab-icon-video-active);
}
.inner-tab-cat .item.active .icon.article{
    background-image: var(--tab-icon-article-active);
}
.inner-tab-cat .item.active .icon.info-graphic{
    background-image: var(--tab-icon-info-graphic-active);
}
.inner-tab-cat .item:hover{
    color: var(--primary-color);
}
.inner-tab-cat .item.active{
    font-weight: 700;
    border-bottom: 4px solid var(--primary-blue-500-color);
    color: var(--primary-color);
}
.vdo-slider-item{
    background-color: var(--white-font-color);
    padding: 16px;
    border-radius: 24px;
    margin-left: 15px;
    margin-right: 15px;
    box-shadow: 0 0px 5px 5px var(--white-shadow);
}
.vdo-slider-item.shadow-light-blue{
    border: 1px solid var(--bg-light-blue);
    box-shadow: 0px 1px 4px 0px rgba(116, 192, 252, 0.2);
}
.vdo-slider-item .thumbnail > img{
    border-radius: 24px;
    width: 100%;
}
.vdo-slider-item .vdo{
    border-radius: 24px;
    overflow: hidden;
}
.vdo-slider-item .vdo iframe{
    width: 100%;
    height: 100%;
}
.vdo-slider-item .content-box .time{
    color: var(--text-muted-color);
    font-size: 12px;
    line-height: 28px;
}
.vdo-slider-item .content-box .time img{
    margin-top: -4px;
}
.vdo-slider-item .content-box .tag{
    border-radius: 24px;
    padding: 4px 12px;
    color: var(--white-font-color);
    font-size: 12px;
}
.vdo-slider-item .content-box .tag.blue{
    background-color: var(--primary-color);
}
.vdo-slider-item .content-box .title{
    font-weight: 700;
    font-size: 18px;
    color: var(--normal-text-color);
}
.vdo-slider-item .content-box .text{
    font-size: 16px;
    color: var(--dark-body-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 72px;
}
.slider-nav{
    position:absolute;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    cursor: pointer;
    padding: 7px;
    z-index: 2;
}
.vdo-slider .slider-nav.swiper-button-prev, .vdo-slider .slider-nav.swiper-button-next{
    display: none;
}
.article-slider .slider-nav.swiper-button-prev, .article-slider .slider-nav.swiper-button-next{
    display: none;
}
.article-slider .vdo-slider-item{
    cursor: pointer;
    transition: transform 0.3s ease;
}
.article-slider .vdo-slider-item:hover{
    transform: scale(1.1);
}
.article-slider .swiper-slide{
    overflow: visible;
}
.article-slider .vdo-slider-item .thumbnail > img{
    height: 200px;
    object-fit: cover;
}
.img-full{
    width: 100%;
}
.navbar-toggler{
    border: 0;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}
.navbar-toggler{
    padding-left: 5px;
    padding-right: 5px;
}
.navbar-toggler .navbar-toggler-search-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 10.5C17 6.91015 14.0899 4 10.5 4C6.91015 4 4 6.91015 4 10.5C4 14.0899 6.91015 17 10.5 17C12.2885 17 13.9078 16.2772 15.083 15.1084C15.0841 15.1073 15.0858 15.1066 15.0869 15.1055C15.09 15.1024 15.0935 15.0988 15.0967 15.0957C16.2727 13.9195 17 12.2947 17 10.5ZM19 10.5C19 12.49 18.3135 14.3182 17.168 15.7666L21.7061 20.292C22.0971 20.6819 22.0979 21.315 21.708 21.7061C21.3181 22.0971 20.685 22.0979 20.2939 21.708L15.752 17.1797C14.3059 18.3182 12.4833 19 10.5 19C5.80558 19 2 15.1944 2 10.5C2 5.80558 5.80558 2 10.5 2C15.1944 2 19 5.80558 19 10.5Z' fill='%231F2A37'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.navbar-toggler[aria-expanded=false] .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.6667 22.6667C27.403 22.6667 28 23.2636 28 24C28 24.7364 27.403 25.3333 26.6667 25.3333H5.33333C4.59695 25.3333 4 24.7364 4 24C4 23.2636 4.59695 22.6667 5.33333 22.6667H26.6667ZM26.6667 14.6667C27.403 14.6667 28 15.2636 28 16C28 16.7364 27.403 17.3333 26.6667 17.3333H5.33333C4.59695 17.3333 4 16.7364 4 16C4 15.2636 4.59695 14.6667 5.33333 14.6667H26.6667ZM26.6667 6.66667C27.403 6.66667 28 7.26363 28 8.00001C28 8.73638 27.403 9.33334 26.6667 9.33334H5.33333C4.59695 9.33334 4 8.73638 4 8.00001C4 7.26363 4.59695 6.66667 5.33333 6.66667H26.6667Z' fill='%231F2A37'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.0573 3.05719C27.578 2.53649 28.422 2.53649 28.9427 3.05719C29.4634 3.57789 29.4634 4.42191 28.9427 4.94261L17.8854 15.9999L28.9427 27.0572C29.4634 27.5779 29.4634 28.4219 28.9427 28.9426C28.422 29.4633 27.578 29.4633 27.0573 28.9426L16 17.8853L4.94269 28.9426C4.42199 29.4633 3.57797 29.4633 3.05727 28.9426C2.53657 28.4219 2.53657 27.5779 3.05727 27.0572L14.1146 15.9999L3.05727 4.94261C2.53657 4.42191 2.53657 3.57789 3.05727 3.05719C3.57797 2.53649 4.42199 2.53649 4.94269 3.05719L16 14.1145L27.0573 3.05719Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.navbar-toggler[aria-expanded=false] .navbar-toggler-font-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.8182 9.33367C17.8182 10.3378 17.0041 11.1519 16 11.1519C14.9959 11.1519 14.1818 10.3378 14.1818 9.33367C14.1818 8.32952 14.9959 7.51549 16 7.51549C17.0041 7.51549 17.8182 8.32952 17.8182 9.33367Z' fill='%231F2A37'/%3E%3Cpath d='M8.78945 11.9807C8.57775 12.6158 8.92098 13.3022 9.55606 13.5139C9.76853 13.5844 9.98271 13.6501 10.1971 13.7144C10.5894 13.8321 11.1383 13.9889 11.7666 14.146C12.4716 14.3222 13.3102 14.5076 14.1555 14.6336C14.0997 15.7157 13.9642 16.4921 13.8383 17.0072L11.2795 22.1249C10.9801 22.7237 11.2228 23.4518 11.8215 23.7512C12.4203 24.0506 13.1484 23.8078 13.4478 23.2092L16 18.1047L18.5522 23.2092C18.8516 23.8078 19.5796 24.0506 20.1784 23.7512C20.7772 23.4518 21.0199 22.7237 20.7205 22.1249L18.1617 17.0072C18.0357 16.4921 17.9002 15.7157 17.8445 14.6336C18.6898 14.5076 19.5284 14.3222 20.2333 14.146C20.8617 13.9889 21.4105 13.8321 21.8028 13.7144C22.0158 13.6505 22.2284 13.5851 22.4394 13.5154C23.0619 13.3088 23.4183 12.604 23.2105 11.9807C22.9989 11.3456 22.3125 11.0024 21.6775 11.214C21.4881 11.2766 21.2973 11.3351 21.1063 11.3924C20.741 11.502 20.2292 11.6482 19.6454 11.7941C18.4504 12.0929 17.0556 12.364 16 12.364C14.9443 12.364 13.5496 12.0929 12.3546 11.7941C11.7708 11.6482 11.259 11.502 10.8937 11.3924C10.705 11.3358 10.5167 11.2777 10.3295 11.2163C9.69979 11.0081 9.0005 11.3475 8.78945 11.9807Z' fill='%231F2A37'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29.3333 16.0003C29.3333 23.3642 23.3638 29.3337 16 29.3337C8.63618 29.3337 2.66663 23.3642 2.66663 16.0003C2.66663 8.63654 8.63618 2.66699 16 2.66699C23.3638 2.66699 29.3333 8.63654 29.3333 16.0003ZM5.09915 16.0003C5.09915 22.0207 9.97962 26.9012 16 26.9012C22.0204 26.9012 26.9009 22.0207 26.9009 16.0003C26.9009 9.97999 22.0204 5.09952 16 5.09952C9.97962 5.09952 5.09915 9.97999 5.09915 16.0003Z' fill='%231F2A37'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-font-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--mb-icon-font-active);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
#searchModal {
    margin-top: 48px;
}
#searchModal .modal-dialog{
    max-width: 100%;
    margin-right: 0px;
    margin-left: 0px;
}
#searchModal .modal-content {
    border-radius: 0px;
}
#searchModal .modal-header{
    border-bottom: 0px;
}
#searchModal .btn-close{
    color: #000;
    opacity: 1;
    margin-top: -15px;
    background: transparent var(--bs-btn-close-bg) center / 1.5em auto no-repeat;
}
.bg-white{
    background-color: var(--white-font-color) !important;
}
.bg-transparent-white{
    background-color: var(--white-transparent-color) !important;
}
.navbar-expand-lg .navbar-nav .nav-link:hover, .navbar-expand-lg .navbar-nav .nav-link:focus, .navbar-expand-lg .navbar-nav .nav-link:active{
    color: var(--primary-color)
}
.navbar-nav .nav-link{
    background-color: var(--white-font-color);
}
.agency-image{
    text-align: center;
    margin-bottom: 1rem;
}
.agency-image > img{
    width: 152px;
}
.content{
    position: relative;
}
.content .content-header{
    position: relative;
    padding-top: 100px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    min-height: 240px;
    background-color: var(--secondary-blue-500-color);
}
.content .content-header .title{
    font-size: 48px;
    font-weight: 700;
    line-height: 72px;
    color: var(--normal-text-color);
    margin-top: 45px;
    text-shadow: 0px 1px rgba(239, 247, 255, 1);

}
.content .content-header .icon-box{
    display: inline-block;
    width: 200px;
}
.content .content-header .bottom-cloud{
    position: absolute;
    bottom: -1px;
    width: 100%;
    z-index: 2;
}
.content .content-body{
    background-color: var(--bg-light-blue-gray);
    padding-top:40px;
    padding-bottom:60px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
.content .content-body.white{
    background-color: var(--white-font-color);
}
.breadcrumb-item {
    font-size: 16px;
    line-height: 24px;
    color: var(--dark-body-color);
}
.breadcrumb-item a{
    color: var(--dark-body-color);
    text-decoration: none;
}
.breadcrumb-item.active {
    color: var(--dark-body-color);
}
.breadcrumb-item+.breadcrumb-item::before {
    margin-top: 2px;
    color: var(--dark-body-color);
    content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 5L12.5 10L7.5 15' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.knowledge-item{
    cursor: pointer;
    background-color: var(--white-font-color);
    padding-bottom: 16px;
    border-radius: 24px;
    box-shadow: 0px 1px 4px 0px rgba(116, 192, 252, 0.2);
    border: 1px solid var(--bg-light-blue);
    cursor: pointer;
    transition: transform 0.3s ease;
}
.knowledge-item:hover{
    transform: scale(1.1);
}
.knowledge-item .thumbnail{
    position: relative;
}
.knowledge-item .thumbnail .badge-overlay{
    position: absolute;
    padding: 8px 12px;
    background-color: var(--bg-light-alpha);
    border-radius: 70.45px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    height: 32px;
    top: 15px;
    left: 15px;
    z-index: 1;
}
.knowledge-item .thumbnail .badge-overlay .icon{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
}
.knowledge-item .thumbnail .badge-overlay .icon.video{
    background-image: var(--tab-icon-video-active);
}
.knowledge-item .thumbnail .badge-overlay .icon.article{
    background-image: var(--tab-icon-article-active);
}
.knowledge-item .thumbnail .badge-overlay .icon.info-graphic{
    background-image: var(--tab-icon-info-graphic-active);
}
.knowledge-item .thumbnail > img{
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.knowledge-item .content-box{
    padding: 8px 15px;
}
.knowledge-item .content-box .time{
    color: var(--text-muted-color);
    font-size: 12px;
    line-height: 28px;
}
.knowledge-item .content-box .time img{
    margin-top: -4px;
}
.knowledge-item .content-box .tag{
    border-radius: 24px;
    padding: 4px 12px;
    color: var(--white-font-color);
    font-size: 12px;
}
.knowledge-item .content-box .tag.blue{
    background-color: var(--primary-color);
}
.knowledge-item .content-box .title{
    font-weight: 700;
    font-size: 18px;
    color: var(--normal-text-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.knowledge-item .content-box .text{
    font-size: 16px;
    color: var(--dark-body-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 72px;
}
.outline-button{
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 24px;
    height: 48px;
    padding: 11px 24px;
    border: 1px solid var(--primary-color);
    background: var(--white-font-color);
    color: var(--primary-color);
    min-width: 192px;
    line-height: 24px;
}
.outline-button .icon{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
}
.outline-button .icon.reload{
    background-image: var(--reload-icon-button);
}
.outline-button .icon.download{
    background-image: var(--download-icon-button);
}
.outline-button .icon.plus{
    background-image: var(--plus-icon-button);
}
.outline-button:hover, .outline-button:focus, .outline-button:active{
    background-color: var(--primary-color);
    color: var(--white-font-color);
    border: 1px solid var(--primary-blue-100-color);
}
.outline-button:hover .icon.reload, .outline-button:focus .icon.reload, .outline-button:active .icon.reload{
    background-image: var(--reload-white-icon-button);
}
.outline-button:hover .icon.download, .outline-button:focus .icon.download, .outline-button:active .icon.download{
    background-image: var(--download-white-icon-button);
}
.outline-button:hover .icon.plus, .outline-button:focus .icon.plus, .outline-button:active .icon.plus{
    background-image: var(--plus-white-icon-button);
}
.article-title{
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    color: var(--normal-text-color);
}
.article-zone .time{
    color: var(--text-muted-color);
    font-size: 12px;
    display: inline-block;
}
.article-zone .time img{
    margin-top: -4px;
}
.tag{
    border-radius: 24px;
    padding: 4px 12px;
    color: var(--dark-body-color);
    font-size: 12px;
    display: inline-block;
    background-color: var(--bg-gray);
}
.tag.blue{
    color: var(--white-font-color);
    background-color: var(--primary-color);
}
.article-zone .social-share{
    color: var(--primary-color);
    font-size: 16px;
    line-height: 24px;
    display:inline-block;
}
.article-zone .social-share .divider{
    height: 48px;
    background-color: var(--dark-disable-color);
    width: 1px;
    margin: -20px 5px;
    display: inline-block;
}
.article-zone .detail{
    padding-top: 25px;
    padding-bottom: 5px;
}
.article-zone .detail p{
    font-size: 16px;
    color: var(--dark-body-color);

}
.article-zone .detail h3{
    font-size: 20px;
    font-weight: 700;
    color: var(--normal-text-color);
}
.article-zone .detail .knowledge-content-image{
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.article-zone .detail .knowledge-content-table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 16px 0;
}
.article-zone .detail .knowledge-content-table th,
.article-zone .detail .knowledge-content-table td{
    min-width: 90px;
    border: 1px solid var(--dark-border-color);
    padding: 8px 10px;
    vertical-align: top;
}
.article-zone .detail .knowledge-content-table th{
    background-color: var(--bg-gray);
    color: var(--normal-text-color);
    font-weight: 700;
}
.article-zone .detail .knowledge-layout-grid{
    display: grid;
    gap: 16px;
    margin: 18px 0;
}
.article-zone .detail .knowledge-layout-grid--2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.article-zone .detail .knowledge-layout-grid--3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.article-zone .detail .knowledge-layout-column{
    min-width: 0;
}
.article-zone .tag-footer{
    font-size: 16px;
    color: var(--dark-body-color);
}
.complain-menu{
    border-radius: 24px;
    border: 1px solid var(--dark-border-color);
    background-color: var(--white-font-color);
    text-align: center;
    padding: 16px 24px;
    cursor: pointer;
}
.complain-menu.active{
    background-color: var(--primary-color);
    border: 1px solid var(--secondary-blue-700-color);
}
.complain-menu .menu-icon{
    width: 120px;
    display: inline-block;
}
.complain-menu .menu-title{
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    color: var(--normal-text-color);
}
.complain-menu .menu-subtitle{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--normal-text-color);
}
.complain-menu.active .menu-title{
    color: var(--white-font-color);
}
.complain-menu.active .menu-subtitle{
    color: var(--white-font-color);
}
.form-card{
    background-color: var(--white-font-color);
    border-radius: 24px;
    padding: 40px 24px;
    border: 0;
}
.form-card hr{
    color: var(--bg-light-blue-gray);
    opacity: 1;
    border-top: 3px solid;
    margin-left: -24px;
    margin-right: -24px;
}
.form-label{
    color: var(--normal-text-color);
}
.main-button-primary{
    padding: 11px 24px;
    border-radius: 24px;
    background-color: var(--primary-color);
    color: var(--white-font-color);
    font-size: 16px;
    line-height: 24px;
    height: 48px;
    border: 0;
}
.main-button-primary:hover, .main-button-primary:active, .main-button-primary:focus{
    background-color: var(--primary-pressed-color);
}
.full-width{
    width: 100% !important;
}
.button-search-icon{
    background: url('../../images/icons/search-icon-white.svg') no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-top: -5px;
    margin-right: 5px;
    vertical-align: middle;
}
.alert-custom{
    padding: 24px;
    border-radius: 16px;
    font-size: 16px;
    color: var(--dark-body-color);
}
.alert-custom p{
    margin-bottom: 0px;
}
.alert-custom-icon{
    display: flex;
}
.alert-custom-icon .icon{
    width: 48px;
    margin-right: 15px;
}
.alert-custom .alert-custom-heading{
    color: var(--normal-text-color);
    font-size: 18px;
    font-weight: 700;
}
.alert-custom-warning{
    border:1px solid var(--warning-300-color);
    background-color: var(--warning-50-color);
}
.main-p-space{
    padding-top: 180px !important;
    padding-bottom: 50px !important;
}
.heading1{
    font-size: 24px;
    line-height: 36px;
    color: var(--normal-text-color);
    font-weight: 700;
}
.heading2{
    font-size: 20px;
    line-height: 30px;
    color: var(--normal-text-color);
}
.heading3{
    font-size: 18px;
    line-height: 27px;
    font-weight: 700;
    color: var(--normal-text-color);
}
.head-display{
    font-size: 48px;
    line-height: 72px;
    color: var(--primary-color);
    font-weight: 700;
}
.head-title{
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
}
.subtitle2{
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
}
.body1-reg{
    font-size: 16px;
    line-height: 24px;
    color: var(--normal-text-color);
}
.body1-bold{
    font-size: 16px;
    line-height: 24px;
    color: var(--normal-text-color);
    font-weight: 700;
}
.body2-reg{
    font-size: 14px;
    line-height: 22px;
}
.body2-bold{
    font-size: 14px;
    line-height: 22px;
    color: var(--normal-text-color);
    font-weight: 700;
}
.label-reg{
    font-size: 12px;
    line-height: 28px;
    color: var(--dark-body-color);
}
.text-inherit{
    color: inherit !important;
}
.text-normal{
    color: var(--normal-text-color);
}
.text-primary{
    color: var(--primary-color) !important;
}
.text-secondary{
    color: var(--secondary-text-color);
}
.text-success-600{
    color: var(--success-600-color);
}
.text-danger-600{
    color: var(--error-600-color)
}
.text-warning-600{
    color: var(--warning-600-color);
}
.text-secondary-blue-700{
    color: var(--secondary-blue-700-color);
}
.text-dark-disable{
    color: var(--dark-disable-color);
}
.text-dark-body{
    color: var(--dark-body-color);
}
.form-select.is-invalid, .form-control.is-invalid{
    background-color: #FEF2F2;
    border-color: var(--error-600-color);
}
.svg-icon-text{
    margin-top: -5px;
}
.upload-box{
    display: block;
    border-radius: 16px;
    background-color: var(--light-blue-gray-color);
    border: 0;
    padding: 8px;
}
.upload-box.active, .upload-box:hover{
    background-color: var(--light-blue-gray-color);
}
.upload-box .inner{
    cursor: pointer;
    border-radius: 8px;
    border: 0;
    display: block;
    background-color: var(--white-font-color);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%239CA3AF' stroke-width='1' stroke-dasharray='4%2c4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.upload-box.active .inner, .upload-box:hover .inner{
    background-color: var(--bg-light-blue);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%233268D5' stroke-width='1' stroke-dasharray='4%2c4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.upload-box.active .body1-bold, .upload-box.active .label-reg, .upload-box:hover .body1-bold, .upload-box:hover .label-reg{
    color: var(--primary-color);
}
.input-group-text.no-bg{
    background-color: transparent;
}
.form-control.no-border-r{
    border-right: 0;
}
/* ── Complain Form Component ── */

/* Pill option buttons (Section 1, 2, 3) */
.pill-option {
    border: 1px solid var(--dark-border-color);
    color: var(--dark-body-color);
    background: transparent;
    border-radius: 24px;
    padding: 8px 24px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
    white-space: nowrap;
}
.pill-option:hover {
    border-color: var(--primary-blue-500-color);
    color: var(--primary-color);
}
.pill-option--checked {
    border-color: var(--primary-blue-500-color);
    color: var(--primary-color);
    background-color: var(--secondary-blue-100-color);
}

/* Contact option cards (Section 7) */
.contact-option {
    border: 1.5px solid var(--dark-disable-color);
    color: var(--normal-text-color);
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s, background-color 0.15s;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
}
.contact-option--checked {
    border-color: var(--primary-blue-500-color);
    background-color: var(--bg-light-blue);
}
.contact-radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--dark-disable-color);
    flex-shrink: 0;
    transition: border-color 0.15s, background-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-radio-dot.active {
    border-color: var(--primary-blue-500-color);
    background-color: var(--primary-blue-500-color);
}
.contact-radio-dot.active::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

/* Image preview grid */
.image-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.preview-thumb {
    position: relative;
    width: 186px;
    height: 120px;
}
.preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--dark-border-color);
}
.preview-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Media (video/audio) file list */
.media-file-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.media-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--dark-border-color);
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: 'Kanit', sans-serif;
    color: var(--dark-body-color);
}
.media-file-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.media-file-remove {
    background: none;
    border: none;
    color: var(--dark-disable-color);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}
.media-file-remove:hover { color: var(--error-400-color); }
.form-check.consent-grey{
    background-color: var(--bg-gray);
    padding: 16px 24px;
    margin-left: -24px;
    margin-right: -24px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.form-check.consent-grey .form-check-input{
    float: none;
    margin-left: 0;
    margin-top: 4px;
    flex-shrink: 0;
}
.form-check.consent-grey .form-check-label{
    flex: 1 1 0;
    min-width: 0;
}
.form-check.consent-grey > div{
    flex: 0 0 100%;
}
.ce-block__content{
    max-width: inherit;
}
.cdx-input.image-tool__caption{
    border: 0 !important;
}

.alert-warning{
    color: var(--warning-600-color);
    background-color: var(--warning-50-color);
    border: 0;
}
.w-max-content{
    min-width: 0;
    width: max-content !important;
}
.case-box{
    border-radius: 24px;
    background-color: var(--white-font-color);
    padding: 40px;
}
.case-box .inner-box{
    border-radius: 16px;
    background-color: var(--bg-light-gray);
    border: 1px solid var(--dark-border-color);
    padding: 24px;
}
.card-box{
    border: 1px solid var(--dark-border-color);
    border-radius: 24px;
    background-color: var(--white-font-color);
    padding: 24px;
}
.card-box .header{
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    background-color: var(--primary-color);
    color: var(--white-font-color);
    margin-left: -24px;
    margin-right: -24px;
    margin-top: -24px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-right: 24px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}
.card-box-lg{
    border: 1px solid var(--primary-color);
    border-radius: 24px;
    background-color: var(--white-font-color);
    padding: 16px 40px;
}
.card-box-lg .header{
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    background-color: var(--primary-color);
    color: var(--white-font-color);
    margin-left: -40px;
    margin-right: -40px;
    margin-top: -16px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 40px;
    padding-right: 40px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}
.card-box-lg .header-filter{
    background-color: var(--primary-color);
    color: var(--white-font-color);
    margin-left: -40px;
    margin-right: -40px;
    margin-top: -16px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 40px;
    padding-right: 40px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}
.card-box-lg .header-filter .form-control{
    padding: 0.65rem 0.75rem;
}
.card-box-lg hr{
    margin: 0px -40px;
    color: var(--dark-border-color);
    opacity: 1;
}
.contact-detail-box{
    min-height: 260px;
}
.contact-footer-image{
    width: 120px;
    max-width: 100%;
}
 .table-stat{

}
.rounded-table{
    border-radius: 24px;
    border: 1px solid var(--dark-border-color);
}
.table-stat th{
    background-color: var(--bg-gray);
    padding: 16px 24px;
}
.table-stat td{
    padding: 8px 24px;
    height: 48px;
    font-size: 16px;
    line-height: 24px;
}
.bg-light-blue{
    background-color: var(--bg-light-blue);
}
.bg-general-blue{
    background-color: var(--bg-general-blue) !important;
}
.bg-light-blue-gray{
    background-color: var(--light-blue-gray-color);
}
.bg-primary-blue-100{
    background-color: var(--primary-blue-100-color);
}
.bg-primary{
    background-color: var(--primary-color) !important;
}
.rounded-image{
    border-radius: 24px;
}
.left-col-100{
    width: 100px;
}
.form-control:focus {
    border-color: var(--secondary-blue-700-color);
    outline: 0;
    box-shadow: none;
}
.form-control:focus + .input-group-text{
    border-top-color: var(--secondary-blue-700-color);
    border-right-color: var(--secondary-blue-700-color);
    border-bottom-color: var(--secondary-blue-700-color);
}
.form-select:focus {
    border-color: var(--secondary-blue-700-color);
    outline: 0;
    box-shadow: none;
}
.audio-tts{
    cursor: pointer;
}
.audio-tts.is-playing{
    color: var(--primary-color);
    animation: audio-tts-pulse 1s ease-in-out infinite;
}
@keyframes audio-tts-pulse{
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.custom-tooltip{
    --bs-tooltip-bg: var(--white-font-color) !important;
    --bs-tooltip-color: var(--primary-color);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-border-radius: 8px;
    border: 1px solid var(--primary-blue-100-color) !important;
    box-shadow: 0px 8px 24px 0px rgba(27, 62, 133, 0.12) !important;
    opacity: 1;
    font-size: 14px;
    font-family: 'Kanit', sans-serif ;
}
[data-bs-custom-class="custom-tooltip"]{
    padding: 0px 6px;
    border-radius: 50%;
    color: var(--primary-color);
}
[data-bs-custom-class="custom-tooltip"]:hover{
    background-color: var(--bg-light-blue);
}
.form-check.consent-grey [data-bs-custom-class="custom-tooltip"]{
    padding: 3px 6px;
}
.custom-tooltip .tooltip-inner{
    max-width: 375px;
}
.custom-tooltip .tooltip-arrow::before{
    border-top-color: var(--primary-blue-300-color) !important;
}
.faq-row{
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}
.faq-row hr{
    color: var(--dark-border-color);
    opacity: 1;
    border-top: 1px solid;
    margin-left: -24px;
    margin-right: -24px;
}
.faq-row:last-child{
    margin-bottom: 0.5rem;
}
.faq-row:last-child hr{
    display: none;
}
.collapse-faq{
    margin-bottom: 15px;
}
.collapse-faq .subtitle2 {
    color: var(--normal-text-color);
}
.collapse-faq[aria-expanded="true"] .subtitle2 {
    color: var(--primary-color);
}
.collapse-faq .caret{
    transition: transform 0.3s ease;
}
.collapse-faq[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}
#sitemapCollapse .svg-icon-text{
    transition: transform 0.3s ease;
}
#sitemapCollapse[aria-expanded="true"] .svg-icon-text{
    transform: rotate(180deg);
}
#sitemapPanel .card-sitemap{
    border-radius: 24px;
    padding: 16px 10px 16px 24px;
    border: 0.5px solid var(--bg-general-blue);
}
#sitemapPanel .body1-bold{
    color: var(--white-font-color);
}
#sitemapPanel .card-sitemap a{
    color: var(--primary-blue-100-color);
    text-decoration: none;
}
.collapse-faq + .collapse .card-body, .collapse-faq + .collapsing .card-body{
    background-color: var(--bg-light-blue-gray);
    border-radius: 8px;
    padding: 8px 16px;
    border: none;
} 
.filter-tag-button{
    border-radius: 24px;
    border: 1px solid var(--dark-body-color);
    color: var(--dark-body-color);
    padding: 8px 24px;
    background-color: var(--white-font-color);
}
.filter-tag-button.active, .filter-tag-button:hover{
    background-color: var(--primary-color);
    color: var(--white-font-color);
}
.search-item{
    position: relative;
    border-radius: 24px;
    border: 1px solid var(--dark-border-color);
    overflow: hidden;
    margin-bottom: 25px;
}
.search-item .thumbnail{
    position: relative;
}
.search-item .thumbnail img{
    max-width: 100%;
}
.search-item .text{
    overflow: hidden;
}
.search-item .arrow{
    display: none;
}
.search-paging .nav{
    display: inline-block;
    border-radius: 50%;
    padding: 8px 16px;
    background-color: var(--primary-color);
}
.search-paging .nav.disabled{
    background-color: var(--dark-disable-color);
}
.search-paging .number{
    display: inline-block;
    color: var(--dark-body-color);
    padding: 8px 16px;
    border-radius: 50%;
    text-decoration: none;
}
.search-paging .number.active{
    color: var(--primary-color);
    border: 1px solid var(--primary-color)
}
.card-box ul, p{
    margin-bottom: 0px;
}
.bird-alive:hover {
    animation:
        bird-hop .55s ease-in-out infinite,
        bird-tilt .7s ease-in-out infinite;
}

.bird-banner{
    display: none;
    position: fixed;
    width: 140px;
    height: 130px;
    bottom: 0px;
    z-index: 3;
    right: 0;
}
.bird-banner img.bird-body{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    right:0;
}
.bird-banner img.facebook-flag{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    right:-2px;

    transform-origin: 50% 90%;

    animation: sign-wave 1.8s ease-in-out infinite;
}
@keyframes sign-wave {
  0%,
  100% {
    transform: rotate(-4deg) translateY(0);
  }

  50% {
    transform: rotate(5deg) translateY(-2px);
  }
}
@keyframes bird-hop {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-16px) scale(1.06);
    }
}

.bird-alive {
    display: inline-block;
    transform-origin: center bottom;
    animation:
        bird-float 3.2s ease-in-out infinite,
        bird-tilt 1.6s ease-in-out infinite;
    will-change: transform;
}

@keyframes bird-float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.03);
    }
}

@keyframes bird-tilt {
    0%, 100% {
        rotate: -2deg;
    }
    50% {
        rotate: 4deg;
    }
}

/* ── Media Condition ── */

@media (max-width: 992px){
    .navbar-collapse{
        margin-right: calc(var(--bs-gutter-x) * .5 * -1);
        margin-left: calc(var(--bs-gutter-x) * .5 * -1);
        position: absolute;
        width: 100%;
        z-index: -1;
        margin-top: -10px;
        padding: 30px 25px 25px 25px;
        height: calc(100vh - 100px);
        transition: height 0.3s ease-out;
    }
    .nav-link{
        font-size: 18px;
    }
}
@media (min-width: 576px) {
    #searchModal .modal-dialog {
        max-width: calc(100% - 15px);
        margin-right: auto;
        margin-left: auto;
    }
}
/* Desktop Size */
@media (min-width: 768px){
    .comment-text-box{
        flex: 1.2 0 0;
    }
    .comment-button-box{
        flex: 0 0 160px;
        text-align: right !important;
    }
}
@media (min-width: 576px) and (max-width: 992px) {
    .container, .container-md, .container-sm {
        max-width: calc(100% - 15px);
    }
    #searchModal{
        margin-top: 28px;
    }
}
@media (min-width: 992px) {
    #searchModal .modal-dialog{
        margin-top: 0px;
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
     #navbarFontContent.collapse.show.d-lg-none{
        display: none !important;
     }
    .top-bar{
        height: 40px;
        position: absolute;
    }
    .navbar-expand-lg{
        position: absolute;
        height: 120px;
        top: 40px;
    }
    .navbar-expand-lg .navbar-nav .nav-link{
        padding: 0px 8px;
        font-size: 16px;
        line-height: 24px;
        color: var(--normal-text-color);
    }
    
    .navbar-collapse{
        width: max-content;
        position: absolute;
        bottom: 20px;
        right: 24px;
    }
    .call-button-panel-lg{
        display: block;
        right: 24px;
        top: 15px;
    }
    .call-button{
        margin-top: 0px;
        border:1px solid var(--primary-color);
    }
    .navbar-brand > img {
        margin-top: 7px;
        margin-left: 15px;
        width: 105px;
    }
    .nav-title{
        font-size: 32px;
        font-weight: 700;
        line-height: 30px;
        margin-top: 30px;
    }
    .form-control.search-text{
        /* width: 250px; */
        height: inherit;
        font-size: 1rem;
        margin-top: 36px;
        margin-bottom: 36px;
    }
    .nav-title > small{
        display: inline;
    }
    .home-banner .slider{
        max-width: 1440px;
    }
    .vdo-slider{
        max-width: 1440px;
    }
    /* .page-footer{
        max-width: 1440px;
    } */
    .quote-slider{
        margin-left: 250px;
    }
    .quote-icon{
        width: 240px;
        z-index: 0;
        margin-top: 0px;
    }
    .quote-slider-item{
        position: relative;
        width: 280px;
        height: 200px;
    }
    .vdo-slider-item{
        margin-left: 0px;
        margin-right: 0px;
        /* width: 690px;
        height: 527px; */
    }
    .vdo-slider .slider-nav.swiper-button-prev{
        display: block;
        top: 50%;
        right: calc(50% + 360px);
        margin-top: -30px;
    }
    .vdo-slider .slider-nav.swiper-button-next{
        display: block;
        top: 50%;
        left: calc(50% + 360px);
        margin-top: -30px;
    }
    .article-slider .slider-nav.swiper-button-prev{
        display: block;
        top: 50%;
        left: 0px;
        margin-top: -30px;
    }
    .article-slider .slider-nav.swiper-button-next{
        display: block;
        top: 50%;
        right: 0px;
        margin-top: -30px;
    }
    .nav-tab-mb-scroll{
        overflow: hidden;
    }
    .article-slider{
        max-width: 1440px;
    }
    .content .content-header{
        max-width: 1440px;
        padding-top: 160px;
        padding-bottom: 50px;
    }
    .content .content-body{
        max-width: 1440px;
    }
    .nav-tab-cat.desktop-full-width{
        width: 100%;
    }
    .nav-tab-cat.desktop-full-width .nav-tab-wrapper{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
    }
    .inner-tab-cat.desktop-full-width .inner-tab-wrapper .item{
        flex: 1 0 0;
    }
    .inner-tab-cat.desktop-full-width{
        width: 100%;
    }
    .inner-tab-cat.desktop-full-width .inner-tab-wrapper{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
    }
    .inner-tab-cat.desktop-full-width .inner-tab-wrapper .item{
        flex: 1 0 0;
    }
    .bird-banner{
        display: block;
    }
    .search-item{
        height: 155px;
    }
    .search-item .thumbnail{
        height: 155px;
        overflow: hidden;
        border-radius: 24px 0 0 24px;
    }
    .search-item .thumbnail img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .search-item .text{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-right: 60px;
    }
    .search-item .arrow{
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
@media (min-width: 992px) and (max-width: 1200px){
    .container, .container-lg, .container-md, .container-sm {
        max-width: calc(100% - 20px);
    }
}
@media (max-width: 767.98px){
    .article-zone .detail .knowledge-layout-grid--2,
    .article-zone .detail .knowledge-layout-grid--3{
        grid-template-columns: 1fr;
    }
}
@media (min-width: 992px) and (max-width: 1140px){
    .navbar-expand-lg{
        height: 140px;
    }
}

/* Rich text content (Jodit editor output) — Knowledge & News detail pages.
   Tables/embeds saved through the admin editor can carry arbitrary markup,
   so keep them responsive on narrow viewports. */
.rich-editor-content img{
    max-width: 100%;
    height: auto;
}
.rich-editor-content table{
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}
.rich-editor-content table td,
.rich-editor-content table th{
    border: 1px solid #dee2e6;
    padding: 8px 12px;
}
.rich-editor-content .table-scroll-wrap{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 767.98px){
    .rich-editor-content table{
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
.rich-editor-content iframe{
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}
.rich-editor-content blockquote{
    border-left: 3px solid #dee2e6;
    margin: 0 0 1em;
    padding-left: 1em;
    color: #6c757d;
}
/* ตารางจากปุ่ม "คุณสมบัติตาราง" ของแอดมิน: ค่าที่ผู้เขียนตั้งมาเป็น inline style ซึ่งชนะ
   กฎด้านบนเสมอ (inline > class selector) จึงคง .rich-editor-content table td/th ไว้เป็น
   ค่า default สำหรับเนื้อหาเก่าที่ไม่มี inline border — ห้ามใส่ !important เด็ดขาด */
@media print{
    .rich-editor-content table,
    .rich-editor-content table th,
    .rich-editor-content table td{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact; /* ไม่งั้นเบราว์เซอร์ตัดสีพื้นทิ้งตอนพิมพ์ */
    }
    .rich-editor-content table{
        display: table !important; /* ยกเลิกกฎ display:block ของ media มือถือด้านบน */
        overflow: visible !important;
        page-break-inside: auto;
    }
    .rich-editor-content table tr{ page-break-inside: avoid; }
}

/* ── Infographic viewer (คลังความรู้ > อินโฟกราฟฟิก) ─────────────────────────
   Paged image viewer: framed stage + pill toolbar (page / zoom / fullscreen),
   per the reference mockup. Uses the shared theme custom properties so the
   black/white and yellow/black accessibility themes still apply. */
.infographic-viewer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    outline: none;
}
.infographic-stage-wrap{
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}
/* Fit mode (zoom === 1, the default): the stage is just a frame around the
   full-height image — no clipping, no scrollbar, the surrounding page
   scrolls normally. Only once zoomed in does the stage become a capped,
   scrollable box (see `.zoomed` below). `--zoom` is set inline from the
   component's `zoom` ref and drives `.infographic-canvas`'s size. */
.infographic-stage{
    display: block;
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--white-font-color);
    border: 1px solid var(--dark-border-color);
    box-shadow: 0px 4px 16px rgba(27, 62, 133, 0.12);
}
.infographic-canvas{
    width: calc(100% * var(--zoom, 1));
}
.infographic-stage img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}
.infographic-stage.zoomed{
    max-height: 80vh;
    overflow: auto;
    overscroll-behavior: contain;
}
.infographic-stage.zoomed img{
    cursor: grab;
}
.infographic-stage.panning img{
    cursor: grabbing;
}
.infographic-nav-btn{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--dark-border-color);
    background: var(--white-font-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    /* Float at the vertical center of the *viewport* while reading down a
       long, unclipped image in fit mode, instead of sitting pinned to the
       top of a tall stage. */
    position: sticky;
    top: calc(50vh - 20px);
    z-index: 2;
}
.infographic-nav-btn:hover:not(:disabled){
    background: var(--bg-light-blue);
}
.infographic-nav-btn:disabled{
    opacity: 0.35;
    cursor: default;
}
.infographic-toolbar{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--dark-body-color);
    color: var(--white-font-color);
    /* Keep page/zoom/fullscreen controls reachable while scrolling down a
       long infographic instead of leaving them stranded past the last page. */
    position: sticky;
    bottom: 16px;
    z-index: 2;
    box-shadow: 0px 4px 12px rgba(15, 15, 16, 0.25);
}
.infographic-page-label{
    font-size: 0.85rem;
    white-space: nowrap;
}
.infographic-page-input{
    width: 44px;
    text-align: center;
    border-radius: 6px;
    border: none;
    padding: 2px 4px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.15);
    color: var(--white-font-color);
}
.infographic-page-input::-webkit-inner-spin-button,
.infographic-page-input::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.infographic-toolbar-divider{
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 2px;
}
.infographic-tool-btn{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--white-font-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.infographic-tool-btn:hover:not(:disabled){
    background: rgba(255, 255, 255, 0.15);
}
.infographic-tool-btn:disabled{
    opacity: 0.35;
    cursor: default;
}
.infographic-viewer.is-fullscreen{
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: var(--dark-body-color);
    justify-content: center;
    padding: 24px;
}
/* Fullscreen has no surrounding page to scroll, so it needs its own fit
   behavior: at zoom 1 the image is letterboxed to fill the available space
   with nothing cropped and no scrollbar (like a PDF viewer); zooming in
   grows past the viewport and the stage becomes scrollable/pannable. */
.infographic-viewer.is-fullscreen .infographic-stage-wrap{
    flex: 1;
    min-height: 0;
    align-items: stretch;
}
.infographic-viewer.is-fullscreen .infographic-nav-btn{
    align-self: center;
    position: static;
}
.infographic-viewer.is-fullscreen .infographic-stage{
    max-width: 100%;
    height: 100%;
    max-height: none;
    overflow: hidden;
}
.infographic-viewer.is-fullscreen .infographic-stage.zoomed{
    overflow: auto;
}
.infographic-viewer.is-fullscreen .infographic-canvas{
    width: calc(100% * var(--zoom, 1));
    height: calc(100% * var(--zoom, 1));
}
.infographic-viewer.is-fullscreen .infographic-stage img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.infographic-viewer.is-fullscreen .infographic-toolbar{
    position: static;
}
@media (max-width: 767.98px){
    .infographic-stage{ max-width: 100%; }
    .infographic-stage.zoomed{ max-height: 70vh; }
    .infographic-nav-btn{ width: 32px; height: 32px; }
    .infographic-toolbar{ flex-wrap: wrap; justify-content: center; }
}

/* badge "ใหม่" — content ที่เผยแพร่ไม่เกิน 24 ชม. (Knowledge/News card + slider หน้าแรก) */
.vdo-slider-item .thumbnail,
.vdo-slider-item .vdo{
    position: relative;
}
.knowledge-item .thumbnail .badge-overlay.new,
.vdo-slider-item .thumbnail .badge-overlay.new,
.vdo-slider-item .vdo .badge-overlay.new{
    position: absolute;
    top: 15px;
    right: 15px;
    left: auto; /* ล้าง left:15px ที่ .badge-overlay ตั้งไว้ */
    padding: 8px 12px;
    height: 32px;
    line-height: 1;
    border-radius: 70.45px;
    font-size: 14px;
    font-weight: 700;
    color: var(--white-font-color);
    background-color: var(--error-600-color);
    z-index: 1;
}
.tag.new{
    color: var(--white-font-color);
    background-color: var(--error-600-color);
}