:root {
    --ss--gray-100: #F2F4F7!important;
    --ss--gray-200: #EAECF0!important;
    --ss--gray-300: #D0D5DD!important;
    --ss--gray-400: #98A2B3!important;
    --ss--gray-500: #667085!important;
    --ss--gray-600: #475467!important;
    --ss--gray-700: #344054!important;
    --ss--gray-800: #1D2939!important;
    --ss--gray-900: #101828!important;
    --ss--red: #DB353D!important;
    --ss--brand--book: linear-gradient(90deg, #052882 0%, #DB353D 100%) !important;
    --ss--brand--book--reverse: linear-gradient(90deg, #DB353D 0%, #052882 100%) !important;
    --ss--white: #fff!important;
    --ss--blue: #479CFF!important;
    --ss--green: #001E28CC!important;
    --ss--pink: #FDCBCD!important;
    --ss--blue-900: #052882!important;
    --ss--blue-gradient: linear-gradient(261.82deg, rgba(5, 40, 130, 0.32) 5.58%, rgba(5, 40, 130, 0.8) 98.73%)!important;
    --ss--testimonial-gradient-active: linear-gradient(90.25deg, #3B68B2 0.35%, #5C87C5 99.69%)!important;
    --ss--testimonial-gradient-muted: linear-gradient(177.26deg, rgba(59, 104, 178, 0.5) 10.7%, rgba(92, 135, 197, 0.2) 103.87%)!important;
    --ss--box-shadow: 0 1px 2px 0 #1018280F , 0 1px 3px 0 #1018281A!important;
}
html{scroll-behavior: smooth; scroll-padding-top: 80px}
div, a, h1, h2, h3, h4, h5, h6, ul, ol, li, span, p,  code, kbd, strong, pre, samp{font-family: "Manrope", sans-serif!important; text-decoration: none}
body{background: var(--ss--white); --tool-safe-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 12px); --tool-stack-gap: 12px; --tool-fab-size: 60px; --tool-dock-offset: 24px}
ul, ol, li{list-style: none}
ul::marker, ol::marker, li::marker{font-size: 10px}
a{text-decoration: none; color: inherit; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease}
.color-blue{color: var(--ss--blue)!important}
.bg-blue{background: var(--ss--blue)!important}

/* reveal on scroll */
.reveal-on-scroll{opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform}
.reveal-on-scroll.is-visible{opacity: 1; transform: translateY(0)}

/* article detail page */
.article-page{margin-top: -60px}
.article-page-banner{background-image: none !important; isolation: isolate}
.article-page-banner__media{position: absolute; inset: 0; z-index: 0; overflow: hidden}
.article-page-banner__slide{position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: scale(1.08); transition: opacity 0.9s ease, transform 6s ease}
.article-page-banner__slide.is-active{opacity: 1; transform: scale(1)}
.article-page-banner .page-banner__overlay{z-index: 1}
.article-page-banner .page-banner__content{z-index: 2}
.article-page-head{margin-bottom: 18px}
.article-breadcrumb{display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 13px; color: var(--ss--gray-500)}
.article-breadcrumb li i{font-size: 11px; color: var(--ss--gray-400)}
.article-breadcrumb a{color: var(--ss--gray-500)}
.article-breadcrumb a:hover{color: var(--ss--blue-900)}
.article-breadcrumb .is-current{color: var(--ss--gray-700); font-weight: 600; max-width: 620px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.article-page__container{max-width: 980px}
.article-page__grid{align-items: start}
.article-page__grid{display: flex; flex-direction: column; gap: 24px}
.article-main-col,
.article-sidebar-col{width: 100%; max-width: 100%; flex: 0 0 100%}
.article-main{background: var(--ss--white); border-radius: 24px; border: 1px solid var(--ss--gray-200); box-shadow: var(--ss--box-shadow); padding: 36px}
.article-detail-name{font-size: 36px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: var(--ss--gray-800); margin-bottom: 18px}
.article-detail-top-info{display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ss--gray-200)}
.article-detail-date-box{display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: var(--ss--gray-100); color: var(--ss--gray-700)}
.article-detail-date-icon{color: var(--ss--red)}
.article-share-label{font-size: 12px; font-weight: 600; color: var(--ss--gray-500); margin-bottom: 8px; text-align: right}
.article-detail-social--chips{display: inline-flex; gap: 10px}
.article-detail-social--chips a{width: 38px; height: 38px; border-radius: 50%; background: var(--ss--gray-100); display: inline-flex; align-items: center; justify-content: center; color: var(--ss--gray-700); border: 1px solid var(--ss--gray-200)}
.article-detail-social--chips a:hover{color: var(--ss--white); background: var(--ss--brand--book); border-color: transparent}
.article-hero{margin: 24px 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--ss--gray-200)}
.article-hero img{width: 100%; height: 500px; display: block; object-fit: cover}
.article-body{color: var(--ss--gray-700); font-size: 17px; line-height: 1.9}
.article-body h2,
.article-body h3{color: var(--ss--gray-800); margin: 28px 0 12px; line-height: 1.35}
.article-body p{margin-bottom: 16px}
.article-body ul,
.article-body ol{margin: 0 0 18px 22px; padding: 0}
.article-body li{list-style: disc; margin-bottom: 8px}
.article-body img{max-width: 100%; border-radius: 16px; margin: 16px 0}
.article-body > *:last-child{margin-bottom: 0}
.article-body p,
.article-body li,
.article-body span,
.article-body a,
.article-body strong{overflow-wrap: anywhere}
.article-body table{display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse}
.article-body iframe{display: block; width: 100%; max-width: 100%; border: 0; border-radius: 16px}
.article-body pre{max-width: 100%; overflow-x: auto; padding: 14px 16px; border-radius: 14px; background: #F8FAFC}
.article-video-wrap iframe{display: block; width: 100%; min-height: 320px; aspect-ratio: 16 / 9}
.article-video-wrap video{display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000}
.article-video-wrap{margin-top: 20px; border: 1px solid var(--ss--gray-200); border-radius: 16px; overflow: hidden; background: #000}
.article-sidebar{position: static}
.article-sidebar-card{position: static; background: var(--ss--white); border: 1px solid var(--ss--gray-200); border-radius: 20px; box-shadow: var(--ss--box-shadow); padding: 28px}
.article-sidebar-title{font-size: 18px; font-weight: 700; color: var(--ss--gray-800); margin-bottom: 12px}
.article-side-news{display: flex; flex-direction: column; gap: 14px}
.article-side-news__item{display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 12px; border: 1px solid var(--ss--gray-200); border-radius: 16px; background: var(--ss--white); transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease}
.article-side-news__item:hover{border-color: #D0D5DD; box-shadow: var(--ss--box-shadow); transform: translateY(-2px)}
.article-side-news__thumb{width: 132px; height: 98px; border-radius: 12px; overflow: hidden; background: var(--ss--gray-100)}
.article-side-news__thumb img{width: 100%; height: 100%; object-fit: cover; display: block}
.article-side-news__media{min-width: 0}
.article-side-news__media .article-side-news__date{display: inline-flex; align-items: center; gap: 6px; color: var(--ss--gray-500); font-size: 12px; margin-top: 8px; margin-bottom: 0}
.article-side-news__body{min-width: 0}
.article-side-news__date{display: inline-flex; align-items: center; gap: 6px; color: var(--ss--gray-500); font-size: 12px; margin-bottom: 8px}
.article-side-news__date i{color: var(--ss--red)}
.article-side-news__title{color: var(--ss--gray-800); font-size: 17px; line-height: 1.35; font-weight: 700; margin-bottom: 6px}
.article-side-news__desc{color: var(--ss--gray-500); font-size: 14px; line-height: 1.5}
.article-side-news--compact{gap: 10px}
.article-side-news--compact .article-side-news__item{grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 14px}
.article-side-news--compact .article-side-news__thumb{width: 92px; height: 72px; border-radius: 10px}
.article-side-news--compact .article-side-news__date{font-size: 11px; margin-bottom: 6px}
.article-side-news--compact .article-side-news__media .article-side-news__date{margin-top: 6px; margin-bottom: 0}
.article-side-news--compact .article-side-news__title{font-size: 14px; line-height: 1.35; margin-bottom: 4px}
.article-side-news--compact .article-side-news__desc{font-size: 12px; line-height: 1.4}
.article-gallery{margin-top: 34px; padding: 28px; border: 1px solid var(--ss--gray-200); border-radius: 24px; background: var(--ss--white); box-shadow: var(--ss--box-shadow)}
.article-gallery__title{margin: 0 0 14px; font-size: 24px; color: var(--ss--gray-800)}
.article-gallery__grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px}
.article-gallery__cell{min-width: 0}
.article-gallery__item{display: block; color: inherit; text-decoration: none}
.work-photo-card{height: 100%; overflow: hidden; border: 1px solid var(--ss--gray-200); border-radius: 18px; background: var(--ss--white); box-shadow: var(--ss--box-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease}
.article-gallery__item:hover .work-photo-card{transform: translateY(-3px); border-color: #D0D5DD; box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12)}
.work-photo-container{position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ss--gray-100)}
.work-photo-img{width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease, opacity 0.35s ease}
.article-gallery__item:hover .work-photo-img{transform: scale(1.04)}
.work-photo-overlay{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.34) 100%); opacity: 0; transition: opacity 0.25s ease}
.article-gallery__item:hover .work-photo-overlay{opacity: 1}
.work-photo-overlay__icon{width: 54px; height: 54px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); color: var(--ss--brand--book); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18)}
.work-photo-caption{padding: 14px 16px 16px}
.work-photo-caption__text{color: var(--ss--gray-600); font-size: 14px; line-height: 1.5; text-align: center}
.article-gallery-modal{position: fixed; inset: 0; z-index: 1200; display: none}
.article-gallery-modal.is-active{display: block}
.article-gallery-modal__backdrop{position: absolute; inset: 0; background: rgba(15, 23, 42, 0.78); backdrop-filter: blur(6px)}
.article-gallery-modal__dialog{position: relative; z-index: 1; width: min(92vw, 1100px); height: min(88vh, 820px); margin: 6vh auto; display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; gap: 18px}
.article-gallery-modal__content{min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px}
.article-gallery-modal__image{max-width: 100%; max-height: calc(88vh - 96px); width: auto; height: auto; border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); background: #fff}
.article-gallery-modal__caption{max-width: 720px; color: #fff; font-size: 15px; line-height: 1.5; text-align: center}
.article-gallery-modal__close,
.article-gallery-modal__nav{border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); transition: background 0.25s ease, transform 0.25s ease}
.article-gallery-modal__close:hover,
.article-gallery-modal__nav:hover{background: rgba(255, 255, 255, 0.24); transform: translateY(-1px)}
.article-gallery-modal__close{position: absolute; top: -8px; right: -8px; width: 48px; height: 48px; border-radius: 999px}
.article-gallery-modal__nav{width: 56px; height: 56px; border-radius: 999px; font-size: 18px}
.article-gallery-modal-open{overflow: hidden}
@media (max-width: 992px) {
    .article-page{padding: 16px 0 0}
    .article-main{padding: 20px}
    .article-detail-name{font-size: 28px}
    .article-detail-top-info{flex-direction: column; align-items: flex-start}
    .article-detail-top-info > div:last-child{width: 100%}
    .article-detail-social--chips{flex-wrap: wrap}
    .article-share-label{text-align: left}
    .article-sidebar-card{position: static;}
    .article-body{font-size: 16px; line-height: 1.75}
    .article-body h2,
    .article-body h3{margin-top: 24px}
    .article-hero img{height: 380px}
    .article-video-wrap iframe{min-height: 260px}
    .article-side-news__item{grid-template-columns: 1fr}
    .article-side-news__thumb{width: 100%; height: 180px}
    .article-side-news__title{font-size: 18px}
    .article-side-news__media .article-side-news__date{margin-top: 8px}
    .article-side-news--compact .article-side-news__item{grid-template-columns: 1fr}
    .article-side-news--compact .article-side-news__thumb{width: 100%; height: 180px}
    .article-side-news--compact .article-side-news__title{font-size: 18px}
    .article-side-news--compact .article-side-news__desc{font-size: 14px}
    .article-gallery__grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 767px) {
    .article-page{margin-top: -44px}
    .article-main{padding: 18px; border-radius: 20px}
    .article-detail-name{font-size: 24px; line-height: 1.28; margin-bottom: 14px}
    .article-detail-top-info{gap: 12px; padding-bottom: 14px}
    .article-detail-date-box{gap: 8px; padding: 8px 10px; font-size: 13px}
    .article-share-label{margin-bottom: 6px; font-size: 11px}
    .article-detail-social--chips{gap: 8px}
    .article-detail-social--chips a{width: 36px; height: 36px}
    .article-hero{margin: 18px 0; border-radius: 18px}
    .article-hero img{height: 280px}
    .article-body{font-size: 15px; line-height: 1.75}
    .article-body h2,
    .article-body h3{margin: 22px 0 10px; font-size: 20px}
    .article-body p{margin-bottom: 14px}
    .article-body ul,
    .article-body ol{margin: 0 0 16px 18px}
    .article-body img,
    .article-body iframe{border-radius: 14px}
    .article-video-wrap{margin-top: 18px; border-radius: 14px}
    .article-video-wrap iframe{min-height: 220px}
    .article-sidebar-card{padding: 20px}
    .article-sidebar-title{font-size: 16px; margin-bottom: 10px}
    .article-sidebar .article-swiper.article-items{padding-bottom: 0}
    .article-sidebar .article-items .article-item{padding: 14px; border-radius: 16px}
    .article-sidebar .article-items .article-item .article-item-image img{height: 180px}
    .article-gallery__grid{grid-template-columns: 1fr}
    .article-gallery{padding: 20px}
    .article-gallery-modal__dialog{width: min(94vw, 1100px); height: auto; min-height: 70vh; margin: 7vh auto; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 10px}
    .article-gallery-modal__image{max-height: 62vh; border-radius: 16px}
    .article-gallery-modal__close{top: -4px; right: -2px; width: 42px; height: 42px}
    .article-gallery-modal__nav{width: 42px; height: 42px}
    .article-gallery-modal__caption{font-size: 14px}
}
@media (max-width: 480px) {
    .article-page__grid{gap: 0;}
    .article-page{margin-top: -36px}
    .article-main{padding: 16px; margin-top: -10px; border-radius: 18px}
    .article-detail-name{font-size: 21px}
    .article-detail-top-info{gap: 10px}
    .article-detail-date-box{width: 100%; justify-content: center}
    .article-detail-social--chips{width: 100%}
    .article-detail-social--chips a{width: 34px; height: 34px}
    .article-hero{border-radius: 16px}
    .article-hero img{height: 220px}
    .article-body{font-size: 14px; line-height: 1.7}
    .article-body h2,
    .article-body h3{font-size: 18px}
    .article-body pre{padding: 12px 14px; border-radius: 12px}
    .article-body img,
    .article-body iframe{border-radius: 12px}
    .article-video-wrap iframe{min-height: 190px}
    .article-sidebar-card{padding: 16px; border-radius: 18px}
    .article-sidebar .article-items .article-item{padding: 12px; border-radius: 14px}
    .article-sidebar .article-items .article-item .article-item-image img{height: 160px}
}
.text-white{color: var(--ss--white)!important}
.text-red{color: var(--ss--red)!important}
.text-gray-700{color: var(--ss--gray-700)!important}
.text-left{text-align: left!important}
.container{max-width: 1308px; margin: 0 auto}

/* header */
header{display: flex; flex-direction: column; width: 100%; transition: background 0.3s ease, box-shadow 0.3s ease; position: relative; z-index: 1000; background: transparent}
header .header-bottom{transition: all 0.3s ease}
header.header-fixed{position: fixed; top: 0; left: 0; background: var(--ss--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)}
header.header-fixed .header-top{display: none}
header.header-fixed .header-bottom{height: 80px}
header.header-fixed .header-bottom ul li a,
header.header-fixed .header-bottom ul li a:visited{color: var(--ss--gray-800)}
header.header-fixed .header-bottom .header-menu ul .active{background: var(--ss--red)}
header.header-fixed .header-bottom .header-menu ul .active a{color: var(--ss--white)!important}
header .header-top{display: flex; justify-content: flex-end; align-items: center; gap: 24px; height: 56px}
header .header-top > div{padding-right: 24px; border-right: 1px solid #D0D5DD}
header .header-top > div:last-child{padding-right: 0; padding-left: 24px; border-right: 0; border-left: 1px solid #D0D5DD}
header .header-top > div:nth-child(3){padding-right: 0; border: 0!important}
header .header-top a,
header .header-top a:visited{display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--ss--gray-500); font-size: 14px}
header .header-top a i{color: var(--ss--gray-500)}
header .header-top a:hover{color: var(--ss--red)}
header .header-top .icon{width: 24px; height: 24px}
header .header-mobile-top{display: none; position: relative; border-bottom: 1px solid #E5E7EB; background: rgba(255,255,255,.98); overflow: visible; z-index: 12; transition: max-height .24s ease, opacity .24s ease, transform .24s ease, border-color .24s ease}
header .header-mobile-top__inner{display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px}
header .header-mobile-top__edc{display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 28px}
header .header-mobile-top__edc .edc-logo{width: 100%; max-width: 42px; height: auto}
header .header-mobile-top__actions{display: flex; align-items: stretch; gap: 0; margin-left: auto}
header .header-mobile-top__actions > *{position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 28px}
header .header-mobile-top__action,
header .header-mobile-top__action:visited{display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--ss--blue-900)}
header .header-mobile-top__action .icon{width: 18px; height: 18px}
header .header-mobile-top__action .lang-flag{width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(23, 51, 95, 0.12); background-size: cover}
header .header-mobile-top__actions > *:not(:last-child){padding-right: 10px; margin-right: 10px}
header .header-mobile-top__actions > *:not(:last-child)::after{content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 20px; background: #E5E7EB; transform: translateY(-50%)}
header .header-mobile-top .search-trigger-wrap--mobile{position: static}
header .header-mobile-top .mini-search-box--mobile{position: absolute; top: calc(100% + 1px); left: 0; right: 0; width: auto; min-width: 0; max-width: none; margin: 0; padding: 12px 16px 14px; border-radius: 0 0 16px 16px; border-color: #E2E8F0; border-left: 0; border-right: 0; box-shadow: 0 18px 38px rgba(16, 24, 40, 0.14); box-sizing: border-box; z-index: 1012; transform: translateY(8px) scale(0.98); transform-origin: top center}
header .header-mobile-top .mini-search-box--mobile.active{transform: translateY(0) scale(1)}
header .header-mobile-top .mini-search-box--mobile form{gap: 10px}
header .header-mobile-top .mini-search-box--mobile input[type="search"]{height: 42px; border-radius: 12px; padding: 0 14px; font-size: 14px; border-color: #D7DEE8; background: #F8FAFC}
header .header-mobile-top .mini-search-box--mobile input[type="search"]:focus{background: #fff; box-shadow: 0 0 0 3px rgba(5, 40, 130, 0.08)}
header .header-mobile-top .mini-search-box--mobile button{width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 8px 18px rgba(5, 40, 130, 0.16)}
header .header-bottom{height: 80px; z-index: 11}
header .header-bottom__inner{display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0}
header .header-bottom .header-logo{height: 100%; display: flex; align-items: center}
header .header-bottom .header-logo a{position: relative; display: inline-flex; align-items: center; height: 100%}
header .header-bottom .header-logo img{height: 64px; max-height: 100%; width: auto; object-fit: contain; transition: opacity 0.3s ease, transform 0.3s ease}
header .header-bottom .header-logo .logo-white{opacity: 1}
header .header-bottom .header-logo .logo-blue{opacity: 0; position: absolute; left: 0}
header.header-fixed .header-bottom .header-logo .logo-white{opacity: 0}
header.header-fixed .header-bottom .header-logo .logo-blue{opacity: 1}
header .header-bottom ul{display: flex; gap: 24px}
header .header-bottom ul li{padding: 12px 0}
header .header-bottom ul li a,
header .header-bottom ul li a:visited{color: var(--ss--gray-500); font-size: 16px}
header .header-bottom ul li a:hover{color: var(--ss--red)}
header .header-bottom .header-menu ul .active{padding: 12px 20px; border-radius: 20px; background: var(--ss--red)}
header .header-bottom .header-menu ul .active a,
header .header-bottom .header-menu ul .active a:visited{color: var(--ss--white)}
header .header-bottom .header-menu ul .active a:hover{border-bottom: 0; color: var(--ss--white)}
.header-mobile-footer-links{display: none}
header .edc-logo{width: 100px}
header .search-trigger-wrap{position: relative}
header .mini-search-box{position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; padding: 10px; background: #fff; border: 1px solid #dfe3eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(0.98); transform-origin: top left; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease}
header .mini-search-box.active{opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1)}
header .mini-search-box form{display: flex; gap: 8px; align-items: center}
header .mini-search-box input[type="search"]{flex: 1; min-width: 0; border: 1px solid #d8dde8; border-radius: 6px; padding: 8px 10px; outline: none}
header .mini-search-box input[type="search"]:focus{border-color: #0f3d77}
header .mini-search-box button{width: 36px; height: 36px; border: 0; border-radius: 6px; background: #0f3d77; color: #fff; cursor: pointer}
header .header-top a .lang-flag{width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(23, 51, 95, 0.1); flex-shrink: 0; background-size: cover}

/* home-banner */
.home-banner{position: relative; overflow: hidden; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; background: var(--ss--blue-gradient)}
.home-banner .banner-video{position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: -1}
.home-banner .container,
.home-banner .banner-menus{position: relative; z-index: 1}
.home-banner .banners{display: flex; align-items: center; height: 100%}
.home-banner .banners .banner-item{height: 82vh}
.home-banner .banners .banner-item{display: flex; align-items: center; max-width: 50%}
.home-banner .banners .banner-item > div{transition: transform 0.35s ease}
.home-banner .banners .banner-item:hover > div{transform: translateY(-4px)}
.home-banner .banners .banner-item .banner-name{color: var(--ss--white); font-size: 72px; font-weight: 700; margin-bottom: 24px}
.home-banner .banners .banner-item .banner-description{color: var(--ss--white); font-size: 16px}
.home-banner .banners .banner-item .banner-more{margin-top: 40px}
.home-banner .banners .banner-item .banner-more a,
.home-banner .banners .banner-item .banner-more a:visited{margin-top: 20px; padding: 12px 20px; border: 1px solid var(--ss--red); border-radius: 20px; color: var(--ss--white); font-size: 14px; background: var(--ss--red)}
.home-banner .banners .banner-item .banner-more a:hover{border: 1px solid var(--ss--red); background: transparent}
.home-banner .banner-menus{display: flex; align-items: flex-end; padding: 40px 0; border-top: 1px solid #FFFFFFB2}
.home-banner .banner-menus .container{width: 100%}
.home-banner .banner-menus .container > *{width: 100%}
.home-banner__menu-content{width: 100%; color: var(--ss--white)}
.home-banner__menu-content > *{min-width: 0}
.home-banner__menu-content,
.home-banner__menu-content p,
.home-banner__menu-content a,
.home-banner__menu-content a:visited,
.home-banner__menu-content span,
.home-banner__menu-content li,
.home-banner__menu-content strong,
.home-banner__menu-content em,
.home-banner__menu-content td,
.home-banner__menu-content th,
.home-banner__menu-content div{color: inherit}
.home-banner__menu-content p,
.home-banner__menu-content a,
.home-banner__menu-content span,
.home-banner__menu-content li,
.home-banner__menu-content td,
.home-banner__menu-content th{overflow-wrap: anywhere}
.home-banner__menu-content table{width: 100%; max-width: 100%; border-collapse: collapse}
.home-banner__menu-content img,
.home-banner__menu-content iframe{max-width: 100%; height: auto}
.home-banner .banner-menus ul{display: flex; gap: 40px}
.home-banner .banner-menus ol{display: flex; gap: 40px; padding-left: 18px}
.home-banner .banner-menus .container > *:not(ul):not(ol){display: flex; flex-wrap: wrap; gap: 40px 24px}
.home-banner .banner-menus p,
.home-banner .banner-menus a,
.home-banner .banner-menus span{margin: 0}
.home-banner .banner-menus ul li,
.home-banner .banner-menus ul li span,
.home-banner .banner-menus ol li,
.home-banner .banner-menus ol li span,
.home-banner .banner-menus .container > * > a,
.home-banner .banner-menus .container > * > span,
.home-banner .banner-menus .container > * > p{color: var(--ss--white); font-size: 16px}
.home-banner .banner-menus ul li{transition: transform 0.22s ease, opacity 0.22s ease}
.home-banner .banner-menus ol li,
.home-banner .banner-menus .container > * > a,
.home-banner .banner-menus .container > * > span,
.home-banner .banner-menus .container > * > p{transition: transform 0.22s ease, opacity 0.22s ease}
.home-banner .banner-menus ul li:hover{transform: translateY(-2px); opacity: 0.92}
.home-banner .banner-menus ol li:hover,
.home-banner .banner-menus .container > * > a:hover,
.home-banner .banner-menus .container > * > span:hover,
.home-banner .banner-menus .container > * > p:hover{transform: translateY(-2px); opacity: 0.92}
.home-banner-swiper{position: relative; height: 94.4vh}
.home-banner-swiper .swiper-slide{width: 100%; height: 100%}
.home-banner-swiper .swiper-button-next,
.home-banner-swiper .swiper-button-prev{z-index: 10; top: 94%; transition: transform 0.22s ease, opacity 0.22s ease}
.home-banner-swiper .swiper-button-next:hover,
.home-banner-swiper .swiper-button-prev:hover{transform: translateY(-2px); opacity: 0.92}
.home-banner-swiper .swiper-button-next{margin-right: 100px}
.home-banner-swiper .swiper-button-prev{margin-left: 100px}

@media (max-width: 1200px) {
    .home-banner .banners .banner-item{max-width: 60%}
    .home-banner .banners .banner-item .banner-name{font-size: 60px; margin-bottom: 20px}
    .home-banner .banners .banner-item .banner-description{font-size: 15px; line-height: 1.7}
    .home-banner .banner-menus ul,
    .home-banner .banner-menus ol,
    .home-banner .banner-menus .container > *:not(ul):not(ol){gap: 28px 20px}
}

@media (max-width: 992px) {
    .home-banner-swiper{height: auto; min-height: 100svh}
    .home-banner-swiper .swiper-slide,
    .home-banner{min-height: 100svh}
    .home-banner .container{display: flex; align-items: center; min-height: calc(100svh - 120px)}
    .home-banner .banners{width: 100%}
    .home-banner .banners .banner-item{height: auto; min-height: 0; max-width: 100%; padding: 120px 0 56px}
    .home-banner .banners .banner-item .banner-name{font-size: 52px}
    .home-banner .banners .banner-item .banner-description{max-width: 640px}
    .home-banner .banner-menus{padding: 24px 0 84px}
    .home-banner__menu-content{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px}
    .home-banner__menu-content > p,
    .home-banner__menu-content > a,
    .home-banner__menu-content > span,
    .home-banner__menu-content > div,
    .home-banner__menu-content > ul,
    .home-banner__menu-content > ol{margin: 0; padding: 14px 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 100%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10); backdrop-filter: blur(8px)}
    .home-banner__menu-content > ul,
    .home-banner__menu-content > ol{display: grid; grid-template-columns: 1fr; gap: 8px; padding-left: 30px}
    .home-banner__menu-content > table{display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px}
    .home-banner__menu-content > * > *:last-child{margin-bottom: 0}
    .home-banner__menu-content p,
    .home-banner__menu-content a,
    .home-banner__menu-content span,
    .home-banner__menu-content li,
    .home-banner__menu-content td,
    .home-banner__menu-content th{font-size: 15px; line-height: 1.6}
    .home-banner .banner-menus ul,
    .home-banner .banner-menus ol,
    .home-banner .banner-menus .container > *:not(ul):not(ol){width: 100%; gap: 18px 24px; flex-wrap: wrap}
    .home-banner-swiper .swiper-button-next,
    .home-banner-swiper .swiper-button-prev{top: auto; bottom: 26px; margin: 0}
    .home-banner-swiper .swiper-button-next{right: 24px}
    .home-banner-swiper .swiper-button-prev{left: 24px}
}

/* home-loan */
.home-loan{}

/* loan */
.loan-items{display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px}
.loan-item{grid-column: span 2}
.loan-item:nth-child(5n + 4),
.loan-item:nth-child(5n + 5){grid-column: span 3}
.loan-items--count-1 .loan-item{grid-column: span 6}
.loan-items--count-2 .loan-item,
.loan-items--count-4 .loan-item{grid-column: span 3}
.loan-items--count-3 .loan-item{grid-column: span 2}
.loan-items--count-5 .loan-item{grid-column: span 2}
.loan-items--count-5 .loan-item:nth-last-child(-n + 2){grid-column: span 3}
.loan-item{position: relative; overflow: hidden; border-radius: 24px; background: var(--ss--white); transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: var(--ss--box-shadow)}
.loan-item a{display: flex; flex-direction: column; text-decoration: none; height: 100%}
.loan-item .loan-item-img{position: relative; width: 100%; height: 300px; overflow: hidden}
.loan-item .loan-item-img::before{content: none}
.loan-item .loan-item-img img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 0.4s ease}
.loan-item .loan-item-name{padding: 10px 20px; font-size: 22px; color: var(--ss--gray-800); transition: color 0.25s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.loan-item .loan-item-name{text-transform: lowercase}
.loan-item .loan-item-name::first-letter{text-transform: uppercase}
.loan-item .loan-item-description ul,
.loan-item .loan-item-description li,
.loan-item .loan-item-description p,
.loan-item .loan-item-description span{margin: 0; color: var(--ss--white)}
.loan-item .loan-item-description{position: absolute; top: 0; left: 0; right: 0; height: 300px; margin: 0; padding: 16px 20px; display: flex; align-items: flex-end; font-size: 15px; color: var(--ss--white); background: linear-gradient(180deg, rgba(17, 24, 39, 0.08) 0%, rgba(17, 24, 39, 0.85) 100%); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; z-index: 2; pointer-events: none}
.loan-item .loan-item-description__text{display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden}
.loan-item .loan-item-more{padding: 10px 16px; margin: 0 20px 20px; width: fit-content; border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--ss--white); background: var(--ss--red); transition: all 0.25s ease}

/* Hover states */
.loan-item:hover{transform: translateY(-6px); box-shadow: 0 18px 40px rgba(16, 24, 40, 0.18)}
.loan-item:hover .loan-item-img img{transform: scale(1.05)}
.loan-item:hover .loan-item-description,
.loan-item:focus-within .loan-item-description{opacity: 1; visibility: visible; transform: translateY(0)}
.loan-item:hover .loan-item-more{border: 1px solid var(--ss--red); background: transparent; color: var(--ss--red)}

/* Responsive */
@media (max-width: 992px) {
    .loan-items{grid-template-columns: repeat(2, 1fr)}
    .loan-item{grid-column: span 1 !important}
}
@media (max-width: 767px) {
    .loan-items{gap: 16px}
    .loan-item{border-radius: 18px; box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08)}
    .loan-item:hover{transform: none; box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08)}
    .loan-item .loan-item-img,
    .loan-item .loan-item-description{height: 240px}
    .loan-item .loan-item-name{padding: 12px 16px; font-size: 18px}
    .loan-item .loan-item-description{padding: 14px 16px; opacity: 1; visibility: visible; transform: none; background: linear-gradient(180deg, rgba(17, 24, 39, 0.02) 12%, rgba(17, 24, 39, 0.78) 100%)}
    .loan-item .loan-item-description__text{-webkit-line-clamp: 3; font-size: 14px; line-height: 1.55}
}
@media (max-width: 576px) {
    .loan-items{grid-template-columns: 1fr}
    .loan-item{border-radius: 16px}
    .loan-item .loan-item-img,
    .loan-item .loan-item-description{height: 220px}
    .loan-item .loan-item-name{padding: 10px 14px; font-size: 16px}
    .loan-item .loan-item-description{padding: 12px 14px}
    .loan-item .loan-item-description__text{font-size: 13px}
}

/* home-about */

/*.home-about {*/

/*    width: 100%;*/

/*    background: #1E4ED8;*/

/*    margin-top: 60px;*/

/*    position: relative;*/

/*    overflow: hidden;*/

/*}*/
.home-about{width: 100%; margin-top: 60px; position: relative; overflow: hidden}

/*.home-about .container {position: relative; z-index: 2;}*/

/*.home-about::before,*/

/*.home-about::after,*/

/*.home-about .home-about-decor::before,*/

/*.home-about .home-about-decor::after{*/

/*    content: "";*/

/*    position: absolute;*/

/*    border-radius: 50%;*/

/*    pointer-events: none;*/

/*    z-index: 1;*/

/*    background:*/

/*        radial-gradient(circle at 28% 26%, rgba(255,255,255,0.35), rgba(255,255,255,0) 35%),*/

/*        radial-gradient(circle at 30% 30%, #F56B6B 0%, #DB353D 65%, #B71F2A 100%);*/

/*    box-shadow: 0 24px 60px rgba(0,0,0,0.25);*/

/*    animation: floatSphere 14s ease-in-out infinite;*/

/*}*/
.home-about::before{width: 520px; height: 520px; top: -260px; right: -260px; animation-duration: 18s}
.home-about::after{width: 300px; height: 300px; top: 150px; left: 15%; transform: translateX(-50%); animation-duration: 14s}
.home-about .home-about-decor::before{width: 420px; height: 420px; bottom: -210px; right: -170px; animation-duration: 20s}
.home-about .home-about-decor::after{width: 180px; height: 180px; bottom: -90px; left: -70px; animation-duration: 12s}
@keyframes floatSphere{0% {transform: translate3d(0, 0, 0) scale(1); } 50% {transform: translate3d(0, -16px, 0) scale(1.02); } 100% {transform: translate3d(0, 0, 0) scale(1); }}
.home-about .home-about-subtitle{text-align: center; font-size: 48px; color: var(--ss--red); font-weight: 600}
.home-about .home-about-subtitle span{color: var(--ss--white)}
.home-about .home-about-description{text-align: center; padding: 20px 0}
.home-about .home-about-description pre{margin-bottom: 0; white-space: pre-wrap; word-break: break-word; overflow: visible}
.home-about .home-about-description span{color: var(--ss--white); font-size: 18px}
.home-about .home-about-description,
.home-about .home-about-description p,
.home-about .home-about-description span{overflow: visible; white-space: normal; word-break: break-word}
.home-about .home-about-swiper{padding: 20px 0}
.home-about .swiper-slide{height: auto; transition: transform 0.35s ease, opacity 0.35s ease; transform: scale(0.9); opacity: 0.65}
.home-about .swiper-slide-active{transform: scale(1.08); opacity: 1; z-index: 2}
.home-about .home-about-item{height: 100%; padding: 24px; border: 1px solid var(--ss--white); border-radius: 24px; background: #FFFFFF1A; transition: transform 0.3s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease}
.home-about .swiper-slide:hover .home-about-item{transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.2); box-shadow: 0 14px 30px rgba(10, 25, 51, 0.24)}
.home-about .swiper-slide-active .home-about-item{border-color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.22); box-shadow: 0 18px 40px rgba(10, 25, 51, 0.28)}
.home-about .home-about-item .home-about-item-name{margin-bottom: 10px}
.home-about .home-about-item .home-about-item-name span{color: var(--ss--white); font-size: 18px; font-weight: 600}
.home-about .home-about-item .home-about-item-description span{color: var(--ss--white); font-size: 16px}
.home-about .home-about-pagination{position: relative; margin-top: 24px; text-align: center}
.home-about .home-about-pagination .swiper-pagination-bullet{width: 10px; height: 10px; background: rgba(255, 255, 255, 0.6); opacity: 1}
.home-about .home-about-pagination .swiper-pagination-bullet-active{background: var(--ss--red)}
@media (max-width: 991px) {
    .home-about{margin-top: 44px}
    .home-about .home-about-subtitle{font-size: 38px; line-height: 1.2}
    .home-about .home-about-description{padding: 16px 0}
    .home-about .home-about-description span{font-size: 16px; line-height: 1.7}
    .home-about .home-about-swiper{padding: 12px 0 8px}
    .home-about .home-about-item{padding: 20px; border-radius: 20px}
}
@media (max-width: 767px) {
    .home-about{margin-top: 32px}
    .home-about .container{padding-top: 8px; padding-bottom: 8px}
    .home-about .home-about-subtitle{font-size: 30px; line-height: 1.25}
    .home-about .home-about-description{max-width: 680px; margin: 0 auto; padding: 14px 0 8px}
    .home-about .home-about-description span{font-size: 15px}
    .home-about .home-about-swiper{padding: 8px 0 4px}
    .home-about .swiper-slide{transform: scale(0.97); opacity: 0.82}
    .home-about .swiper-slide-active{transform: scale(1); opacity: 1}
    .home-about .home-about-item{padding: 18px; min-height: 180px; border-radius: 18px}
    .home-about .home-about-item .home-about-item-name span{font-size: 17px}
    .home-about .home-about-item .home-about-item-description span{font-size: 15px; line-height: 1.6}
    .home-about .home-about-pagination{margin-top: 18px}
}
@media (max-width: 576px) {
    .home-about .home-about-subtitle{font-size: 24px; margin-top: -20px}
    .home-about .home-about-description{padding-top: 12px}
    .home-about .home-about-description span{font-size: 14px}
    .home-about .home-about-item{padding: 16px; min-height: 168px}
    .home-about .home-about-item .home-about-item-name{margin-bottom: 8px}
    .home-about .home-about-item .home-about-item-name span{font-size: 16px}
    .home-about .home-about-item .home-about-item-description span{font-size: 14px}
    .home-about .home-about-pagination .swiper-pagination-bullet{width: 8px; height: 8px}
    .home-about .swiper-slide{transform: scale(0.96)}
    .home-about .swiper-slide-active{transform: scale(1)}
}

/* feature-split */
.feature-split{}
.feature-split__title{display: flex; align-items: center; gap: 16px; padding: 40px 0}
.feature-split__title span{font-size: 30px; font-weight: 800; color: var(--ss--gray-700); padding: 0 15px}
.feature-split__title::before,
.feature-split__title::after{content: ""; flex: 1; height: 2px; background: var(--ss--brand--book)}
.feature-split__title::before{border-radius: 0 5px 5px 0}
.feature-split__title::after{border-radius: 5px 0 0 5px; background: var(--ss--brand--book--reverse)!important}
.feature-split__body{display: flex; gap: 24px; margin-left: 40px}
.feature-split__left{position: relative}
.feature-split__image{position: relative; width: 100%}
.feature-split__image img{position: relative; z-index: 2; width: 100%; display: block; border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease}
.feature-split__bg-shape,
.feature-split__bg-shape-right{position: absolute; width: 100%; height: 100%; background: var(--ss--brand--book); border: 1px solid #D6E1F5; box-shadow: 0 18px 34px rgba(5, 40, 130, 0.10); border-radius: 16px; z-index: 1; opacity: 0.8; transition: transform 0.3s ease, opacity 0.3s ease}
.feature-split__bg-shape{top: 20px; left: -20px}
.feature-split__bg-shape-right{bottom: 20px; right: -20px}
.feature-split__image:hover img{transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16, 24, 40, 0.14)}
.feature-split__image:hover .feature-split__bg-shape{transform: translate(-8px, 8px); opacity: 0.92}
.feature-split__image:hover .feature-split__bg-shape-right{transform: translate(8px, -8px); opacity: 0.92}
.feature-split__right{display: flex; justify-content: center; flex-direction: column; max-width: 60%}

/*.feature-split__subtitle{margin-bottom: 20px;}*/
.feature-split__subtitle span{color: var(--ss--gray-700); font-size: 42px; font-weight: 600}
.feature-split__description ,
.feature-split__description p,
.feature-split__description span{color: var(--ss--gray-500); font-size: 18px}
.feature-split__description ul{margin-top: 16px}
.feature-split__description ul,
.feature-split__description ol,
.feature-split__description li{list-style: disc; margin-left: 10px}
.feature-split__more{margin-top: 32px}
.feature-split__more a,
.feature-split__more a:visited{padding: 12px 20px; border: 1px solid var(--ss--red); border-radius: 20px; color: var(--ss--white); font-size: 14px; background: var(--ss--red); display: inline-block; transform: translateY(0); box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); transition: transform 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, background 0.28s ease, border-color 0.28s ease}
.feature-split__more a:hover{border: 1px solid var(--ss--red); color: var(--ss--gray-700); background: transparent; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(16, 24, 40, 0.14)}
.feature-split__more a:active{transform: translateY(-1px)}

.home-edc__image{object-fit: cover}
@media (max-width: 767px) {
    .home-edc{margin-top: 44px}
    .home-edc .feature-split{padding: 8px 0}
    .home-edc .feature-split__title{padding: 0 0 28px}
    .home-edc .feature-split__title::before,
    .home-edc .feature-split__title::after{display: none}
    .home-edc .feature-split__title span{padding: 0; text-align: center; width: 100%}
    .home-edc .feature-split__body{margin-left: 0; gap: 40px; align-items: center; padding: 34px; border: 1px solid var(--ss--gray-200); border-radius: 28px; background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); box-shadow: 0 22px 48px rgba(16, 24, 40, 0.08)}
    .home-edc .feature-split__left{flex: 0 0 min(42%, 420px); width: min(42%, 420px)}
    .home-edc .feature-split__right{flex: 1 1 auto; max-width: none}
    .home-edc .feature-split__left,
    .home-edc .feature-split__right{width: 100%; flex-basis: auto}
    .home-edc .feature-split__image{overflow: visible; max-width: 100%; margin: 0 auto}
    .home-edc .feature-split__bg-shape{display: none}
    .home-edc__image{height: 320px; border-radius: 24px; box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10)}
    .home-edc .feature-split__subtitle,
    .home-edc .feature-split__description,
    .home-edc .feature-split__more{text-align: left}
    .home-edc .feature-split__subtitle{margin-bottom: 14px}
    .home-edc .feature-split__subtitle span{font-size: 34px; line-height: 1.18; font-weight: 700; color: var(--ss--gray-800)}
    .home-edc .feature-split__description,
    .home-edc .feature-split__description p,
    .home-edc .feature-split__description span{font-size: 16px; line-height: 1.75; color: var(--ss--gray-500)}
    .home-edc .feature-split__description p:last-child{margin-bottom: 0}
    .home-edc .feature-split__more{display: block; margin-top: 24px}
}
@media (max-width: 480px) {
    .home-edc .feature-split__body{gap: 20px; padding: 18px; border-radius: 20px}
    .home-edc__image{height: 228px; border-radius: 18px; box-shadow: none}
    .home-edc .feature-split__subtitle{margin-bottom: 10px}
    .home-edc .feature-split__subtitle span{font-size: 24px}
    .home-edc .feature-split__description,
    .home-edc .feature-split__description p,
    .home-edc .feature-split__description span{font-size: 15px; line-height: 1.7}
    .home-edc .feature-split__more{margin-top: 18px}
    .feature-split__more a,
    .feature-split__more a:visited{width: 100%; max-width: 220px; text-align: center}
}

/* home-article */
.home-article{margin-top: 40px}
.home-article .home-article-more{display: flex; justify-content: center; margin-top: 36px}
.home-article .home-article-more a,
.home-article .home-article-more a:visited{padding: 12px 20px; border-radius: 20px; border: 1px solid var(--ss--red); color: var(--ss--white); font-size: 14px; background: var(--ss--red); display: inline-block; transform: translateY(0); box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); transition: transform 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, background 0.28s ease, border-color 0.28s ease}
.home-article .home-article-more a:hover{color: var(--ss--gray-700); background: transparent; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(16, 24, 40, 0.14)}
.home-article .home-article-more a:active{transform: translateY(-1px)}

/* service thumbnail -> facebook card */
.service-fb-card{display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 18px; background: var(--ss--white); box-shadow: var(--ss--box-shadow); border: 1px solid var(--ss--gray-200); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease}
.service-fb-card__icon{width: 52px; height: 52px; border-radius: 14px; background: #1877F2; display: flex; align-items: center; justify-content: center}
.service-fb-card__icon i{font-size: 24px; color: var(--ss--white)}
.service-fb-card__text{flex: 1}
.service-fb-card__title{font-size: 16px; font-weight: 700; color: var(--ss--gray-800)}
.service-fb-card__desc{font-size: 14px; color: var(--ss--gray-500)}
.service-fb-card__arrow{width: 36px; height: 36px; border-radius: 50%; background: var(--ss--gray-100); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ss--gray-700)}
.service-fb-card:hover{transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12); border-color: transparent; background: linear-gradient(var(--ss--white), var(--ss--white)) padding-box, var(--ss--brand--book) border-box}
.service-fb-card:hover .service-fb-card__arrow{transform: translateX(2px)}

/* home-req */
.home-req{display: flex; justify-content: space-around; margin-top: 40px; padding: 40px; border-radius: 24px; background: var(--ss--blue-gradient); transition: transform 0.3s ease, box-shadow 0.3s ease}
.home-req:hover{transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16, 24, 40, 0.16)}
.home-req .home-req-left{padding: 44px}
.home-req .home-req-left .home-req-left-name{}
.home-req .home-req-left .home-req-left-name span{font-size: 40px; font-weight: 700; color: var(--ss--white)}
.home-req .home-req-left .home-req-left-btn{display: flex; gap: 24px; margin-top: 24px; color: var(--ss--white)}
.home-req .home-req-left .home-req-left-btn > a:last-child{background: var(--ss--blue)}
.home-req .home-req-left .home-req-left-btn a,
.home-req .home-req-left .home-req-left-btn a:visited{padding: 12px 20px; border: 1px solid transparent; border-radius: 20px; color: var(--ss--white); font-size: 14px; background: var(--ss--red)}
.home-req .home-req-left .home-req-left-btn a:hover{border: 1px solid var(--ss--red); background: transparent!important; transform: translateY(-2px)}
.home-req .home-req-right{width: 100%}
.home-req .home-req-right img{width: 100%; height: 100%; object-fit: cover; border-radius: 24px; transition: transform 0.35s ease}
.home-req:hover .home-req-right img{transform: scale(1.03)}
@media (max-width: 992px) {
    .home-req{align-items: center; gap: 24px; padding: 28px}
    .home-req .home-req-left{padding: 0; flex: 1 1 50%}
    .home-req .home-req-left .home-req-left-name span{font-size: 32px; line-height: 1.2}
    .home-req .home-req-left .home-req-left-btn{gap: 12px; flex-wrap: wrap}
    .home-req .home-req-right{flex: 1 1 42%}
    .home-req .home-req-right img{min-height: 260px}
}
@media (max-width: 767px) {
    .home-req{flex-direction: column; align-items: stretch; gap: 20px; margin-top: 28px; padding: 20px; border-radius: 20px; box-shadow: 0 18px 36px rgba(16, 24, 40, 0.12)}
    .home-req:hover{transform: none; box-shadow: 0 18px 36px rgba(16, 24, 40, 0.12)}
    .home-req .home-req-left,
    .home-req .home-req-right{width: 100%; flex: none}
    .home-req .home-req-left .home-req-left-name span{font-size: 26px; line-height: 1.25}
    .home-req .home-req-left .home-req-left-btn{flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px}
    .home-req .home-req-left .home-req-left-btn a,
    .home-req .home-req-left .home-req-left-btn a:visited{display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 16px; border-radius: 16px; text-align: center}
    .home-req .home-req-right img{min-height: 220px; max-height: 260px; border-radius: 18px}
}
@media (max-width: 480px) {
    .home-req{padding: 16px; gap: 16px; border-radius: 18px}
    .home-req .home-req-left .home-req-left-name span{font-size: 22px}
    .home-req .home-req-left .home-req-left-btn{margin-top: 16px}
    .home-req .home-req-left .home-req-left-btn a,
    .home-req .home-req-left .home-req-left-btn a:visited{font-size: 13px; min-height: 42px; border-radius: 14px}
    .home-req .home-req-right img{min-height: 190px; max-height: 220px; border-radius: 16px}
}

/* footer */
footer{background: var(--ss--blue-900); margin-top: 40px; color: var(--ss--white)}
footer .footer-items{padding: 40px 0 20px;}
footer .footer-items .footer--top-items{display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #FFFFFF33}
footer .footer-items .footer--top-items .footer--top-items-left{display: flex; flex-direction: column; gap: 12px; width: 32%}
footer .footer-items .footer--top-items .footer--top-items-left p{margin: 0}
footer .footer-items .footer-column-title{display: inline-flex; align-items: center; width: fit-content; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ss--white); margin-bottom: 10px; letter-spacing: 0.2px; padding-bottom: 10px; position: relative}
footer .footer-items .footer-column-title::after{content: ""; position: absolute; left: 0; bottom: 0; width: 52%; height: 3px; border-radius: 999px; background: var(--ss--red)}
footer .footer-items .footer--top-items .footer--top-items-left > div:not(.footer-column-title){display: flex; align-items: center; gap: 12px}
footer .footer-items .footer--top-items .footer--top-items-left > div:not(.footer-column-title) > div i{font-size: 16px; line-height: 1; color: rgba(255, 255, 255, 0.9)}
footer .footer-items .footer--top-items .footer--top-items-left span,
footer .footer-items .footer--top-items .footer--top-items-left a,
footer .footer-items .footer--top-items .footer--top-items-left a:visited{font-size: 14px; color: rgba(255, 255, 255, 0.9)}
footer .footer-items .footer--top-items .footer--top-items-left .footer-contact-note{align-items: flex-start}
footer .footer-items .footer--top-items .footer--top-items-left .footer-contact-note a,
footer .footer-items .footer--top-items .footer--top-items-left .footer-contact-note a:visited{line-height: 1.5}
footer .footer-items .footer--top-items .footer--top-items-right{flex: 1; min-width: 0}
footer .footer-items .footer--top-items .footer--top-items-right ul{display: flex; flex-direction: column; gap: 12px; margin-top: 2px}
footer .footer-items .footer--top-items .footer--top-items-right ul li a,
footer .footer-items .footer--top-items .footer--top-items-right ul li a:visited{color: rgba(255, 255, 255, 0.82); transition: color 0.2s ease, transform 0.2s ease}
footer .footer-items .footer--top-items .footer--top-items-right ul li a:hover{color: var(--ss--white); transform: translateX(2px)}
footer .footer-items .footer--bottom-items{display: flex; justify-content: space-between}
footer .footer-items .footer--bottom-items .footer--bottom-items-left{}
footer .footer-items .footer--bottom-items .footer--bottom-items-left .footer--bottom-items-left-title{margin-bottom: 12px}
footer .footer-items .footer--bottom-items .footer--bottom-items-left .footer--bottom-items-left-title span{font-size: 14px}
footer .footer-items .footer--bottom-items .footer--bottom-items-left .footer--bottom-items-left-form{}
footer .footer-items .footer--bottom-items .footer--bottom-items-left .footer--bottom-items-left-form{max-width: 460px; width: 100%}
.footer-feedback-btn{width: auto; min-width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 22px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: transparent; color: var(--ss--white); font-size: 15px; font-weight: 600; box-shadow: none; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease, color 0.28s ease}
.footer-feedback-btn i{width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ss--red); color: var(--ss--white); font-size: 13px; box-shadow: none}
.footer-feedback-btn:hover{transform: translateY(-3px); color: var(--ss--white); border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 12px 24px rgba(6, 18, 38, 0.18); background: rgba(255, 255, 255, 0.08)}
footer .footer-items .footer--bottom-items .footer--bottom-items-right{}
footer .footer-items .footer--bottom-items .footer--bottom-items-right .footer--bottom-items-right-title{margin-bottom: 12px; text-align: right}
footer .footer-items .footer--bottom-items .footer--bottom-items-right .footer--bottom-items-right-title span{font-size: 14px}
footer .footer-items .footer--bottom-items .footer--bottom-items-right ul{display: flex; align-items: center; gap: 16px; padding: 0; margin: 0}
footer .footer-items .footer--bottom-items .footer--bottom-items-right ul li{display: inline-flex}
footer .footer-items .footer--bottom-items .footer--bottom-items-right ul li a,
footer .footer-items .footer--bottom-items .footer--bottom-items-right ul li a:visited{width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ss--gray-200); color: var(--ss--white); text-decoration: none; transition: all 0.25s ease}
footer .footer-items .footer--bottom-items .footer--bottom-items-right ul li a i{width: 24px; height: 24px; font-size: 18px; line-height: 24px; text-align: center}
footer .footer-items .footer--bottom-items .footer--bottom-items-right ul li a:hover{background: rgba(255, 255, 255, 0.15); border-color: var(--ss--white); transform: translateY(-2px)}
@media (max-width: 992px) {
    footer .footer-items .footer--top-items{flex-direction: column; gap: 18px}
    footer .footer-items .footer--top-items .footer--top-items-left,
    footer .footer-items .footer--top-items .footer--top-items-right{width: 100%}
}

/* tools */
.tools-shell{position: relative; z-index: 999}
.tools-toggle{display:none}
.tools{position: fixed; right: var(--tool-dock-offset); top: 50%; transform: translateY(-50%); background: var(--ss--white); border-radius: 36px; padding: 12px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 42px rgba(16, 24, 40, 0.18), 0 8px 20px rgba(16, 24, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 999}
.tools .tool{display: flex; justify-content: center; flex: 0 0 auto}
.tools .tool a{width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none; color: var(--ss--red); background: linear-gradient(180deg, #FCFDFF 0%, #F3F6FA 100%); border: 1px solid #D7DEE8; transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease; position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(16, 24, 40, 0.1)}
.tools .tool a .icon{width: 20px; height: 20px; position: absolute; transition: opacity 0.25s ease, transform 0.25s ease}
.tools .tool a .icon-default{opacity: 1; transform: scale(1)}
.tools .tool a .icon-hover{opacity: 0; transform: scale(0.9)}
.tools .tool a:hover{background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%); border-color: #C7D1DE; color: var(--ss--red); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px rgba(16, 24, 40, 0.12)}
.tools .tool a:hover .icon-default{opacity: 1; transform: scale(1)}
.tools .tool a:hover .icon-hover{opacity: 0; transform: scale(0.9)}
.tools .tool a:active{transform: translateY(-1px)}
.tools .tool a.active{background: var(--ss--brand--book); color: var(--ss--white); border-color: transparent; box-shadow: 0 10px 20px rgba(39, 92, 229, 0.26)}
.tools .tool a.active .icon-default{opacity: 0; transform: scale(0.9)}
.tools .tool a.active .icon-hover{opacity: 1; transform: scale(1)}
.tools-toggle{position: fixed; right: var(--tool-dock-offset); bottom: calc(var(--tool-safe-bottom) + 2px); width: var(--tool-fab-size); height: var(--tool-fab-size); border: 1px solid #D7DEE8; border-radius: 999px; background: linear-gradient(180deg, #FCFDFF 0%, #F3F6FA 100%); color: var(--ss--red); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(16, 24, 40, 0.12); align-items: center; justify-content: center; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; z-index: 1001}
.tools-toggle:hover{background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%); border-color: #C7D1DE; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 24px rgba(16, 24, 40, 0.14)}
.tools-toggle__icon{position: absolute; font-size: 18px; line-height: 1; transition: opacity 0.24s ease, transform 0.24s ease}
.tools-toggle__icon--close{opacity: 0; transform: rotate(-90deg) scale(0.8)}
.tools-toggle.is-active .tools-toggle__icon--open{opacity: 0; transform: rotate(90deg) scale(0.8)}
.tools-toggle.is-active .tools-toggle__icon--close{opacity: 1; transform: rotate(0deg) scale(1)}
.tool-fab{position: fixed; right: var(--tool-dock-offset); z-index: 999}
.ai-tool{bottom: var(--tool-safe-bottom)}
.ai-tool a{width: var(--tool-fab-size); height: var(--tool-fab-size); display: flex; align-items: center; justify-content: center; border-radius: 999px; background: linear-gradient(180deg, #FCFDFF 0%, #F3F6FA 100%); border: 1px solid #D7DEE8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(16, 24, 40, 0.08); text-decoration: none; position: relative; overflow: hidden; transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease; color: var(--ss--red)}
.ai-tool .icon{font-size: 24px; line-height: 1; position: absolute; transition: opacity 0.25s ease, transform 0.25s ease; color: currentColor}
.ai-tool .icon-default{opacity: 1; transform: scale(1)}
.ai-tool .icon-hover{opacity: 0; transform: scale(0.9); color: var(--ss--white)}
.ai-tool a:hover{background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%); border-color: #C7D1DE; transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px rgba(16, 24, 40, 0.12)}
.ai-tool a:hover .icon-default{opacity: 1; transform: scale(1)}
.ai-tool a:hover .icon-hover{opacity: 0; transform: scale(0.9)}

/* scroll top */
.scroll-top-btn{bottom: calc(var(--tool-safe-bottom) + var(--tool-fab-size) + var(--tool-stack-gap)); width: var(--tool-fab-size); height: var(--tool-fab-size); border: 1px solid #D7DEE8; border-radius: 999px; background: linear-gradient(180deg, #FCFDFF 0%, #F3F6FA 100%); color: var(--ss--red); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(16, 24, 40, 0.1); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease; z-index: 998}
.scroll-top-btn i{font-size: 16px}
.scroll-top-btn:hover{background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%); border-color: #C7D1DE; transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px rgba(16, 24, 40, 0.12); animation: scrollTopFloat 0.9s ease-in-out infinite}
.scroll-top-btn i{transition: transform 0.28s ease}
.scroll-top-btn:hover i{transform: translateY(-3px)}
.scroll-top-btn.is-visible{opacity: 1; visibility: visible; transform: translateY(0)}
@keyframes scrollTopFloat{0% {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px rgba(16, 24, 40, 0.12); } 50% {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 14px 28px rgba(16, 24, 40, 0.16); } 100% {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px rgba(16, 24, 40, 0.12); }}

/* tabs */
.tabs{margin-bottom: 24px; padding: 12px; border-radius: 24px; box-shadow: var(--ss--box-shadow); background: var(--ss--white)}
.tabs ul{display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px}
.tabs ul li{flex: 1 1 220px; display: flex; align-items: stretch; justify-content: center; padding: 0; min-width: 0}
.tabs ul li a{display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; height: 100%; padding: 5px 24px; border-radius: 20px; color: var(--ss--gray-800); font-size: 20px; line-height: 1.3; white-space: normal; word-break: break-word; text-decoration: none; text-align: center; border: 1px solid #D7DEE8; background: linear-gradient(180deg, #FCFDFF 0%, #F3F6FA 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(16, 24, 40, 0.08); transform: translateY(0); transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease}
.tabs ul li a:hover{background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%); border-color: #C7D1DE; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px rgba(16, 24, 40, 0.12); transform: translateY(-3px)}
.tabs ul li a:active{transform: translateY(-1px)}
.tabs ul li a.active{background: var(--ss--brand--book); color: var(--ss--white); border-color: transparent; box-shadow: 0 10px 20px rgba(39, 92, 229, 0.26); transform: translateY(0)}
@media (max-width: 991px) {
    .tabs ul li{flex-basis: calc(50% - 6px)}
    .tabs ul li a{font-size: 18px; padding: 8px 16px}
}
@media (max-width: 767px) {
    .tabs{margin-bottom: 20px; padding: 8px; border-radius: 20px; overflow: hidden}
    .tabs ul{flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; margin: 0 -2px; padding: 2px; scrollbar-width: none}
    .tabs ul::-webkit-scrollbar{display: none}
    .tabs ul li{flex: 0 0 auto; width: auto; min-width: 150px}
    .tabs ul li a{min-height: 42px; padding: 10px 14px; border-radius: 16px; font-size: 15px; white-space: nowrap; word-break: normal}
}
@media (max-width: 480px) {
    .tabs ul li{min-width: 132px}
    .tabs ul li a{min-height: 40px; padding: 9px 12px; font-size: 14px}
}

/* article */
.article-items{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px}
.article-items .article-item,
.article-top-item{padding: 24px; border: 1px solid #D8DEE8; border-radius: 24px; box-shadow: var(--ss--box-shadow); background: var(--ss--white)}
.article-items .article-item-link,
.article-items .article-item-link:visited{display: block; height: 100%}
.article-swiper.article-items{display: block; padding-bottom: 5px}
.article-swiper.article-items .swiper-wrapper{display: flex; gap: 0}
.article-swiper .swiper-slide{height: auto}
.article-swiper .article-item{height: 100%}
.article-top-item{width: 100%; margin-bottom: 24px; transition: transform 0.25s ease, box-shadow 0.25s ease}
.article-top-item:hover{transform: translateY(-4px); box-shadow: 0 14px 32px rgba(16, 24, 40, 0.18)}
.article-items .article-item-link .article-item,
.article-items .article-item-link:visited .article-item{display: flex; flex-direction: column; gap: 8px}
.article-items .article-item-link .article-item{height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease}
.article-items .article-item-link .article-item-image{position: relative; overflow: hidden; border-radius: 24px}
.article-items .article-item-link .article-item-image .article-item-image-overlay{position: absolute; inset: 0; background: var(--ss--blue-gradient); opacity: 0.9; pointer-events: none}
.article-items .article-item-link .article-item-image img{transition: transform 0.35s ease}
.article-items .article-item-link .article-item-more .icon{transition: transform 0.25s ease}
.article-items .article-item-link:hover .article-item,
.article-items .article-item-link:focus-visible .article-item{transform: translateY(-6px); border-color: #C5CEDB; box-shadow: 0 14px 32px rgba(16, 24, 40, 0.18)}
.article-items .article-item-link:hover .article-item-image img,
.article-items .article-item-link:focus-visible .article-item-image img{transform: scale(1.05)}
.article-items .article-item-link:hover .article-item-more .icon,
.article-items .article-item-link:focus-visible .article-item-more .icon{transform: translate(4px, -4px)}
.article-top-item a,
.article-top-item a:visited{display: grid; grid-template-columns: minmax(260px, 42%) 1fr; grid-template-rows: auto 1fr auto; gap: 24px; height: 100%}
.article-items .article-item .article-item-image,
.article-top-item .article-item-image{width: 100%}
.article-items .article-item .article-item-image img,
.article-top-item .article-item-image img{width: 100%; height: 300px; object-fit: cover; border-radius: 24px}
.article-top-item .article-item-image{grid-row: 1 / -1; height: 100%; overflow: hidden; border-radius: 24px}
.article-top-item .article-item-image img{border-radius: 24px}
.article-items .article-item .article-item-date,
.article-top-item .article-item-date{display: flex; gap: 5px; align-items: center}
.article-items .article-item .article-item-date .icon,
.article-top-item .article-item-date .icon{}
.article-items .article-item .article-item-date span,
.article-top-item .article-item-date span{color: var(--ss--gray-500); font-size: 16px}
.article-top-item .article-item-date{grid-column: 2; grid-row: 3; align-self: end}
.article-items .article-item .article-item-name,
.article-top-item .article-item-name{}
.article-items .article-item .article-item-name span,
.article-top-item .article-item-name span{color: var(--ss--gray-700); font-size: 18px; font-weight: 700}
.article-top-item .article-item-name span{font-size: 36px}
.article-top-item .article-item-name{grid-column: 2; grid-row: 1}
.article-items .article-item .article-item-description,
.article-top-item .article-item-description{}
.article-items .article-item .article-item-description span,
.article-top-item .article-item-description span{color: var(--ss--gray-500); font-size: 16px}
.article-top-item .article-item-description span{font-size: 18px}
.article-top-item .article-item-description{grid-column: 2; grid-row: 2}
.article-items .article-item .article-item-more,
.article-top-item .article-item-more{margin-top: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap}
.article-items .article-item .article-item-more span,
.article-top-item .article-item-more span{color: var(--ss--red); font-size: 14px; white-space: nowrap}
.article-items .article-item .article-item-more .icon,
.article-top-item .article-item-more .icon{flex: 0 0 auto}
.article-top-item .article-item-more{grid-column: 2; grid-row: 3; justify-self: end; align-self: end; display: inline-flex; align-items: center; gap: 8px}
.article-top-item .article-item-more .icon{transition: transform 0.25s ease}
.article-top-item:hover .article-item-more .icon{transform: translate(4px, -4px)}
@media (max-width: 992px) {
    .article-items{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px}
    .article-items .article-item,
    .article-top-item{padding: 20px; border-radius: 20px}
    .article-items .article-item-link .article-item-image,
    .article-top-item .article-item-image,
    .article-top-item .article-item-image img{border-radius: 20px}
    .article-items .article-item .article-item-image img,
    .article-top-item .article-item-image img{height: 260px}
    .article-items .article-item .article-item-name span{font-size: 17px; line-height: 1.45}
    .article-top-item .article-item-name span{font-size: 28px; line-height: 1.25}
    .article-pagination{margin: 32px 0}
    .article-pagination ul{gap: 14px; flex-wrap: wrap; justify-content: center}
    .article-pagination li a,
    .article-pagination li span{width: 44px; height: 44px}
}
@media (max-width: 992px) {
    .article-top-item a,
    .article-top-item a:visited{grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto; gap: 16px}
    .article-top-item .article-item-image{grid-column: 1 / -1; grid-row: 1; height: 240px}
    .article-top-item .article-item-name{grid-column: 1 / -1; grid-row: 2}
    .article-top-item .article-item-description{grid-column: 1 / -1; grid-row: 3}
    .article-top-item .article-item-date{grid-column: 1; grid-row: 4}
    .article-top-item .article-item-more{grid-column: 2; grid-row: 4; justify-self: end}
}
@media (max-width: 767px) {
    .article-items{grid-template-columns: 1fr; gap: 16px}
    .home-article{margin-top: 28px}
    .article-swiper.article-items{padding-bottom: 2px}
    .article-items .article-item,
    .article-top-item{padding: 16px; border-radius: 18px}
    .article-items .article-item-link .article-item{gap: 10px}
    .article-items .article-item-link .article-item-image,
    .article-items .article-item .article-item-image img{border-radius: 18px}
    .article-items .article-item .article-item-image img,
    .article-top-item .article-item-image img{height: 220px}
    .article-items .article-item .article-item-date span,
    .article-top-item .article-item-date span{font-size: 14px}
    .article-items .article-item .article-item-name span,
    .article-top-item .article-item-name span{font-size: 16px}
    .article-items .article-item-link:hover .article-item,
    .article-items .article-item-link:focus-visible .article-item,
    .article-top-item:hover{transform: none; box-shadow: var(--ss--box-shadow)}
    .article-top-item .article-item-name span{line-height: 1.35}
    .article-items .article-item .article-item-more,
    .article-top-item .article-item-more{margin-top: 2px}
    .article-items .article-item .article-item-more span,
    .article-top-item .article-item-more span{font-size: 13px}
    .home-article .home-article-more{margin-top: 24px}
    .article-pagination{margin: 24px 0}
    .article-pagination ul{gap: 10px}
    .article-pagination li a,
    .article-pagination li span{width: 40px; height: 40px; font-size: 14px}
}
@media (max-width: 480px) {
    .article-items .article-item,
    .article-top-item{padding: 14px; border-radius: 16px}
    .article-items .article-item-link .article-item-image,
    .article-items .article-item .article-item-image img{border-radius: 16px}
    .article-items .article-item .article-item-image img,
    .article-top-item .article-item-image img{height: 196px}
    .article-items .article-item .article-item-date span,
    .article-top-item .article-item-date span{font-size: 13px}
    .article-items .article-item .article-item-name span,
    .article-top-item .article-item-name span{font-size: 15px}
    .article-top-item a,
    .article-top-item a:visited{grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 12px}
    .article-top-item .article-item-date,
    .article-top-item .article-item-more{grid-column: 1; justify-self: start}
    .article-items .article-item .article-item-more,
    .article-top-item .article-item-more{gap: 6px}
    .article-items .article-item .article-item-more span,
    .article-top-item .article-item-more span{font-size: 12px}
    .article-pagination ul{gap: 8px}
    .article-pagination li a,
    .article-pagination li span{width: 36px; height: 36px; font-size: 13px}
}
.article-pagination{display: flex; justify-content: center; margin: 40px 0}
.article-pagination ul{display: flex; align-items: center; gap: 24px}
.article-pagination li a{width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ss--blue-900); color: var(--ss--gray-500); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; font-weight: 500; transition: all 0.2s ease}
.article-pagination li span{width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ss--gray-400); font-size: 16px; font-weight: 500}
.article-pagination li.active a{background: var(--ss--red); color: var(--ss--white)}
.article-pagination li a:hover{background: var(--ss--blue-900); color: var(--ss--white)}
.article-pagination i{font-size: 16px}

/* branch location */
.branch-location .branch-location-card{background: var(--ss--white); border-radius: 28px; box-shadow: var(--ss--box-shadow); padding: 28px; margin-bottom: 80px}
.branch-location .branch-filters{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--ss--gray-200)}
.branch-location .branch-filter-group{display: flex; flex-direction: column; gap: 8px}
.branch-location .branch-filter-group label{font-size: 18px; color: var(--ss--gray-700); font-weight: 600}
.branch-location .branch-filter-group select{height: 44px; border-radius: 16px; border: 1px solid var(--ss--gray-200); padding: 0 14px; font-size: 16px; color: var(--ss--gray-500); background: var(--ss--white); box-shadow: var(--ss--box-shadow); transition: all 0.25s ease}
.branch-location .branch-content{display: grid; grid-template-columns: 0.4fr 0.6fr; gap: 24px; padding-top: 24px}
.branch-location .branch-list{display: flex; flex-direction: column; gap: 16px; max-height: 640px; overflow-y: auto; padding-right: 6px}
.branch-location .branch-card{display: grid; grid-template-columns: 140px 1fr; gap: 16px; background: var(--ss--white); border-radius: 20px; padding: 16px; border: 1px solid transparent; box-shadow: var(--ss--box-shadow); transition: all 0.25s ease}
.branch-location .branch-card:hover{background: #F8FAFC; box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12); transform: translateY(-2px)}
.branch-location .branch-card.active{border-color: var(--ss--red); box-shadow: 0 10px 28px rgba(219, 53, 61, 0.18)}
.branch-location .branch-thumb{width: 140px; display: flex; flex-direction: column; gap: 8px}
.branch-location .branch-thumb__title{font-size: 18px; font-weight: 700; color: var(--ss--gray-700)}
.branch-location .branch-thumb__image{width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12)}
.branch-location .branch-thumb__image img{width: 100%; height: 100%; object-fit: cover}
.branch-location .branch-info h4{font-size: 18px; color: var(--ss--gray-700); margin: 0 0 6px; font-weight: 700}
.branch-location .branch-meta{display: flex; gap: 8px; align-items: flex-start; font-size: 16px; color: var(--ss--gray-500); line-height: 1.5}
.branch-location .branch-meta span{color: var(--ss--gray-700)}
.branch-location .branch-meta .icon{width: 16px; height: 16px; margin-top: 2px; filter: brightness(0) saturate(100%) invert(57%) sepia(8%) saturate(868%) hue-rotate(176deg) brightness(90%) contrast(86%)}
.branch-location .branch-meta__content{min-width: 0; color: var(--ss--gray-700)}
.branch-location .branch-meta__content p{margin: 0}
.branch-location .branch-meta__content p + p{margin-top: 4px}
.branch-location .branch-meta__content br{display: block; content: ""; margin-top: 2px}
.branch-location .branch-meta--address .icon{flex: 0 0 16px}
.branch-location .branch-meta--address .branch-meta__text{display: block; min-width: 0; color: var(--ss--gray-700)}
.branch-location .branch-map{position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--ss--box-shadow); height: 640px}
.branch-location .branch-map__actions{position: absolute; top: 18px; right: 18px; z-index: 2}
.branch-location .branch-map__mobile-actions{display:none}
.branch-location .branch-directions-button{display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--ss--red); color: var(--ss--white); font-size: 14px; font-weight: 700; box-shadow: 0 12px 26px rgba(219, 53, 61, 0.24); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease}
.branch-location .branch-directions-button:hover{transform: translateY(-1px); box-shadow: 0 16px 30px rgba(219, 53, 61, 0.28); color: var(--ss--white)}
.branch-location .branch-directions-button.is-disabled{opacity: 0.55; pointer-events: none; box-shadow: none}
.branch-location .branch-map iframe{width: 100%; height: 100%; border: 0; display: block}
.branch-map-info{max-width: 240px; color: var(--ss--gray-700); line-height: 1.5}
.branch-map-info strong{display: block; margin-bottom: 6px; font-size: 15px}
.branch-map-info__timetable{font-size: 13px; color: var(--ss--gray-500)}
.branch-map-info__timetable p{margin: 0}
.branch-map-info__timetable p + p{margin-top: 4px}
.branch-map-info__directions{display: inline-flex; margin-top: 10px; color: var(--ss--red); font-size: 13px; font-weight: 700}
.branch-location .branch-filters.reveal-on-scroll{transform: translateY(20px)}
.branch-location .branch-list.reveal-on-scroll{transform: translateX(-24px); opacity: 0}
.branch-location .branch-list.reveal-on-scroll.is-visible{transform: translateX(0); opacity: 1}
.branch-location .branch-map.reveal-on-scroll{transform: translateX(24px); opacity: 0}
.branch-location .branch-map.reveal-on-scroll.is-visible{transform: translateX(0); opacity: 1}
.branch-location .branch-card.reveal-on-scroll{opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease}
.branch-location .branch-card.reveal-on-scroll.is-visible{opacity: 1; transform: translateY(0)}
@media (max-width: 992px) {
    .branch-location .branch-location-card{padding: 24px; margin-bottom: 48px; border-radius: 24px}
    .branch-location .branch-filters{grid-template-columns: 1fr 1fr; align-items: center}
    .branch-location .branch-filter-group label{font-size: 16px}
    .branch-location .branch-filter-group select{font-size: 15px}
    .branch-location .branch-content{grid-template-columns: 1fr}
    .branch-location .branch-list{max-height: 520px}
    .branch-location .branch-card{grid-template-columns: 128px 1fr; gap: 14px; padding: 14px; border-radius: 18px}
    .branch-location .branch-thumb{width: 128px}
    .branch-location .branch-thumb__title{font-size: 16px}
    .branch-location .branch-info h4{font-size: 17px}
    .branch-location .branch-meta{font-size: 15px}
    .branch-location .branch-map{height: 420px; border-radius: 20px}
    .branch-location .branch-map__actions{top: 14px; right: 14px}
}
@media (max-width: 767px) {
    .branch-location .branch-location-card{padding: 18px; margin-bottom: 28px; border-radius: 20px; box-shadow: 0 16px 34px rgba(16, 24, 40, 0.08)}
    .branch-location .branch-filters{gap: 12px; padding-bottom: 18px}
    .branch-location .branch-filter-group{gap: 6px}
    .branch-location .branch-filter-group label{font-size: 14px}
    .branch-location .branch-filter-group select{height: 42px; border-radius: 14px; padding: 0 12px; font-size: 14px; box-shadow: none}
    .branch-location .branch-content{gap: 18px; padding-top: 18px}
    .branch-location .branch-map{order: -1}
    .branch-location .branch-list{gap: 12px; max-height: none; padding-right: 0}
    .branch-location .branch-card{grid-template-columns: 112px 1fr; gap: 12px; padding: 12px; border-radius: 16px; box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06)}
    .branch-location .branch-card:hover{transform: none; box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06)}
    .branch-location .branch-card.active{box-shadow: 0 12px 24px rgba(219, 53, 61, 0.14)}
    .branch-location .branch-thumb{width: 112px; gap: 6px}
    .branch-location .branch-thumb__title{font-size: 14px; line-height: 1.35}
    .branch-location .branch-thumb__image{border-radius: 14px; box-shadow: none}
    .branch-location .branch-info h4{font-size: 16px}
    .branch-location .branch-meta{gap: 6px; font-size: 13px; line-height: 1.55}
    .branch-location .branch-meta .icon{width: 14px; height: 14px}
    .branch-location .branch-meta__content p + p{margin-top: 2px}
    .branch-location .branch-map{height: 340px; border-radius: 18px}
    .branch-location .branch-map__actions{display:none}
    .branch-location .branch-map__mobile-actions{display:block; padding:12px}
    .branch-location .branch-directions-button{display: flex; width: 100%; min-height: 42px; padding: 10px 14px; border-radius: 14px; font-size: 13px; box-shadow: 0 10px 20px rgba(219, 53, 61, 0.16)}
    .branch-location .branch-directions-button:hover{transform: none; box-shadow: 0 10px 20px rgba(219, 53, 61, 0.16)}
    .branch-map-info{max-width: 220px; font-size: 13px}
    .branch-map-info strong{font-size: 14px}
    .branch-empty-state .alert{align-items: flex-start!important; padding: 14px 16px; border-radius: 16px}
}
@media (max-width: 576px) {
    .branch-location .branch-filters{grid-template-columns: 1fr}
    .branch-location .branch-location-card{padding: 20px}
    .branch-location .branch-card{grid-template-columns: 120px 1fr}
    .branch-location .branch-thumb{width: 120px}
}
@media (max-width: 480px) {
    .branch-location .branch-location-card{padding: 16px; border-radius: 18px}
    .branch-location .branch-filters{gap: 10px; padding-bottom: 16px}
    .branch-location .branch-filter-group label{font-size: 13px}
    .branch-location .branch-filter-group select{height: 40px; border-radius: 12px; font-size: 13px}
    .branch-location .branch-content{gap: 16px; padding-top: 16px}
    .branch-location .branch-card{grid-template-columns: 1fr; gap: 10px; padding: 12px; border-radius: 14px}
    .branch-location .branch-thumb{width: 100%}
    .branch-location .branch-thumb__image{aspect-ratio: 16 / 10}
    .branch-location .branch-thumb__title{font-size: 13px}
    .branch-location .branch-meta{font-size: 12px}
    .branch-location .branch-map{height: auto; border-radius: 16px}
    .branch-location #branchMap{min-height: 300px!important}
    .branch-location .branch-directions-button{min-height: 40px; padding: 9px 12px; border-radius: 12px; font-size: 12px}
    .branch-empty-state .alert{padding: 12px 14px; border-radius: 14px}
}

/* page banner */
.page-banner{position: relative; width: 100%; height: 500px; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: flex-end; justify-content: center; color: var(--ss--white); overflow: hidden; margin: 0 0 40px; padding-bottom: 80px}
.page-banner__overlay{position: absolute; inset: 0; background: var(--ss--blue-gradient); z-index: 1}
.page-banner__content{position: relative; width: 80%; z-index: 2; text-align: center}
.page-banner .breadcrumb{display: flex; justify-content: center; gap: 10px; margin-bottom: 12px; font-size: 20px; opacity: 0.9}
.page-banner .breadcrumb li,
.page-banner .breadcrumb li a{color: var(--ss--white)}
.page-banner .breadcrumb li i{font-size: 13px}
.page-banner .breadcrumb li:last-child::after{display: none}
.page-banner h2{font-size: 48px; font-weight: 700; margin: 0}
.page-banner__desc{max-width: 800px; font-size: 16px; line-height: 1.6; margin: 20px auto 0}
.page-banner__desc-toggle{display:none; margin:12px auto 0; padding:10px 14px; border:1px solid rgba(255,255,255,.34); border-radius:999px; background:rgba(255,255,255,.14); color:var(--ss--white); font-size:13px; font-weight:700; line-height:1; backdrop-filter:blur(8px)}
.page-banner__desc-toggle:hover{background:rgba(255,255,255,.22); color:var(--ss--white)}

/* vip-level */
.vip-level{margin-top: 60px}
.vip-level > span{display: block; font-size: 48px; font-weight: 600; text-align: center}
.vip-level__content{display: flex; flex-direction: column; gap: 20px}
.vip-card{background: var(--ss--white); border-radius: 24px; padding: 24px; box-shadow: var(--ss--box-shadow); border-bottom: 1px solid var(--ss--red); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease}
.vip-card__title{font-size: 20px; font-weight: 600; margin-bottom: 12px; color: var(--ss--gray-700)}
.vip-card p,
.vip-card__label{font-size: 14px; font-weight: 700; color: var(--ss--gray-500); margin-bottom: 6px}
.vip-card__block{margin-top: 14px}
.vip-card ol,
.vip-card ul{padding-left: 18px; margin: 0; font-size: 16px; line-height: 1.7; color: var(--ss--gray-500)}
.vip-card li{margin-bottom: 6px}
.vip-card__text{margin: 0; font-size: 18px; line-height: 1.6; color: var(--ss--gray-500)}
.vip-card-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px}
.vip-level ol,
.vip-level ol li{list-style: decimal!important}
.vip-level ul,
.vip-level ul li{list-style: disc!important}
.vip-card:hover{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12); border-color: #E4E7EC}
@media (max-width: 991px) {
    .vip-level{margin-top: 40px}
    .vip-level > span{font-size: 34px; line-height: 1.3}
    .vip-card{padding: 20px; border-radius: 20px}
    .vip-card-grid{gap: 16px}
}
@media (max-width: 768px) {
    .vip-level{margin-top: 28px}
    .vip-level > span{font-size: 22px}
    .vip-card{padding: 16px; border-radius: 18px; box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06)}
    .vip-card:hover{transform: none; box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06)}
    .vip-card-grid{grid-template-columns: 1fr}
    .vip-card__title{font-size: 18px}
    .vip-card ol,
    .vip-card ul,
    .vip-card__text{font-size: 15px; line-height: 1.65}
}
@media (max-width: 480px) {
    .vip-level > span{font-size: 18px}
    .vip-card{padding: 14px; border-radius: 16px}
    .vip-card__title{font-size: 16px}
    .vip-card ol,
    .vip-card ul,
    .vip-card__text{font-size: 14px}
}

/* vip-cta */
.vip-cta{position: relative; margin: 0 0 40px; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; min-height: 400px; display: flex; align-items: center; transition: transform 0.28s ease, box-shadow 0.28s ease}
.vip-cta__overlay{position: absolute; inset: 0; background: var(--ss--green); z-index: 1; transition: opacity 0.28s ease}
.vip-cta__content{position: relative; z-index: 2; max-width: 840px; padding: 32px 40px; color: var(--ss--white); margin: 0 auto}
.vip-cta__content p{margin: 0}
.vip-cta__title{font-size: 39px; font-weight: 600; margin-bottom: 12px; text-align: center}
.vip-cta__desc{font-size: 18px; margin-bottom: 18px; color: var(--ss--white); text-align: center}
.vip-cta__content ul,
.vip-cta__content ul li{list-style: disc!important; margin-left: 12px}
.vip-cta__btn{display: block; padding: 10px 22px; background: var(--ss--red); color: var(--ss--white); font-size: 14px; border-radius: 20px; text-decoration: none; transition: all .25s ease; width: fit-content; margin: 16px auto 0}
.vip-cta:hover{transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16, 24, 40, 0.16)}
.vip-cta:hover .vip-cta__overlay{opacity: 0.9}
.vip-cta__btn:hover{transform: translateY(-2px); filter: brightness(1.05)}
@media (max-width: 991px) {
    .vip-cta{min-height: 340px; margin-bottom: 28px}
    .vip-cta__content{padding: 28px 30px}
    .vip-cta__title{font-size: 30px}
    .vip-cta__desc{font-size: 16px; line-height: 1.7}
}
@media (max-width: 768px) {
    .vip-cta{min-height: 280px; border-radius: 20px; margin-bottom: 24px}
    .vip-cta:hover{transform: none; box-shadow: none}
    .vip-cta__content{padding: 24px}
    .vip-cta__title{font-size: 22px; line-height: 1.3}
    .vip-cta__desc{font-size: 14px; line-height: 1.7}
}
@media (max-width: 480px) {
    .vip-cta{min-height: 240px; border-radius: 18px; margin-bottom: 20px}
    .vip-cta__content{padding: 18px}
    .vip-cta__title{font-size: 18px}
    .vip-cta__desc{font-size: 13px}
}
.vip-page .vip-page__image{height: 500px; object-fit: cover}
@media (max-width: 991px) {
    .vip-page .feature-split__body{margin-left: 0; gap: 28px; align-items: center}
    .vip-page .feature-split__left{flex: 0 0 min(42%, 420px); width: min(42%, 420px)}
    .vip-page .feature-split__right{flex: 1 1 auto; max-width: none}
    .vip-page .vip-page__image{height: 420px; border-radius: 24px}
    .vip-page .feature-split__subtitle span{font-size: 34px; line-height: 1.2}
    .vip-page .feature-split__description,
    .vip-page .feature-split__description p,
    .vip-page .feature-split__description span{font-size: 16px; line-height: 1.75}
}
@media (max-width: 767px) {
    .vip-page .feature-split{padding: 8px 0}
    .vip-page .feature-split__body{flex-direction: column; gap: 20px; padding: 18px; border: 1px solid var(--ss--gray-200); border-radius: 20px; background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); box-shadow: 0 16px 32px rgba(16, 24, 40, 0.08)}
    .vip-page .feature-split__left,
    .vip-page .feature-split__right{width: 100%; flex-basis: auto}
    .vip-page .feature-split__image{max-width: 100%; margin: 0 auto}
    .vip-page .feature-split__bg-shape{display: none}
    .vip-page .vip-page__image{height: 280px; border-radius: 18px; box-shadow: none}
    .vip-page .feature-split__subtitle,
    .vip-page .feature-split__description{text-align: left}
    .vip-page .feature-split__subtitle{margin-bottom: 10px}
    .vip-page .feature-split__subtitle span{font-size: 24px; line-height: 1.25}
    .vip-page .feature-split__description,
    .vip-page .feature-split__description p,
    .vip-page .feature-split__description span{font-size: 15px; line-height: 1.7}
    .vip-page .feature-split__description p:last-child{margin-bottom: 0}
}
@media (max-width: 480px) {
    .vip-page .feature-split__body{padding: 14px; border-radius: 18px}
    .vip-page .vip-page__image{height: 228px; border-radius: 16px}
    .vip-page .feature-split__subtitle span{font-size: 20px}
    .vip-page .feature-split__description,
    .vip-page .feature-split__description p,
    .vip-page .feature-split__description span{font-size: 14px}
}

/* trust-section */
.trust-section__title{font-size: 35px; font-weight: 600; margin: 80px 0 24px}
.trust-section__description{font-size: 18px; color: var(--ss--gray-500)}
.trust-benefit{display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; margin: 32px 0 0; align-items: center}
.trust-benefit__left{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px}
.trust-card{background: var(--ss--white); border-radius: 24px; padding: 20px 22px; box-shadow: var(--ss--box-shadow); border-bottom: 1px solid var(--ss--red); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease}
.trust-card h4{font-size: 18px; margin-bottom: 10px; color: var(--ss--gray-700)}
.trust-card p{font-size: 16px; color: var(--ss--gray-500); margin: 0}
.trust-card--title-only h4{margin-bottom: 0}
.trust-card--wide{grid-column: 1 / -1}
.trust-card:hover{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12); border-color: #E4E7EC}
.trust-benefit__intro{margin: 16px 0 0; color: var(--ss--gray-700); font-size: 18px}
.trust-benefit__header{grid-column: 1 / -1}
.trust-benefit__right{position: relative}
.trust-image-wrap{position: relative; border-radius: 16px}
.trust-image-wrap::before{content: ""; position: absolute; top: -20px; right: -20px; width: 100%; height: 100%; background: var(--ss--brand--book); border-radius: 16px; z-index: 0; opacity: 0.8; transition: transform 0.28s ease, opacity 0.28s ease}
.trust-image-wrap img{width: 100%; height: 400px; border-radius: 14px; object-fit: cover; display: block; position: relative; z-index: 1; transition: transform 0.28s ease, box-shadow 0.28s ease}
.trust-image-wrap:hover img{transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16, 24, 40, 0.14)}
.trust-image-wrap:hover::before{transform: translate(8px, -8px); opacity: 0.92}

/* business-section: title-only card comfort styling */
.business-section .trust-benefit__left{counter-reset: biz-card}
.business-section .trust-card--title-only{position: relative; display: flex; align-items: center; min-height: 120px; padding: 0 22px 0 72px; border: 1px solid #E6ECF7; border-bottom: 1px solid #E6ECF7; background: linear-gradient(180deg, #FFFFFF 0%, #F9FBFF 100%); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease}
.business-section .trust-card--title-only::before{counter-increment: biz-card; content: counter(biz-card); position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ss--blue-900); background: rgba(255, 255, 255, 0.96); border: 1px solid #D8E2F4}
.business-section .trust-card--title-only h4{margin: 0; font-size: 18px; line-height: 1.55; color: #1E2A3B}
.business-section .trust-card--title-only:hover{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); border-color: #CBD8F2}
.business-section .trust-card--title-only.trust-card--wide{background: linear-gradient(120deg, #EFF4FF 0%, #F7FAFF 55%, #FFF4F4 100%); border-color: #D8E2F4}
.business-section .trust-card--title-only.trust-card--wide::before{color: var(--ss--white); background: var(--ss--red); border-color: transparent}
.business-section .trust-card--detailed{position: relative; min-height: auto; padding: 22px; border: 1px solid #E6ECF7; border-bottom: 1px solid #E6ECF7; background: linear-gradient(180deg, #FFFFFF 0%, #F9FBFF 100%); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease}
.business-section .trust-card--detailed h4{margin: 0; font-size: 18px; line-height: 1.55; color: #1E2A3B}
.business-section .trust-card--detailed p{margin: 0; font-size: 15px; line-height: 1.7; color: var(--ss--gray-500)}
.business-section .trust-card--detailed:hover{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); border-color: #CBD8F2}
.business-section .trust-card--detailed.trust-card--wide{background: linear-gradient(120deg, #EFF4FF 0%, #F7FAFF 55%, #FFF4F4 100%); border-color: #D8E2F4}
@media (max-width: 992px) {
    .trust-benefit{grid-template-columns: 1fr}
    .trust-benefit__left{grid-template-columns: 1fr}
    .trust-section__title{font-size: 28px; margin: 44px 0 18px}
    .trust-section__description{font-size: 16px; line-height: 1.7}
    .trust-card{border-radius: 20px}
    .trust-image-wrap{max-width: 720px; margin: 0 auto}
    .trust-image-wrap::before{top: -14px; right: -14px}
    .business-section .trust-card--title-only{min-height: auto; padding: 18px 16px 18px 62px}
    .business-section .trust-card--title-only h4{font-size: 17px; line-height: 1.5}
    .business-section .trust-card--title-only::before{left: 16px; width: 34px; height: 34px}
    .business-section .trust-card--detailed{min-height: auto; padding: 18px 16px}
    .business-section .trust-card--detailed h4{font-size: 17px; line-height: 1.5}
}
@media (max-width: 767px) {
    .trust-benefit{gap: 20px; margin-top: 22px}
    .trust-benefit__left{gap: 14px}
    .trust-section__title{font-size: 22px; margin: 28px 0 14px}
    .trust-section__description{font-size: 14px; line-height: 1.7}
    .trust-card{padding: 16px; border-radius: 18px; box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06)}
    .trust-card:hover,
    .business-section .trust-card--title-only:hover,
    .business-section .trust-card--detailed:hover{transform: none; box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06)}
    .trust-card h4,
    .business-section .trust-card--title-only h4,
    .business-section .trust-card--detailed h4{font-size: 16px; line-height: 1.45}
    .trust-card p,
    .business-section .trust-card--detailed p{font-size: 14px; line-height: 1.65}
    .trust-image-wrap{border-radius: 18px}
    .trust-image-wrap::before{display: none}
    .trust-image-wrap img{border-radius: 18px; height: auto;}
    .trust-image-wrap:hover img{transform: none; box-shadow: none}
    .business-section .trust-card--title-only{padding: 16px 14px 16px 56px; border-radius: 18px}
    .business-section .trust-card--title-only::before{left: 14px; width: 30px; height: 30px; font-size: 12px}
    .business-section .trust-card--detailed{padding: 16px 14px; border-radius: 18px}
}
@media (max-width: 480px) {
    .trust-section__title{font-size: 18px}
    .trust-card{padding: 14px; border-radius: 16px}
    .trust-card h4,
    .business-section .trust-card--title-only h4,
    .business-section .trust-card--detailed h4{font-size: 15px}
    .trust-card p,
    .business-section .trust-card--detailed p{font-size: 13px}
    .trust-image-wrap,
    .trust-image-wrap img{border-radius: 16px}
    .business-section .trust-card--title-only{padding: 14px 12px 14px 50px; border-radius: 16px}
    .business-section .trust-card--title-only::before{left: 12px; width: 28px; height: 28px}
    .business-section .trust-card--detailed{padding: 14px 12px; border-radius: 16px}
}

/* testimonial-section */
.testimonial-head{display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px}
.testimonial-title{font-size: 48px; font-weight: 600; color: var(--ss--gray-700); margin: 0}
.testimonial-nav{display: flex; align-items: center; gap: 14px}
.t-nav{width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ss--testimonial-gradient-muted); color: var(--ss--gray-500); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease}
.t-nav:hover{transform: translateY(-1px)}
.t-nav.is-active{background: var(--ss--testimonial-gradient-active); color: var(--ss--white)}
.testimonial-row{overflow: hidden}
.testimonial-row .swiper-wrapper{align-items: stretch}
.testimonial-row .swiper-slide{height: auto}
.t-card{border-radius: 14px; padding: 22px 22px 18px; background: var(--ss--testimonial-gradient-muted); min-height: 190px; box-shadow: var(--ss--box-shadow); overflow: hidden; height: 100%; transition: transform 0.28s ease, box-shadow 0.28s ease}
.testimonial-row .swiper-slide-active .t-card{background: var(--ss--testimonial-gradient-active); color: var(--ss--white)}
.testimonial-row .swiper-slide:hover .t-card{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 24, 40, 0.16)}
.testimonial-row .swiper-slide-active .t-name,
.testimonial-row .swiper-slide-active .t-role,
.testimonial-row .swiper-slide-active .t-text{color: var(--ss--gray-100)!important}
.t-card-head{display: flex; align-items: center; gap: 14px; margin-bottom: 14px}
.t-avatar{width: 85px; height: 85px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--ss--white)}
.t-avatar img{width: 100%; height: 100%; object-fit: cover; display: block}
.t-name{font-size: 28px; font-weight: 800; color: var(--ss--gray-900)}
.t-role{font-size: 20px; color: var(--ss--gray-700); font-weight: 600; margin-top: 4px}
.t-text{margin: 0; font-size: 16px; line-height: 1.6; color: var(--ss--gray-500)}

/* Responsive */
@media (max-width: 992px) {
    .testimonial-title{font-size: 34px}
}
@media (max-width: 520px) {
    .testimonial-section{padding: 0}
    .testimonial-title{font-size: 28px}
    .t-nav{width: 44px; height: 44px}
}

/* service-thumbnail */
.service-thumbnail{margin-top: 40px}
.service-thumbnail img{width: 100%; height: auto; object-fit: cover; border-radius: 16px}

/* about-values */
.about-values{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px}
.about-values > div{display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; row-gap: 12px; padding: 32px; background: var(--ss--white); border: 1px solid var(--ss--gray-200); border-radius: 24px; box-shadow: var(--ss--box-shadow); opacity: 0; transform: translateY(14px); animation: aboutValueReveal .75s cubic-bezier(.22, .61, .36, 1) forwards; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease}
.about-values > div:nth-child(1){animation-delay: .05s}
.about-values > div:nth-child(2){animation-delay: .13s}
.about-values > div:nth-child(3){animation-delay: .21s}
.about-values > div:hover{transform: translateY(-8px) scale(1.01); box-shadow: 0 24px 52px rgba(12, 32, 82, .16); border-color: rgba(5, 40, 130, .24)}
.about-values > div .icon,
.about-values > div .name,
.about-values > div .description{transition: transform .35s ease, color .35s ease, opacity .35s ease}
.about-values > div:hover .icon{transform: translateY(-3px) scale(1.04)}
.about-values > div:hover .name{transform: translateY(-2px); color: var(--ss--blue)}
.about-values > div:hover .description{transform: translateY(-1px)}
.about-values > div .icon{grid-column: 1; grid-row: 1}
.about-values > div .name{grid-column: 2; grid-row: 1; margin: 0; font-size: 36px; color: var(--ss--gray-700); font-weight: 600}
.about-values > div .description{grid-column: 1 / -1; font-size: 16px; color: var(--ss--gray-500); font-weight: 400}
.about-values > div .description ul,
.about-values > div .description ul li{list-style: disc; margin-left: 12px}
@keyframes aboutValueReveal{from {opacity: 0; transform: translateY(14px); } to {opacity: 1; transform: translateY(0); }}
@media (max-width: 992px) {
    .about-values{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px}
    .about-values > div{padding: 24px; border-radius: 20px}
    .about-values > div{column-gap: 16px}
    .about-values > div .name{font-size: 28px}
}
@media (max-width: 767px) {
    .about-values{grid-template-columns: 1fr; gap: 14px}
    .about-values > div{padding: 20px; border-radius: 18px; box-shadow: 0 14px 28px rgba(16, 24, 40, 0.08)}
    .about-values > div:hover{transform: none; box-shadow: 0 14px 28px rgba(16, 24, 40, 0.08)}
    .about-values > div .icon img{max-width: 52px; height: auto}
    .about-values > div{column-gap: 14px; row-gap: 10px}
    .about-values > div .name{font-size: 22px}
    .about-values > div .description{font-size: 15px; line-height: 1.7}
}

/* History Timeline */
.history-timeline{position: relative; padding: 60px 0; background-size: cover; background-position: center; color: var(--ss--white)}
.history-overlay{position: absolute; inset: 0; background: var(--ss--blue-gradient); z-index: 1}
.history-timeline .container{position: relative; z-index: 2}
.history-cards{display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px; width: 100%}
.history-cards-swiper{flex: 1; min-width: 0}
.history-cards-swiper .swiper-slide{display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; height: auto}
.history-cards-swiper .swiper-wrapper{transition-timing-function: cubic-bezier(.22, .61, .36, 1)}
.history-cards-swiper .swiper-slide{opacity: .65; transform: translateY(8px) scale(.985); transition: transform .45s ease, opacity .45s ease}
.history-cards-swiper .swiper-slide-active{opacity: 1; transform: translateY(0) scale(1)}
.history-card{flex-direction: column; background: var(--ss--white); color: var(--ss--gray-700); padding: 18px 24px; border-radius: 14px; max-width: none; font-size: 14px; font-weight: 500; box-shadow: var(--ss--box-shadow); display: flex; align-items: center; flex: 1 1 0; width: 100%; ; opacity: .88; transform: translateY(4px) scale(.995); transition: transform .45s ease, opacity .45s ease, box-shadow .45s ease, color .45s ease}
.history-cards-swiper .swiper-slide-active .history-card{opacity: 1; transform: translateY(0) scale(1)}
.history-card.active{color: var(--ss--gray-800)}
.history-arrow{width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ss--white); background: transparent; color: var(--ss--white); display: flex; align-items: center; justify-content: center; cursor: pointer; align-self: center; opacity: .92; transform: translateY(0) scale(1); transition: transform .35s ease, opacity .35s ease, color .35s ease, background-color .35s ease, border-color .35s ease}
.history-arrow:hover{background: rgba(255, 255, 255, .14); opacity: 1; transform: translateY(-2px) scale(1.08)}
.history-arrow:active{transform: translateY(-1px) scale(1.02)}
.history-arrow.is-disabled,
.history-arrow:disabled{opacity: .35; cursor: not-allowed; transform: none; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .45)}
.timeline{display: flex; align-items: flex-start; justify-content: center; width: 100%; --timeline-line-top: 47px; --timeline-track-offset: 12px}
.timeline-swiper{flex: 1; min-width: 0; position: relative}
.timeline-swiper .swiper-slide{width: 92px; flex-shrink: 0}
.timeline-swiper .swiper-wrapper{transition-timing-function: cubic-bezier(.22, .61, .36, 1)}
.timeline-swiper::before{content: ""; position: absolute; left: 0; right: 0; top: 58px; height: 2px; background: var(--ss--white); z-index: 0; pointer-events: none}
.timeline-track{display: flex; align-items: flex-start; justify-content: flex-start; gap: 0; position: relative; padding-top: var(--timeline-track-offset)}
.timeline-item{position: relative; text-align: center; z-index: 1; background: transparent; border: 0; padding: 0 6px; color: inherit; cursor: pointer; width: 100%}
.timeline-item .year{display: block; font-size: 18px; line-height: 1; margin-bottom: 44px; opacity: .9; transform: translateY(0) scale(1); transform-origin: center bottom; transition: transform .35s ease, opacity .35s ease, color .35s ease}
.timeline-item .year.big{font-weight: 700; opacity: 1; transform: translateY(-4px) scale(1.38)}
.timeline-item .dot{width: 12px; height: 12px; background: var(--ss--white); display: block; position: absolute; top: calc(var(--timeline-line-top) - 8px); left: 50%; transform: translateX(-50%) rotate(45deg); transition: all .35s ease}
.timeline-item .dot.red{width: 16px; height: 16px; background: var(--ss--red); top: calc(var(--timeline-line-top) - 10px)}
.timeline-item.is-disabled{opacity: .45; cursor: not-allowed}
.timeline-arrow{width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ss--white); background: transparent; color: var(--ss--white); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; top: 38px; opacity: .9; transform: translateY(0) scale(1); transition: transform .35s ease, opacity .35s ease, color .35s ease, background-color .35s ease, border-color .35s ease}
.timeline-arrow:hover{background: rgba(255, 255, 255, .14); opacity: 1; transform: translateY(-2px) scale(1.08)}
.timeline-arrow:active{transform: translateY(-1px) scale(1.02)}
.timeline-arrow.is-disabled,
.timeline-arrow:disabled{opacity: .35; cursor: not-allowed; transform: none; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .45)}

/* Responsive */
@media(max-width:992px) {
    .history-cards{gap: 12px}
    .timeline-swiper .swiper-slide{width: 78px}
    .timeline-item .year.big{transform: translateY(-2px) scale(1.2)}
}
@media(max-width:767px) {
    .history-timeline{padding: 40px 0}
    .history-cards{gap: 10px; margin-bottom: 28px}
    .history-cards-swiper .swiper-slide{flex-direction: column; gap: 14px}
    .history-card{flex: 1 1 100%}
    .history-card{padding: 16px 18px; border-radius: 12px; font-size: 13px; line-height: 1.6}
    .history-arrow{display: none}
    .timeline{--timeline-line-top: 42px; --timeline-track-offset: 10px}
    .timeline-swiper .swiper-slide{width: 68px}
    .timeline-swiper::before{top: 50px}
    .timeline-item .year{font-size: 15px; margin-bottom: 38px}
    .timeline-item .year.big{transform: translateY(-1px) scale(1.08)}
    .timeline-item .dot{width: 10px; height: 10px; top: calc(var(--timeline-line-top) - 11px)}
    .timeline-item .dot.red{width: 14px; height: 14px; top: calc(var(--timeline-line-top) - 13px)}
    .timeline-arrow{width: 34px; height: 34px; top: 34px}
}

/* Team grid */
.team-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px}
.team-card{position: relative; border-radius: 18px; overflow: hidden; cursor: pointer; transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(12, 32, 82, .10); transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s cubic-bezier(.22, .61, .36, 1)}
.team-card img{width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%); transition: filter .45s ease, transform .45s ease}
.team-overlay{position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(261.82deg, rgba(5, 40, 130, 0.12) 5.58%, rgba(5, 40, 130, 0.3) 98.73%); height: 110px; color: var(--ss--white); padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; transform: translateY(0); transition: background .4s ease, transform .4s ease}
.team-card:hover{transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 40px rgba(12, 32, 82, .18)}
.team-card:hover .team-overlay{background: var(--ss--blue-gradient); transform: translateY(-2px)}

/* Team modal */
.team-modal{position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 999}
.team-modal.is-open{display: flex}
.team-modal__backdrop{position: absolute; inset: 0; background: rgba(7, 16, 38, .48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease}
.team-modal__dialog{position: relative; width: min(760px, 92vw); background: var(--ss--white); color: var(--ss--gray-700); border-radius: 16px; padding: 24px; box-shadow: var(--ss--box-shadow); z-index: 1; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1)}
.team-modal.is-open .team-modal__backdrop{opacity: 1}
.team-modal.is-open .team-modal__dialog{opacity: 1; transform: translateY(0) scale(1)}
.team-modal__body{display: flex; flex-direction: column; gap: 16px}
.team-modal__header{display: flex; flex-direction: column; gap: 4px}
.team-modal__content{display: flex; flex-direction: column; gap: 16px; align-items: stretch}
.team-modal__media{flex: 0 0 auto; border-radius: 12px; overflow: hidden}
.team-modal__img{width: 100%; height: 100%; object-fit: cover; display: block}
.team-modal__text{flex: 1; min-width: 0}
.team-modal__close{position: absolute; top: 0; right: -50px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(15, 23, 42, .78); color: var(--ss--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 22px rgba(15, 23, 42, .22); transition: transform .2s ease, background-color .2s ease, border-color .2s ease}
.team-modal__close:hover{transform: translateY(-1px); background: rgba(15, 23, 42, .92); border-color: rgba(255,255,255,.4)}
.team-modal__close:active{transform: translateY(0)}
.team-modal__title{margin: 0 0 6px; font-size: 36px; color: var(--ss--gray-900); font-weight: 600}
.team-modal__role{margin: 0 0 12px; font-size: 16px; color: var(--ss--gray-500)}
.team-modal__desc{margin: 0; font-size: 16px; color: var(--ss--gray-700)}
body.team-modal-open{overflow: hidden}
@media(max-width:992px) {
    .team-modal{padding: 20px}
    .team-modal__dialog{width: min(680px, calc(100vw - 40px)); padding: 20px}
    .team-modal__content{gap: 16px}
    .team-modal__title{font-size: 28px}
    .team-modal__role{font-size: 15px}
}
@media(max-width:768px) {
    .team-modal{padding: 12px}
    .team-modal__dialog{width: min(420px, calc(100vw - 24px)); padding: 14px; border-radius: 18px}
    .team-modal__body{flex-direction: column}
    .team-modal__content{gap: 12px}
    .team-modal__media{border-radius: 14px}
    .team-modal__img{max-height: 58vh}
    .team-modal__title{font-size: 22px; margin-bottom: 4px}
    .team-modal__role{margin-bottom: 0; font-size: 14px}
    .team-modal__text{width: 100%}
    .team-modal__header{align-items: center; text-align: center}
    .team-modal__close{top: -8px; right: -8px; width: 34px; height: 34px}
}
@media(max-width:480px) {
    .team-modal__dialog{width: calc(100vw - 20px); padding: 12px; border-radius: 16px}
    .team-modal__img{max-height: 52vh}
    .team-modal__close{top: -37px; right: -4px; width: 32px; height: 32px}
    .team-modal__title{font-size: 20px}
    .team-modal__role{font-size: 13px}
    .team-modal__content{gap: 10px}
    .team-modal__media{border-radius: 12px}
}
.team-overlay h4{margin: 0; font-size: 18px; font-weight: 600; transform: translateY(0); transition: transform .35s ease, opacity .35s ease}
.team-overlay p{margin: 6px 0 0; font-size: 14px; opacity: .9; transform: translateY(0); transition: transform .35s ease, opacity .35s ease}
.team-card:hover img{filter: grayscale(0%); transform: scale(1.06)}
.team-card:hover .team-overlay h4{transform: translateY(-2px)}
.team-card:hover .team-overlay p{transform: translateY(-1px); opacity: 1}

/* Responsive */
@media(max-width:1200px) {
    .team-grid{grid-template-columns: repeat(3, 1fr)}
}
@media(max-width:768px) {
    .team-grid{grid-template-columns: repeat(2, 1fr)}
}
@media(max-width:480px) {
    .team-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px}
    .team-card{border-radius: 16px; box-shadow: 0 10px 22px rgba(12, 32, 82, .10)}
    .team-overlay{height: auto; padding: 16px}
    .team-overlay h4{font-size: 16px}
    .team-overlay p{font-size: 13px}
}

/* structure */
.structure{}
.structure img{width: 100%; height: auto; object-fit: cover}

/* job-intro */
.job-intro{}
.job-intro img,
.job-team img{width: 100%; height: auto; object-fit: cover}
.job-middle__timeline{position: relative; display: flex; justify-content: space-between; gap: 24px; align-items: start}
.job-middle__step{flex: 0 0 auto}
.job-middle__line{position: absolute; top: 40px; left: 0; right: 0; height: 8px; border-radius: 999px; background: var(--ss--blue-gradient)}
.job-middle__step{position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px}
.job-middle__number{width: 82px; height: 82px; border-radius: 50%; border: 2px solid var(--ss--red); background: var(--ss--white); color: var(--ss--red); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; line-height: 1; box-shadow: 0 12px 24px rgba(11, 42, 118, 0); transform: translateY(0) scale(1); transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease}
.job-middle__label{max-width: 220px; color: var(--ss--gray-700); font-size: 18px; font-weight: 600; line-height: 1.35; transform: translateY(0); transition: transform .3s ease, color .3s ease}
.job-middle__step:hover .job-middle__number{transform: translateY(-8px) scale(1.06); box-shadow: 0 18px 30px rgba(11, 42, 118, .18); background: var(--ss--red); color: var(--ss--white); border-color: var(--ss--red)}
.job-middle__step:hover .job-middle__label{transform: translateY(-4px); color: var(--ss--red)}
.job-bottom{display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px}
.job-opening{background: var(--ss--white); border: 1px solid rgba(33, 72, 160, .12); border-radius: 28px; box-shadow: 0 18px 42px rgba(15, 38, 93, .08); overflow: hidden; transition: box-shadow .35s ease, transform .35s ease}
.job-opening:hover{transform: translateY(-2px); box-shadow: 0 22px 52px rgba(15, 38, 93, .12)}
.job-opening__summary{padding: 26px 28px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px}
.job-opening__toggle{flex: 1 1 auto; padding: 0; background: none; border: none; text-align: left; cursor: pointer}
.job-opening__heading h4{margin: 0; color: var(--ss--gray-900); font-size: 20px; font-weight: 700; line-height: 1.3}
.job-opening__salary{margin-top: 8px; color: #f04444; font-size: 16px; font-weight: 700}
.job-opening__apply{flex: 0 0 auto; min-width: 136px; padding: 16px 20px; border-radius: 18px; background: linear-gradient(90deg, #4f6fba 0%, #a6b8e3 100%); color: var(--ss--white); font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; box-shadow: 0 12px 24px rgba(79, 111, 186, .2); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease}
.job-opening__apply:hover{transform: translateY(-1px); box-shadow: 0 16px 28px rgba(79, 111, 186, .26); filter: saturate(1.08)}
.job-opening__meta{display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px 28px; padding: 0 0 18px; color: #6c7892; font-size: 14px; border-top: 2px solid rgba(52, 86, 171, .18); margin: 0 28px; padding-top: 18px; transition: padding .48s ease}
.job-opening.is-open .job-opening__meta{justify-content: center}
.job-opening__meta span{display: inline-flex; align-items: center; gap: 10px; will-change: transform, opacity}
.job-opening__meta i{color: #66738f}
.job-opening__content{max-height: 0; overflow: hidden; opacity: 0; padding: 0 28px; transition: max-height .58s cubic-bezier(.22, .61, .36, 1), opacity .4s ease, padding-bottom .4s ease}
.job-opening__content > div:last-child{padding-bottom: 28px}
.job-opening.is-open .job-opening__content{opacity: 1}
.job-opening__section{padding-top: 18px; border-top: 1px solid rgba(108, 120, 146, .24)}
.job-opening__section + .job-opening__section{margin-top: 8px}
.job-opening__section h5{margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--ss--gray-900)}
.job-opening__section li{list-style-type: disc}
.job-opening__section li,
.job-opening__section p,
.job-opening__section span{color: #6c7892!important; font-size: 16px!important; line-height: 1.6; margin: 0;}
.job-opening__section ul{margin: 0; padding-left: 22px; color: #6c7892; font-size: 16px; line-height: 1.6}
.job-team{width: min(1408px, calc(100% - 40px)); margin: 0 auto 72px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px}
.job-team__inner{min-width: 0; padding-top: 12px; overflow: hidden}
.job-team__swiper{overflow: visible}
.job-team__swiper .swiper-slide{height: auto; opacity: .72; transition: opacity .3s ease, transform .3s ease}
.job-team__swiper .swiper-slide-active,
.job-team__swiper .swiper-slide-duplicate-active{opacity: 1}
.job-team__card{position: relative; min-height: 304px; height: 100%; border-radius: 28px; padding: 40px 42px 36px; background: var(--ss--blue-gradient); color: var(--ss--gray-900); box-shadow: 0 20px 48px rgba(15, 38, 93, .16); overflow: hidden; transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s cubic-bezier(.22, .61, .36, 1), background .45s ease, color .35s ease}
.job-team__card::after{content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%); opacity: 0; transition: opacity .4s ease}
.job-team__swiper .swiper-slide-active .job-team__card,
.job-team__swiper .swiper-slide-duplicate-active .job-team__card{background: linear-gradient(261.82deg, rgba(5, 40, 130, 0.32) 5.58%, rgba(5, 40, 130, 0.8) 98.73%); color: var(--ss--white); transform: translateY(-4px); box-shadow: 0 28px 54px rgba(4, 22, 72, .28)}
.job-team__swiper .swiper-slide:hover .job-team__card{transform: translateY(-8px); box-shadow: 0 30px 58px rgba(4, 22, 72, .22)}
.job-team__swiper .swiper-slide:hover .job-team__card::after{opacity: 1}
.job-team__swiper .swiper-slide-active:hover .job-team__card,
.job-team__swiper .swiper-slide-duplicate-active:hover .job-team__card{transform: translateY(-10px); box-shadow: 0 34px 64px rgba(4, 22, 72, .3)}
.job-team__head{display: flex; align-items: center; gap: 18px; margin-bottom: 28px; transition: transform .4s cubic-bezier(.22, .61, .36, 1)}
.job-team__avatar{width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 3px solid rgba(255, 255, 255, .22); box-shadow: 0 10px 24px rgba(12, 31, 76, .18); transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease}
.job-team__avatar img{width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, .61, .36, 1)}
.job-team__meta h4{margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; transition: transform .35s ease, opacity .35s ease}
.job-team__meta p{margin: 8px 0 0; font-size: 14px; font-weight: 500; color: inherit; opacity: .86; transition: transform .35s ease, opacity .35s ease}
.job-team__text{margin: 0; font-size: 16px; line-height: 1.7; color: inherit; opacity: .92; transition: transform .4s ease, opacity .4s ease}
.job-team__swiper .swiper-slide:hover .job-team__head{transform: translateY(-2px)}
.job-team__swiper .swiper-slide:hover .job-team__avatar{transform: scale(1.06); box-shadow: 0 16px 28px rgba(12, 31, 76, .24)}
.job-team__swiper .swiper-slide:hover .job-team__avatar img{transform: scale(1.08)}
.job-team__swiper .swiper-slide:hover .job-team__meta h4,
.job-team__swiper .swiper-slide:hover .job-team__meta p,
.job-team__swiper .swiper-slide:hover .job-team__text{transform: translateY(-2px)}
.job-team__nav{width: 50px; height: 50px; border: none; border-radius: 50%; background: #5c88d4; color: var(--ss--white); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 18px rgba(27, 66, 149, .18); transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease}
.job-team__nav i{font-size: 14px}
.job-team__nav:hover{transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 22px rgba(27, 66, 149, .22); background: #4b76c2}
.job-team__nav:active{transform: scale(.98)}

/* cv-form */

/* ===== CV FORM ===== */
.cv-form{display: flex; flex-direction: column; gap: 24px; margin: 40px 0}
.cv-form .form-card{background: var(--ss--white); border-radius: 18px; padding: 24px 28px; box-shadow: var(--ss--box-shadow)}
.cv-form .form-title{color: var(--ss--red); font-size: 18px; font-weight: 600; margin-bottom: 20px}
.cv-form .form-grid{display: grid; gap: 16px 20px}
.cv-form .form-grid.grid-3{grid-template-columns: repeat(3, 1fr)}
.cv-form .form-grid.grid-2{grid-template-columns: repeat(2, 1fr)}
.cv-form .grid-full{grid-column: 1 / -1}

/* Input */
.cv-form .form-group{display: flex; flex-direction: row; align-items: center; gap: 12px}
.cv-form .form-group label{font-size: 13px; color: var(--ss--gray-700); margin-bottom: 0; min-width: 160px}
.cv-form .form-group input,
.cv-form .form-group select{height: 44px; border-radius: 22px; border: 1px solid var(--ss--gray-200); padding: 0 16px; font-size: 14px; outline: none; flex: 1}
.cv-form .form-group input:focus,
.cv-form .form-group select:focus{border-color: var(--ss--blue)}

/* Actions */
.cv-form .form-actions{display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px}

/* Buttons */
.btn{border: none; border-radius: 22px; padding: 10px 22px; font-size: 14px; cursor: pointer; color: var(--ss--white)}
.btn-red{background: var(--ss--red)}
.btn-blue{background: var(--ss--blue-gradient)}
.btn-submit{background: var(--ss--brand--book); padding: 14px 48px; font-size: 16px}

/* Submit */
.submit-wrap{display: flex; justify-content: center; margin-top: 30px}

/* Responsive */
@media(max-width:992px) {
    .cv-form .form-grid.grid-3{grid-template-columns: 1fr 1fr}
}
@media(max-width:576px) {
    .cv-form .form-grid.grid-3,
    .cv-form .form-grid.grid-2{grid-template-columns: 1fr}
    .cv-form .form-group{flex-direction: column; align-items: stretch}
    .cv-form .form-group label{min-width: 0}
}
@media(max-width:1200px) {
    .job-middle__label{font-size: 16px}
    .job-opening__summary,
    .job-opening__meta,
    .job-opening__content{padding-left: 24px; padding-right: 24px}
    .job-team{width: min(1308px, calc(100% - 24px)); gap: 14px}
    .job-team__card{padding: 32px 30px 30px}
    .job-team__nav{width: 40px; height: 40px}
    .job-team__nav i{font-size: 14px}
}
@media(max-width:992px) {
    .job-middle__step:hover .job-middle__number{transform: translateY(0) scale(1.03)}
    .job-middle__step:hover .job-middle__label{transform: translateX(4px)}
    .job-middle__timeline{display: grid; grid-template-columns: 1fr; gap: 18px}
    .job-middle__line{top: 40px; bottom: 40px; left: 40px; right: auto; width: 6px; height: auto; background: var(--ss--blue-gradient)}
    .job-middle__step{flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 18px; padding-left: 0}
    .job-middle__label{max-width: none}
    .job-opening__summary{flex-direction: column; align-items: stretch}
    .job-opening__apply{align-self: flex-start; min-width: 124px; padding: 14px 18px}
    .job-opening__meta{gap: 12px 20px; margin: 0 24px}
    .job-team{width: min(100%, calc(100% - 24px)); grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px}
    .job-team__inner{order: 1}
    .job-team__nav{width: 38px; height: 38px}
    .job-team__nav i{font-size: 13px}
    .job-team__nav--prev,
    .job-team__nav--next{position: absolute; top: 50%; z-index: 3; transform: translateY(-50%)}
    .job-team{position: relative}
    .job-team__nav--prev{left: 8px}
    .job-team__nav--next{right: 8px}
    .job-team__card{min-height: 260px; border-radius: 24px}
}
@media(max-width:767px) {
    .job-middle{margin: 28px 0 36px}
    .job-middle__timeline{gap: 14px}
    .job-middle__line{left: 31px; top: 30px; bottom: 30px; width: 4px; background: linear-gradient(180deg, rgba(5, 40, 130, .92) 0%, rgba(219, 53, 61, .88) 100%)}
    .job-middle__step{gap: 14px; align-items: center}
    .job-middle__number{width: 62px; height: 62px; font-size: 24px; border-width: 1px; box-shadow: 0 10px 20px rgba(11, 42, 118, .08)}
    .job-middle__label{padding-top: 0; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--ss--gray-600)}
    .job-middle__step:hover .job-middle__label{transform: none}
}
@media(max-width:576px) {
    .job-middle{margin: 32px 0 40px}
    .job-middle__number{width: 68px; height: 68px; font-size: 28px}
    .job-middle__line{left: 33px; top: 34px; bottom: 34px}
    .job-middle__label{font-size: 15px; line-height: 1.4}
    .job-bottom{gap: 16px; margin-bottom: 36px}
    .job-opening{border-radius: 22px}
    .job-opening__summary{padding: 20px 18px 14px; gap: 14px}
    .job-opening__toggle{width: 100%}
    .job-opening__heading h4{font-size: 18px}
    .job-opening__salary{font-size: 15px}
    .job-opening__apply{width: 100%; min-width: 0}
    .job-opening__meta{margin: 0 18px; padding: 14px 0 16px; gap: 10px 16px; font-size: 13px}
    .job-opening__content{padding-left: 18px; padding-right: 18px}
    .job-opening.is-open .job-opening__content{padding-bottom: 22px}
    .job-opening__section{padding-top: 16px}
    .job-opening__section h5{font-size: 17px; margin-bottom: 12px}
    .job-opening__section ul{font-size: 14px; line-height: 1.55}
    .job-team{width: min(100%, calc(100% - 16px)); margin-bottom: 44px}
    .job-team__card{min-height: 240px; padding: 24px 20px; border-radius: 20px}
    .job-team__head{gap: 14px; margin-bottom: 20px}
    .job-team__avatar{width: 68px; height: 68px}
    .job-team__meta h4{font-size: 18px}
    .job-team__meta p{font-size: 13px}
    .job-team__text{font-size: 14px; line-height: 1.6}
    .job-team__nav{width: 34px; height: 34px}
    .job-team__nav i{font-size: 12px}
    .job-team__nav--prev{left: 2px}
    .job-team__nav--next{right: 2px}
}
@media(max-width:420px) {
    .job-middle{margin: 22px 0 30px}
    .job-middle__timeline{gap: 12px}
    .job-middle__line{left: 27px; top: 26px; bottom: 26px}
    .job-middle__number{width: 54px; height: 54px; font-size: 20px}
    .job-middle__step{gap: 12px}
    .job-middle__label{padding-top: 6px; font-size: 13px}
}
@media(max-width:767px) {
    .job-opening{box-shadow: 0 12px 28px rgba(15, 38, 93, .08)}
    .job-opening:hover{transform: none; box-shadow: 0 12px 28px rgba(15, 38, 93, .08)}
    .job-opening__summary{gap: 12px}
    .job-opening__heading h4{line-height: 1.35}
    .job-opening__salary{margin-top: 6px; font-size: 14px}
    .job-opening__apply,
    .job-opening__apply:visited{display: flex; align-items: center; justify-content: center; align-self: stretch; width: 100%; min-width: 0; padding: 11px 14px; border-radius: 14px; box-shadow: none; text-align: center}
    .job-opening__meta{gap: 8px 14px}
    .job-opening__meta span{font-size: 13px}
    .job-opening__section h5{font-size: 16px}
    .job-opening__section li,
    .job-opening__section p,
    .job-opening__section span,
    .job-opening__section ul{font-size: 14px !important; line-height: 1.6}
    .job-team__card{box-shadow: 0 16px 34px rgba(15, 38, 93, .12)}
    .job-team__swiper .swiper-slide:hover .job-team__card,
    .job-team__swiper .swiper-slide-active:hover .job-team__card,
    .job-team__swiper .swiper-slide-duplicate-active:hover .job-team__card{transform: none}
    .job-team__nav{display: none}
}
@media(max-width:420px) {
    .job-middle{margin: 24px 0 32px}
    .job-middle__timeline{gap: 14px}
    .job-middle__number{width: 60px; height: 60px; font-size: 24px}
    .job-middle__line{left: 29px; top: 30px; bottom: 30px; width: 4px}
    .job-middle__step{gap: 14px}
    .job-middle__label{font-size: 14px}
    .job-bottom{gap: 14px; margin-bottom: 30px}
    .job-opening{border-radius: 18px}
    .job-opening__summary{padding: 16px 16px 10px}
    .job-opening__meta{margin: 0 16px; padding: 12px 0 14px}
    .job-opening__content{padding-left: 16px; padding-right: 16px}
    .job-opening.is-open .job-opening__content{padding-bottom: 18px}
    .job-opening__apply,
    .job-opening__apply:visited{font-size: 13px; min-height: 40px}
    .job-team{width: min(100%, calc(100% - 12px)); margin-bottom: 36px}
    .job-team__card{min-height: 220px; padding: 20px 16px; border-radius: 18px}
    .job-team__head{gap: 12px; margin-bottom: 16px}
    .job-team__avatar{width: 60px; height: 60px}
    .job-team__meta h4{font-size: 16px}
    .job-team__text{font-size: 13px}
    .job-team__nav{width: 32px; height: 32px}
}
.loan-form{background: var(--ss--white); padding: 40px; border-radius: 24px; box-shadow: var(--ss--box-shadow)}
.loan-form__notice{color: var(--ss--red); margin-bottom: 24px; font-size: 14px}
.loan-grid{display: grid; gap: 20px; margin-bottom: 20px}
.loan-grid.grid-3{grid-template-columns: repeat(3, 1fr)}
.loan-grid.grid-2{grid-template-columns: repeat(2, 1fr)}
.loan-form .form-group label{display: block; font-size: 14px; color: var(--ss--gray-700); margin-bottom: 6px}
.loan-form .form-group input[type="radio"]{width: 15px; height: 18px}
.loan-form .form-group input,
.loan-form .form-group select,
.loan-form .form-group textarea{width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--ss--gray-200); font-size: 14px; outline: none}
.loan-form .form-group textarea{min-height: 120px; resize: vertical}
.loan-form .radio-options{display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 8px}
.loan-form .radio-options label{display: flex; align-items: center; gap: 10px}
.loan-warning{margin: 20px 0; padding-left: 18px; color: var(--ss--red); font-size: 13px}
.loan-submit{display: block; margin: 0 auto; padding: 14px 64px; border-radius: 999px; border: none; background: var(--ss--brand--book); color: var(--ss--white); font-size: 16px; cursor: pointer}

/* collaboration */
.collaboration-page{padding: 28px 0 64px}
.collaboration-page .tabs{margin-bottom: 28px}
.collaboration-page .collaboration-tabs-two ul{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 12px}
.collaboration-page .collaboration-tabs-two ul li{flex: none; width: 100%}
.collaboration-page .collaboration-tabs-two ul li a{min-height: 52px}
.collaboration-page .collaboration-form{background: radial-gradient(circle at top right, rgba(39, 92, 229, 0.08), transparent 28%), linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid rgba(215, 222, 232, 0.85); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08)}
.collaboration-page .section-title,
.loan-request-page .section-title{position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 18px; padding-left: 18px; font-size: 24px; line-height: 1.25; color: var(--ss--gray-800)}
.collaboration-page .section-title::before,
.loan-request-page .section-title::before{content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 999px; background: var(--ss--red)}
.collaboration-page .loan-grid{gap: 18px 20px; margin-bottom: 28px}
.collaboration-page .loan-grid .span-2{grid-column: 1 / -1 !important; width: 100%}
.collaboration-page .loan-form .form-group{padding: 16px 18px; border-radius: 18px; background: var(--ss--white); border: 1px solid #E6ECF4; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease}
.collaboration-page .loan-form .form-group:hover{transform: translateY(-2px); border-color: #D7E0ED; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08)}
.collaboration-page .loan-form .form-group label{margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ss--gray-700)}
.collaboration-page .loan-form .form-group input,
.collaboration-page .loan-form .form-group select,
.collaboration-page .loan-form .form-group textarea{border-radius: 14px; border: 1px solid #D7DEE8; background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92); transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease}
.collaboration-page .loan-form .form-group input:focus,
.collaboration-page .loan-form .form-group select:focus,
.collaboration-page .loan-form .form-group textarea:focus{border-color: #9BB0D1; box-shadow: 0 0 0 3px rgba(39, 92, 229, 0.12); background: #FFFFFF}
.collaboration-page .loan-form .form-group .is-invalid,
.collaboration-page .loan-form .form-group .is-invalid:focus{border-color: #DB353D; box-shadow: 0 0 0 3px rgba(219, 53, 61, 0.12)}
.collaboration-page .loan-form .invalid-feedback{margin-top: 8px; font-size: 13px; color: #DB353D}
.collaboration-page .loan-form .form-group textarea{min-height: 140px}
.collaboration-page .loan-form .form-group.span-2 textarea{min-height: 180px}
.collaboration-page .radio-options{gap: 18px; margin-top: 10px}
.collaboration-page .radio-options label{padding: 10px 14px; border-radius: 999px; background: #F8FAFC; border: 1px solid #E4EAF3; cursor: pointer; transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease}
.collaboration-page .radio-options label:hover{background: #EEF3F8; border-color: #D3DDEB; transform: translateY(-1px)}
.collaboration-page .collab-upload-btn{display: inline-flex; align-items: center; justify-content: center; margin-bottom: 28px; padding: 14px 22px; border-radius: 16px; box-shadow: 0 12px 24px rgba(221, 38, 46, 0.16); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease}
.collaboration-page .collab-upload-btn:hover,
.collaboration-page .collab-upload-btn:focus{transform: translateY(-1px); box-shadow: 0 16px 30px rgba(221, 38, 46, 0.22); background-color: #c92a31; border-color: #c92a31; color: #fff}
.collaboration-page .collab-file-name{margin: -14px 0 12px; font-size: 13px; color: var(--ss--gray-500)}
.collaboration-page .collab-file-name.has-file{color: var(--ss--blue-900); font-weight: 600}
.collaboration-page .collab-upload-btn + .section-title{display: flex; width: 100%; margin-top: 8px}
.collaboration-page .submit-wrap{margin-top: 30px}
.collaboration-page .loan-submit{position: relative; min-width: 220px; box-shadow: 0 16px 30px rgba(39, 92, 229, 0.22); transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease}
.collaboration-page .loan-submit.is-loading{cursor: wait; opacity: 0.92}
.collaboration-page .loan-submit.is-loading::after{content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; animation: collab-spin 0.7s linear infinite; vertical-align: -3px}
.collaboration-page .loan-submit:hover{transform: translateY(-3px); box-shadow: 0 20px 34px rgba(39, 92, 229, 0.28); filter: brightness(1.02)}
@keyframes collab-spin{to {transform: rotate(360deg); }}

/* Responsive */
@media (max-width: 992px) {
    .loan-grid.grid-3,
    .loan-grid.grid-2{grid-template-columns: 1fr}
    .collaboration-page .section-title,
    .loan-request-page .section-title{font-size: 22px}
    .collaboration-page{padding: 24px 0 56px}
    .collaboration-page .tabs{margin-bottom: 22px}
    .collaboration-page .collaboration-form{padding: 28px; border-radius: 22px}
    .collaboration-page .loan-grid{gap: 16px; margin-bottom: 24px}
    .collaboration-page .loan-form .form-group{padding: 14px 16px; border-radius: 16px}
    .collaboration-page .loan-form .form-group:hover{transform: none; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05)}
    .collaboration-page .loan-form .form-group input,
    .collaboration-page .loan-form .form-group select,
    .collaboration-page .loan-form .form-group textarea{padding: 13px 14px}
    .collaboration-page .loan-form .form-group.span-2 textarea{min-height: 160px}
    .collaboration-page .collab-upload-btn{margin-bottom: 20px; padding: 13px 20px; border-radius: 14px}
    .collaboration-page .collab-file-name{margin: -8px 0 10px}
    .collaboration-page .submit-wrap{margin-top: 24px}
}
@media (max-width: 767px) {
    .collaboration-page{padding: 20px 0 44px}
    .collaboration-page .collaboration-tabs-two{padding: 8px}
    .collaboration-page .collaboration-tabs-two ul{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; margin: 0; padding: 0}
    .collaboration-page .collaboration-tabs-two ul li{min-width: 0}
    .collaboration-page .collaboration-tabs-two ul li a{min-height: 44px; padding: 10px 12px; font-size: 14px; white-space: normal}
    .collaboration-page .collaboration-form{padding: 20px; border-radius: 20px; box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08)}
    .collaboration-page .section-title{display: flex; width: 100%; margin: 10px 0 14px; padding-left: 14px; font-size: 18px}
    .collaboration-page .section-title::before{top: 2px; bottom: 2px; width: 3px}
    .collaboration-page .loan-grid{gap: 14px; margin-bottom: 20px}
    .collaboration-page .loan-form .form-group{padding: 12px 14px; border-radius: 14px; box-shadow: none}
    .collaboration-page .loan-form .form-group label{margin-bottom: 6px; font-size: 12px}
    .collaboration-page .loan-form .form-group input,
    .collaboration-page .loan-form .form-group select,
    .collaboration-page .loan-form .form-group textarea{padding: 12px 13px; border-radius: 12px; font-size: 14px}
    .collaboration-page .loan-form .form-group textarea{min-height: 120px}
    .collaboration-page .loan-form .form-group.span-2 textarea{min-height: 140px}
    .collaboration-page .loan-form .invalid-feedback{font-size: 12px}
    .collaboration-page .collab-upload-btn{display: inline-flex; width: 100%; min-height: 46px; margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; box-shadow: none}
    .collaboration-page .collab-upload-btn:hover,
    .collaboration-page .collab-upload-btn:focus{transform: none; box-shadow: none}
    .collaboration-page .collab-file-name{margin: -2px 0 6px; font-size: 12px; line-height: 1.5}
    .collaboration-page .submit-wrap{margin-top: 20px}
    .collaboration-page .loan-submit{display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 46px; padding: 13px 18px; box-shadow: 0 14px 24px rgba(39, 92, 229, 0.18)}
    .collaboration-page .loan-submit:hover{transform: none; box-shadow: 0 14px 24px rgba(39, 92, 229, 0.18)}
}
@media (max-width: 480px) {
    .collaboration-page .collaboration-tabs-two{padding: 6px}
    .collaboration-page .collaboration-tabs-two ul{gap: 6px}
    .collaboration-page .collaboration-tabs-two ul li a{min-height: 40px; padding: 9px 10px; font-size: 13px}
    .collaboration-page .collaboration-form{padding: 16px; border-radius: 16px}
    .collaboration-page .section-title{margin: 8px 0 12px; padding-left: 12px; font-size: 17px}
    .collaboration-page .loan-form .form-group{padding: 10px 12px; border-radius: 12px}
    .collaboration-page .loan-form .form-group input,
    .collaboration-page .loan-form .form-group select,
    .collaboration-page .loan-form .form-group textarea{padding: 11px 12px; font-size: 13px}
    .collaboration-page .loan-form .form-group textarea{min-height: 108px}
    .collaboration-page .loan-form .form-group.span-2 textarea{min-height: 126px}
    .collaboration-page .collab-upload-btn{min-height: 42px; padding: 11px 14px; font-size: 13px}
    .collaboration-page .loan-submit{min-height: 42px; padding: 12px 16px; font-size: 14px}
}

/* questionnaire */
.questionnaire-page{padding: 0 0 64px}
.questionnaire-page .cv-form{gap: 22px}
.questionnaire-page .form-card{border-radius: 24px; padding: 28px; background: radial-gradient(circle at top right, rgba(39, 92, 229, 0.06), transparent 26%), linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid rgba(215, 222, 232, 0.85); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08)}
.questionnaire-page .form-title{position: relative; margin-bottom: 22px; padding-left: 18px; font-size: 24px; line-height: 1.25; color: var(--ss--gray-800)}
.questionnaire-page .form-title::before{content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 999px; background: var(--ss--red)}
.questionnaire-page .form-grid{gap: 18px 20px}
.questionnaire-page .form-group{flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 18px; border-radius: 18px; background: var(--ss--white); border: 1px solid #E6ECF4; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease}
.questionnaire-page .form-group:hover{transform: translateY(-2px); border-color: #D7E0ED; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08)}
.questionnaire-page .form-group label{min-width: 0; margin-bottom: 0; font-size: 13px; font-weight: 600; color: var(--ss--gray-700)}
.questionnaire-page .form-group input,
.questionnaire-page .form-group select,
.questionnaire-page .form-group textarea{height: auto; width: 100%; border-radius: 14px; border: 1px solid #D7DEE8; background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); padding: 14px 16px; box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.92); transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease}
.questionnaire-page .form-group input:focus,
.questionnaire-page .form-group select:focus,
.questionnaire-page .form-group textarea:focus{border-color: #9BB0D1; background: #FFFFFF}
.questionnaire-page .form-group .is-invalid,
.questionnaire-page .form-group .is-invalid:focus{border-color: #DB353D; box-shadow: 0 0 0 3px rgba(219, 53, 61, 0.12)}
.questionnaire-page .invalid-feedback{margin-top: 8px; font-size: 13px; color: #DB353D}
.questionnaire-page .form-actions{justify-content: flex-end; margin-top: 22px}
.questionnaire-page .btn-blue{padding: 12px 24px; border-radius: 16px; box-shadow: 0 12px 24px rgba(39, 92, 229, 0.16)}
.questionnaire-page #questionnaire-address{min-height:120px}
.questionnaire-page .form-grid{align-items:start}
.questionnaire-page .form-section-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px}
.questionnaire-page .form-section-head .form-title{margin-bottom:0}
.questionnaire-page .work-experience-add-btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border:1px solid #db353d; border-radius:999px; background:#fff; color:#db353d; font-size:14px; font-weight:700; line-height:1; white-space:nowrap; transition:background-color .2s ease, color .2s ease, transform .2s ease}
.questionnaire-page .work-experience-add-btn:hover{background:#db353d; color:#fff; transform:translateY(-1px)}
.questionnaire-page .work-experience-add-btn--mobile{display:none}
.questionnaire-page .work-experience-item + .work-experience-item{margin-top:18px}
.questionnaire-page .education-item + .education-item,
.questionnaire-page .family-item + .family-item,
.questionnaire-page .software-item + .software-item,
.questionnaire-page .language-item + .language-item{margin-top:18px}
.questionnaire-page .work-experience-item,
.questionnaire-page .education-item,
.questionnaire-page .family-item,
.questionnaire-page .software-item,
.questionnaire-page .language-item{padding:0; border:0; border-radius:22px; background:transparent; box-shadow:none}
.questionnaire-page .work-experience-item__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px dashed #d7e0ed}
.questionnaire-page .work-experience-item__title{font-size:14px; font-weight:700; color:var(--ss--gray-700); letter-spacing:.01em}
.questionnaire-page .work-experience-item__head .btn{display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border:1px solid #cbd5e1; border-radius:999px; background:#fff; color:#475569; font-size:12px; font-weight:700; line-height:1; box-shadow:none}
.questionnaire-page .work-experience-item__head .btn:hover{border-color:#db353d; background:#fff5f5; color:#db353d}
.questionnaire-page .language-item > .form-grid + .form-grid{margin-top:14px; padding-top:14px; border-top:1px dashed #d7e0ed}
.questionnaire-page .language-item > .form-grid:first-of-type .form-group{max-width:none; grid-column:1 / -1; width:100%}
.questionnaire-page .radio-group{padding:18px 20px}
.questionnaire-page .radio-group .radio-options{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.questionnaire-page .radio-group .radio-options input[type="radio"]{width:16px; height:16px; flex:0 0 16px; margin:0}
.questionnaire-page .radio-group .radio-options label{display:inline-flex; align-items:center; gap:8px; min-width:96px; margin:0; padding:10px 12px; border:1px solid #d9e2ee; border-radius:14px; background:#fff; font-size:13px; font-weight:600; color:var(--ss--gray-700); cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.questionnaire-page .radio-group .radio-options label:hover{border-color:#c0cedf; transform:translateY(-1px)}
.questionnaire-page .radio-group .radio-options{border:1px solid transparent; border-radius:12px; padding:12px 14px; transition:border-color .2s ease, background-color .2s ease}
.questionnaire-page .radio-group.is-invalid .radio-options{border-color:#dc3545; background-color:rgba(220, 53, 69, 0.04)}
.questionnaire-page .radio-group.is-invalid > label{color:#dc3545}
.questionnaire-page .radio-group.is-invalid .radio-options label{color:#dc3545}
.questionnaire-page .radio-group.is-invalid .invalid-feedback{display:block}
@media (max-width: 767px) {
    .questionnaire-page .form-section-head{flex-direction:column; align-items:stretch}
    .questionnaire-page .work-experience-add-btn--desktop{display:none}
    .questionnaire-page .work-experience-add-btn--mobile{display:flex; width:100%; margin-top:14px}
    .questionnaire-page .language-item > .form-grid:first-of-type .form-group{max-width:none}
}
.questionnaire-page .btn-submit{position: relative; min-width: 220px; border-radius: 999px; box-shadow: 0 16px 30px rgba(39, 92, 229, 0.22); transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease}
.questionnaire-page .btn-submit.is-loading{cursor: wait; opacity: 0.92}
.questionnaire-page .btn-submit.is-loading::after{content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; animation: questionnaire-spin 0.7s linear infinite; vertical-align: -3px}
.questionnaire-page .btn-submit:hover{transform: translateY(-3px); box-shadow: 0 20px 34px rgba(39, 92, 229, 0.28); filter: brightness(1.02); color: var(--ss--white)}
@keyframes questionnaire-spin{to {transform: rotate(360deg); }}
@media(max-width:992px) {
    .questionnaire-page .form-title{font-size: 22px}
    .questionnaire-page .form-card{padding: 22px}
}
@media(max-width:767px) {
    .questionnaire-page{padding: 0 0 40px}
    .questionnaire-page .cv-form{gap: 16px; margin: 24px 0}
    .questionnaire-page .form-card{padding: 18px; border-radius: 18px; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06)}
    .questionnaire-page .form-title{margin-bottom: 16px; padding-left: 14px; font-size: 19px}
    .questionnaire-page .form-title::before{top: 3px; bottom: 3px; width: 3px}
    .questionnaire-page .form-grid{gap: 14px}
    .questionnaire-page .form-group{gap: 6px; padding: 12px 14px; border-radius: 14px; box-shadow: none}
    .questionnaire-page .form-group:hover{transform: none; box-shadow: none}
    .questionnaire-page .form-group label{font-size: 12px}
    .questionnaire-page .form-group input,
    .questionnaire-page .form-group select,
    .questionnaire-page .form-group textarea{padding: 12px 14px; border-radius: 12px; font-size: 14px}
    .questionnaire-page .form-actions{margin-top: 18px}
    .questionnaire-page .form-section-head{gap: 12px; margin-bottom: 16px}
    .questionnaire-page .work-experience-add-btn{padding: 9px 14px; font-size: 13px}
    .questionnaire-page .work-experience-item + .work-experience-item,
    .questionnaire-page .education-item + .education-item,
    .questionnaire-page .family-item + .family-item,
    .questionnaire-page .software-item + .software-item,
    .questionnaire-page .language-item + .language-item{margin-top: 14px}
    .questionnaire-page .work-experience-item__head{gap: 10px; margin-bottom: 12px; padding-bottom: 10px}
    .questionnaire-page .work-experience-item__title{font-size: 13px}
    .questionnaire-page .work-experience-item__head .btn{padding: 8px 12px; font-size: 11px}
    .questionnaire-page .radio-group{padding: 14px}
    .questionnaire-page .radio-group .radio-options{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; padding: 8px 0 0; border: 0; background: transparent}
    .questionnaire-page .radio-group .radio-options label{min-width: 0; width: 100%; padding: 9px 8px; border-radius: 12px; font-size: 12px; justify-content: flex-start; gap: 6px; text-align: left}
    .questionnaire-page .btn-submit{display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: 13px 18px; box-shadow: 0 14px 24px rgba(39, 92, 229, 0.18); text-align: center}
    .questionnaire-page .btn-submit:hover{transform: none; box-shadow: 0 14px 24px rgba(39, 92, 229, 0.18)}
}
@media(max-width:480px) {
    .questionnaire-page .form-card{padding: 16px; border-radius: 16px}
    .questionnaire-page .form-title{padding-left: 12px; font-size: 17px}
    .questionnaire-page .form-group{padding: 10px 12px}
    .questionnaire-page .form-group input,
    .questionnaire-page .form-group select,
    .questionnaire-page .form-group textarea{padding: 11px 12px; font-size: 13px}
    .questionnaire-page .form-section-head{align-items: stretch}
    .questionnaire-page .work-experience-add-btn{width: 100%; justify-content: center}
    .questionnaire-page .work-experience-item__head{flex-direction: column; align-items: stretch}
    .questionnaire-page .invalid-feedback{font-size: 12px}
}
@media(max-width:400px) {
    .questionnaire-page .radio-group .radio-options{display: flex; flex-wrap: wrap; justify-content: flex-start}
    .questionnaire-page .radio-group .radio-options label{min-width: max-content; width: auto}
}

/* loan request */
.loan-request-page{padding: 28px 0 64px}
.loan-request-page .tabs{margin-bottom: 28px}
.loan-request-page .loan-request-tabs-two ul{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 12px}
.loan-request-page .loan-request-tabs-two ul li{flex: none; width: 100%}
.loan-request-page .loan-request-tabs-two ul li a{min-height: 52px}
.loan-request-page .loan-request-form{background: radial-gradient(circle at top right, rgba(39, 92, 229, 0.08), transparent 28%), linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid rgba(215, 222, 232, 0.85); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08)}
.loan-request-page .loan-form__notice{margin-bottom: 0; padding: 16px 18px; border-radius: 18px; background: rgba(221, 38, 46, 0.06); border: 1px solid rgba(221, 38, 46, 0.14); color: #A12A30; font-size: 14px}
.loan-request-page .loan-grid{gap: 18px 20px; margin-bottom: 24px}
.loan-request-page .loan-grid .span-3{grid-column: 1 / -1 !important; width: 100%}
.loan-request-page .loan-form .form-group{padding: 16px 18px; border-radius: 18px; background: var(--ss--white); border: 1px solid #E6ECF4; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease}
.loan-request-page .loan-form .form-group:hover{transform: translateY(-2px); border-color: #D7E0ED; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08)}
.loan-request-page .loan-form .form-group label{margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ss--gray-700)}
.loan-request-page .loan-form .form-group input:not([type="radio"]),
.loan-request-page .loan-form .form-group select,
.loan-request-page .loan-form .form-group textarea{border-radius: 14px; border: 1px solid #D7DEE8; background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92); transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease}
.loan-request-page .loan-form .form-group input:not([type="radio"]):focus,
.loan-request-page .loan-form .form-group select:focus,
.loan-request-page .loan-form .form-group textarea:focus{border-color: #9BB0D1; box-shadow: 0 0 0 3px rgba(39, 92, 229, 0.12); background: #FFFFFF}
.loan-request-page .loan-form .form-group .is-invalid,
.loan-request-page .loan-form .form-group .is-invalid:focus{border-color: #DB353D; box-shadow: 0 0 0 3px rgba(219, 53, 61, 0.12)}
.loan-request-page .loan-form .invalid-feedback{margin-top: 8px; font-size: 13px; color: #DB353D}
.loan-request-page .loan-form .form-group textarea{min-height: 140px}
.loan-request-page .loan-form .radio-group,
.loan-request-page .loan-form > .form-group{margin-top: 10px}
.loan-request-page .radio-group{min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none}
.loan-request-page .radio-options{display: grid; grid-template-columns: 1fr; gap: 10px 12px; margin-top: 10px}
.loan-request-page .radio-options label{display: flex; align-items: center; gap: 8px; min-height: 52px; width: 100%; padding: 12px 14px; border: 1px solid #d9dfe8; border-radius: 12px; background: #fff; line-height: 1.35; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease}
.loan-request-page .radio-options label:hover{border-color: #bfc9d6; background-color: #fafbfd}
.loan-request-page .radio-options input[type="radio"]{margin-top: 0; flex: 0 0 auto}
.loan-request-page .radio-group.is-invalid .radio-options label{border-color: #dc3545}
.loan-request-page .loan-grid .form-group.radio-group{grid-column: span 3}
.loan-request-page .loan-warning{margin: 24px 0 0; padding: 18px 18px 18px 36px; border-radius: 18px; background: #FFF8F8; border: 1px solid #F2D9DB; color: #8C3A3F}
.loan-request-page .loan-warning li + li{margin-top: 10px}
.loan-request-page .submit-wrap{margin-top: 30px}
.loan-request-page .loan-submit{position: relative; min-width: 220px; box-shadow: 0 16px 30px rgba(39, 92, 229, 0.22); transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease}
.loan-request-page .loan-submit.is-loading{cursor: wait; opacity: 0.92}
.loan-request-page .loan-submit.is-loading::after{content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; animation: loan-request-spin 0.7s linear infinite; vertical-align: -3px}
.loan-request-page .loan-submit:hover{transform: translateY(-3px); box-shadow: 0 20px 34px rgba(39, 92, 229, 0.28); filter: brightness(1.02)}
@keyframes loan-request-spin{to {transform: rotate(360deg); }}
@media (max-width: 992px) {
    .loan-request-page{padding: 24px 0 56px}
    .loan-request-page .tabs{margin-bottom: 22px}
    .loan-request-page .loan-request-form{padding: 28px; border-radius: 22px}
    .loan-request-page .section-title{font-size: 22px}
    .loan-request-page .loan-form__notice{padding: 14px 16px; border-radius: 16px}
    .loan-request-page .loan-grid{gap: 16px; margin-bottom: 22px}
    .loan-request-page .loan-form .form-group{padding: 14px 16px; border-radius: 16px}
    .loan-request-page .loan-form .form-group:hover{transform: none; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05)}
    .loan-request-page .loan-form .form-group input:not([type="radio"]),
    .loan-request-page .loan-form .form-group select,
    .loan-request-page .loan-form .form-group textarea{padding: 13px 14px}
    .loan-request-page .loan-warning{padding: 16px 16px 16px 30px; border-radius: 16px}
    .loan-request-page .loan-grid .form-group.radio-group{grid-column: span 2}
    .loan-request-page .submit-wrap{margin-top: 24px}
}
@media (max-width: 767.98px) {
    .loan-request-page{padding: 20px 0 44px}
    .loan-request-page .loan-request-tabs-two{padding: 8px}
    .loan-request-page .loan-request-tabs-two ul{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; margin: 0; padding: 0}
    .loan-request-page .loan-request-tabs-two ul li{min-width: 0}
    .loan-request-page .loan-request-tabs-two ul li a{min-height: 44px; padding: 10px 12px; font-size: 14px; white-space: normal}
    .loan-request-page .loan-request-form{padding: 20px; border-radius: 20px; box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08)}
    .loan-request-page .section-title{display: flex; width: 100%; margin: 10px 0 14px; padding-left: 14px; font-size: 18px}
    .loan-request-page .section-title::before{top: 2px; bottom: 2px; width: 3px}
    .loan-request-page .loan-form__notice{padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6}
    .loan-request-page .loan-grid{gap: 14px; margin-bottom: 20px}
    .loan-request-page .loan-form .form-group{padding: 12px 14px; border-radius: 14px; box-shadow: none}
    .loan-request-page .loan-form .form-group label{margin-bottom: 6px; font-size: 12px}
    .loan-request-page .loan-form .form-group input:not([type="radio"]),
    .loan-request-page .loan-form .form-group select,
    .loan-request-page .loan-form .form-group textarea{padding: 12px 13px; border-radius: 12px; font-size: 14px}
    .loan-request-page .loan-form .form-group textarea{min-height: 120px}
    .loan-request-page .loan-form .invalid-feedback{font-size: 12px}
    .loan-request-page .loan-grid .form-group.radio-group{grid-column: span 1}
    .loan-request-page .radio-options{gap: 8px}
    .loan-request-page .radio-options label{min-height: 46px; padding: 10px 12px; font-size: 13px}
    .loan-request-page .loan-warning{margin-top: 18px; padding: 14px 14px 14px 24px; border-radius: 14px; font-size: 12px; line-height: 1.6}
    .loan-request-page .loan-warning li + li{margin-top: 8px}
    .loan-request-page .submit-wrap{margin-top: 20px}
    .loan-request-page .loan-submit{display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 46px; padding: 13px 18px; box-shadow: 0 14px 24px rgba(39, 92, 229, 0.18)}
    .loan-request-page .loan-submit:hover{transform: none; box-shadow: 0 14px 24px rgba(39, 92, 229, 0.18)}
}
@media (max-width: 480px) {
    .loan-request-page .loan-request-tabs-two{padding: 6px}
    .loan-request-page .loan-request-tabs-two ul{gap: 6px}
    .loan-request-page .loan-request-tabs-two ul li a{min-height: 40px; padding: 9px 10px; font-size: 13px}
    .loan-request-page .loan-request-form{padding: 16px; border-radius: 16px}
    .loan-request-page .section-title{margin: 8px 0 12px; padding-left: 12px; font-size: 17px}
    .loan-request-page .loan-form .form-group{padding: 10px 12px; border-radius: 12px}
    .loan-request-page .loan-form .form-group input:not([type="radio"]),
    .loan-request-page .loan-form .form-group select,
    .loan-request-page .loan-form .form-group textarea{padding: 11px 12px; font-size: 13px}
    .loan-request-page .loan-form .form-group textarea{min-height: 108px}
    .loan-request-page .radio-options label{min-height: 42px; padding: 9px 10px; font-size: 12px}
    .loan-request-page .loan-warning{padding: 12px 12px 12px 20px}
    .loan-request-page .loan-submit{min-height: 42px; padding: 12px 16px; font-size: 14px}
}

/* Modal container */
.doc-check-modal{border-radius: 28px; padding: 0; border: none; overflow: visible; background: transparent; box-shadow: none}
.doc-check-modal .modal-body{padding: 0}
.doc-check-panel{position: relative; padding: 24px; border-radius: 24px; background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid rgba(215, 222, 232, 0.9); box-shadow: 0 24px 50px rgba(16, 24, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95)}
.doc-check-close{position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background-color: #F8FAFC; border: 1px solid #E4E7EC; box-shadow: none; opacity: 1; transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease}
.doc-check-close:hover{background-color: #EEF2F8; border-color: #D0D5DD; transform: rotate(90deg); box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08)}
.doc-check-close:focus{box-shadow: 0 0 0 3px rgba(39, 92, 229, 0.16)}
.doc-check-badge{width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: var(--ss--white); font-size: 22px; background: var(--ss--brand--book); box-shadow: 0 14px 28px rgba(39, 92, 229, 0.22)}
.doc-check-title{margin-bottom: 10px; text-align: center; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ss--gray-800)}
.doc-check-subtitle{margin-bottom: 22px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--ss--gray-500)}
.doc-check-label{display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ss--gray-700)}
.doc-check-input-group{display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 20px; background: var(--ss--white); border: 1px solid #D7DEE8; box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08)}
.doc-check-input{border: none; border-radius: 16px; padding: 16px 18px; font-size: 15px; font-weight: 500; background: transparent; box-shadow: none}
.doc-check-input::placeholder{color: #98A2B3; letter-spacing: 0.08em}
.doc-check-input:focus{outline: none; box-shadow: none; background: transparent}
.doc-check-btn{min-width: 118px; background: var(--ss--brand--book); color: var(--ss--white); border-radius: 16px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: none; white-space: nowrap; box-shadow: 0 12px 24px rgba(39, 92, 229, 0.22); transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease}
.doc-check-btn:hover{color: var(--ss--white); transform: translateY(-2px); box-shadow: 0 16px 28px rgba(39, 92, 229, 0.28); filter: brightness(1.02)}
.doc-check-btn:active{transform: translateY(0)}
@media (min-width: 576px) {
    #docCheckModal .modal-dialog{max-width: 460px}
    #feedbackModal .modal-dialog{max-width: 520px}
}
@media (max-width: 575px) {
    .doc-check-panel{padding: 18px}
    .doc-check-title{font-size: 24px}
    .doc-check-input-group{flex-direction: column; align-items: stretch; border-radius: 22px}
    .doc-check-btn{width: 100%}
}
.feedback-modal{border-radius: 28px; padding: 0; border: none; overflow: visible; background: transparent; box-shadow: none}
.feedback-modal .modal-body{padding: 0}
.feedback-panel{position: relative; padding: 28px; border-radius: 28px; background: radial-gradient(circle at top right, rgba(39, 92, 229, 0.10), transparent 30%), linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid rgba(215, 222, 232, 0.9); box-shadow: 0 24px 50px rgba(16, 24, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95)}
.feedback-close{position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background-color: #F8FAFC; border: 1px solid #E4E7EC; opacity: 1; transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease}
.feedback-close:hover{background-color: #EEF2F8; border-color: #D0D5DD; transform: rotate(90deg); box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08)}
.feedback-close:focus{box-shadow: 0 0 0 3px rgba(39, 92, 229, 0.16)}
.feedback-badge{width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--ss--white); font-size: 22px; background: var(--ss--brand--book); box-shadow: 0 14px 28px rgba(39, 92, 229, 0.22)}
.feedback-title{margin-bottom: 10px; text-align: center; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ss--gray-800)}
.feedback-subtitle{margin-bottom: 22px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--ss--gray-500)}
.feedback-form{display: flex; flex-direction: column; gap: 16px}
.feedback-field{display: flex; flex-direction: column; gap: 8px}
.feedback-label{font-size: 14px; font-weight: 600; color: var(--ss--gray-700)}
.feedback-input,
.feedback-textarea{border-radius: 18px; border: 1px solid #D7DEE8; background: var(--ss--white); padding: 15px 18px; font-size: 15px; font-weight: 500; color: var(--ss--gray-800); box-shadow: 0 8px 18px rgba(16, 24, 40, 0.05); transition: border-color 0.24s ease, box-shadow 0.24s ease}
.feedback-input:focus,
.feedback-textarea:focus{border-color: #98A2B3; box-shadow: 0 0 0 3px rgba(39, 92, 229, 0.12)}
.feedback-textarea{min-height: 132px; resize: vertical}
.feedback-submit-btn{width: 100%; padding: 15px 22px; border: none; border-radius: 18px; background: var(--ss--brand--book); color: var(--ss--white); font-size: 15px; font-weight: 600; box-shadow: 0 14px 28px rgba(39, 92, 229, 0.22); transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease}
.feedback-submit-btn:hover{color: var(--ss--white); transform: translateY(-2px); box-shadow: 0 18px 32px rgba(39, 92, 229, 0.28); filter: brightness(1.02)}
.feedback-submit-btn:disabled{opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: 0 10px 20px rgba(39, 92, 229, 0.16); filter: none}
@media (max-width: 575px) {
    .feedback-panel{padding: 20px}
    .feedback-title{font-size: 24px}
}
.trust-service-page .trust-service-page__image{height: 500px; object-fit: cover}
@media (max-width: 991px) {
    .trust-service-page .feature-split__body{margin-left: 0; gap: 28px; align-items: center}
    .trust-service-page .feature-split__left{flex: 0 0 min(42%, 420px); width: min(42%, 420px)}
    .trust-service-page .feature-split__right{flex: 1 1 auto; max-width: none}
    .trust-service-page .trust-service-page__image{height: 420px; border-radius: 24px}
    .trust-service-page .feature-split__subtitle span{font-size: 34px; line-height: 1.2}
    .trust-service-page .feature-split__description,
    .trust-service-page .feature-split__description p,
    .trust-service-page .feature-split__description span{font-size: 16px; line-height: 1.75}
}
@media (max-width: 767px) {
    .trust-service-page .feature-split{padding: 8px 0}
    .trust-service-page .feature-split__body{flex-direction: column; gap: 20px; padding: 18px; border: 1px solid var(--ss--gray-200); border-radius: 20px; background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); box-shadow: 0 16px 32px rgba(16, 24, 40, 0.08)}
    .trust-service-page .feature-split__left,
    .trust-service-page .feature-split__right{width: 100%; flex-basis: auto}
    .trust-service-page .feature-split__image{max-width: 100%; margin: 0 auto}
    .trust-service-page .feature-split__bg-shape{display: none}
    .trust-service-page .trust-service-page__image{height: 280px; border-radius: 18px; box-shadow: none}
    .trust-service-page .feature-split__subtitle,
    .trust-service-page .feature-split__description{text-align: left}
    .trust-service-page .feature-split__subtitle{margin-bottom: 10px}
    .trust-service-page .feature-split__subtitle span{font-size: 24px; line-height: 1.25}
    .trust-service-page .feature-split__description,
    .trust-service-page .feature-split__description p,
    .trust-service-page .feature-split__description span{font-size: 15px; line-height: 1.7}
    .trust-service-page .feature-split__description p:last-child{margin-bottom: 0}
    .trust-service-page .loan-calc-card{padding: 20px; border-radius: 20px}
    .trust-service-page .calc-schedule__title{font-size: 18px}
    .trust-service-page .feedback-panel{padding: 20px; border-radius: 20px; box-shadow: 0 16px 32px rgba(16, 24, 40, 0.12)}
    .trust-service-page .feedback-form{gap: 12px}
    .trust-service-page .feedback-field{gap: 6px}
    .trust-service-page .feedback-input{padding: 12px 14px; border-radius: 14px; font-size: 14px}
    .trust-service-page .feedback-submit-btn{padding: 13px 18px; border-radius: 16px; font-size: 14px; box-shadow: 0 14px 24px rgba(39, 92, 229, 0.18)}
    .trust-service-page .feedback-submit-btn:hover{transform: none; box-shadow: 0 14px 24px rgba(39, 92, 229, 0.18)}
}
@media (max-width: 480px) {
    .trust-service-page .feature-split__body{padding: 14px; border-radius: 18px}
    .trust-service-page .trust-service-page__image{height: 228px; border-radius: 16px}
    .trust-service-page .feature-split__subtitle span{font-size: 20px}
    .trust-service-page .feature-split__description,
    .trust-service-page .feature-split__description p,
    .trust-service-page .feature-split__description span{font-size: 14px}
    .trust-service-page .loan-calc-card{padding: 16px; border-radius: 16px}
    .trust-service-page .feedback-panel{padding: 16px; border-radius: 18px}
    .trust-service-page .feedback-input{padding: 11px 12px; font-size: 13px}
    .trust-service-page .feedback-submit-btn{padding: 12px 16px; font-size: 13px}
}
.s-card{position: relative; display: block; border-radius: 20px; overflow: hidden; height: 260px; text-decoration: none}
.s-card img{width: 100%; height: 100%; object-fit: cover}
.s-card__overlay{position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 24, 40, 0) 40%, rgba(16, 24, 40, 0.65) 100%)}
.s-card__content{position: absolute; left: 24px; bottom: 24px; right: 24px; color: var(--ss--white); font-size: 18px; font-weight: 600; line-height: 1.4}
.s-card__content h6{font-size: 18px; font-weight: 600; margin-bottom: 10px}
.s-card__content ul{margin: 0; padding-left: 18px; font-size: 14px; font-weight: 400}
.s-card__content li{margin-bottom: 6px}

/* Hover effect */
.s-card:hover img{transform: scale(1.05)}
.s-card img{transition: transform 0.4s ease}
.loan-info-card{background: var(--ss--white); border-radius: 18px; padding: 24px; box-shadow: var(--ss--box-shadow); transition: transform 0.28s ease, box-shadow 0.28s ease}
.loan-info-card:hover{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12)}
.loan-info-title{color: var(--ss--red); font-weight: 600; margin-bottom: 16px}
.loan-info-row{display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 10px; font-size: 14px; color: var(--ss--gray-500)}
.loan-info-row.bg{background: var(--ss--gray-100)}
.loan-info-row span{font-weight: 500}
.loan-info-row strong{font-weight: 600; color: var(--ss--gray-400)}
.loan-info-table{width: 100%; border-collapse: collapse; font-size: 14px; color: var(--ss--gray-500); border: 1px solid var(--ss--gray-200); border-radius: 12px; overflow: hidden}
.loan-info-table tr:nth-child(odd){background: var(--ss--gray-100)}
.loan-info-table tr{border-bottom: 1px solid var(--ss--gray-200); transition: background 0.2s ease}
.loan-info-table tr:hover{background: #EEF2F8}
.loan-info-table tr:last-child{border-bottom: 0}
.loan-info-table th,
.loan-info-table td{padding: 14px 18px; vertical-align: top; border-right: 1px solid var(--ss--gray-200)}
.loan-info-table th:last-child,
.loan-info-table td:last-child{border-right: 0}
.loan-info-table p{margin: 0!important}

/* microbusiness sidebar */
.microbusiness-layout{display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start}
.microbusiness-sidebar{position: sticky; top: 120px; align-self: start; background: var(--ss--white); border-radius: 18px; box-shadow: var(--ss--box-shadow); padding: 20px}
.microbusiness-sidebar__title{font-size: 16px; font-weight: 600; color: var(--ss--gray-700); margin-bottom: 12px}
.microbusiness-sidebar__list{display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0}
.microbusiness-sidebar__list li{list-style: none}
.microbusiness-sidebar__list a{display: block; padding: 10px 12px; border-radius: 12px; background: var(--ss--gray-100); color: var(--ss--gray-700); border: 1px solid var(--ss--gray-200)}
.microbusiness-sidebar__list a:hover{background: #F3F4F6; color: var(--ss--gray-900); border-color: var(--ss--gray-300)}
.microbusiness-content{min-width: 0}
.mobile-sidebar-drawer-toggle,
.mobile-sidebar-drawer-backdrop{display: none}
@media (max-width: 992px) {
    .microbusiness-layout{grid-template-columns: 1fr}
    .microbusiness-sidebar{position: static; padding: 18px; border: 1px solid var(--ss--gray-200); box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08)}
    .microbusiness-sidebar__list{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px}
    .microbusiness-sidebar__list a{display: flex; align-items: center; min-height: 48px}
    body.mobile-sidebar-drawer-open{overflow: hidden}
    .mobile-sidebar-drawer-layout{position: relative}
    .mobile-sidebar-drawer-toggle{
        position: fixed;
        top: 50%;
        left: 0;
        z-index: 91;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 58px;
        border: 0;
        border-radius: 0 16px 16px 0;
        background: linear-gradient(180deg, #0f3d77 0%, #052882 100%);
        color: #fff;
        box-shadow: 0 14px 28px rgba(5, 40, 130, 0.24);
        transform: translateY(-50%);
        transition: transform .24s ease, box-shadow .24s ease, left .3s ease
    }
    .mobile-sidebar-drawer-toggle i{font-size: 16px; transition: transform .24s ease}
    .mobile-sidebar-drawer-toggle:active{transform: translateY(-50%) scale(.98)}
    .mobile-sidebar-drawer-backdrop{
        position: fixed;
        inset: 0;
        z-index: 89;
        display: block;
        background: rgba(15, 23, 42, .34);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease
    }
    .mobile-sidebar-drawer-layout .microbusiness-sidebar{
        position: fixed;
        top: 50%;
        left: 0;
        bottom: auto;
        z-index: 90;
        width: min(320px, calc(100vw - 56px));
        max-height: calc(100vh - 40px);
        overflow: auto;
        padding: 24px 16px 18px;
        border-radius: 0 20px 20px 0;
        border: 0;
        box-shadow: 0 24px 48px rgba(15, 23, 42, .22);
        transform: translate(calc(-100% - 16px), -50%);
        transition: transform .3s cubic-bezier(.22, .61, .36, 1)
    }
    .mobile-sidebar-drawer-layout .microbusiness-sidebar.reveal-on-scroll{opacity: 1}
    .mobile-sidebar-drawer-layout .microbusiness-sidebar .microbusiness-sidebar__title{padding-right: 28px}
    .mobile-sidebar-drawer-layout.is-sidebar-open .microbusiness-sidebar{transform: translate(0, -50%)}
    .mobile-sidebar-drawer-layout.is-sidebar-open .mobile-sidebar-drawer-backdrop{opacity: 1; pointer-events: auto}
    .mobile-sidebar-drawer-layout.is-sidebar-open .mobile-sidebar-drawer-toggle{
        left: min(320px, calc(100vw - 56px));
        box-shadow: 0 18px 32px rgba(5, 40, 130, 0.26)
    }
    .mobile-sidebar-drawer-layout.is-sidebar-open .mobile-sidebar-drawer-toggle i{transform: rotate(180deg)}
}
.loan-info-table th{width: 32%; font-weight: 600; color: var(--ss--gray-700); text-align: left}
.loan-info-table td{font-weight: 500; color: var(--ss--gray-500)}
.loan-info-table--single td{width: 100%}
.btn-loan{display: inline-block; padding: 14px 64px; border: 1px solid transparent; border-radius: 999px; background: var(--ss--brand--book); color: var(--ss--white); font-size: 16px; font-weight: 600; text-decoration: none}
.btn-loan:hover{box-shadow: var(--ss--box-shadow); color: var(--ss--blue-900); border: 1px solid transparent; background: linear-gradient(var(--ss--white), var(--ss--white)) padding-box, var(--ss--brand--book) border-box}
.loan-calc-card{background: var(--ss--white); border-radius: 24px; padding: 32px; box-shadow: var(--ss--box-shadow)}
.loan-calc-header{display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px}
.loan-calc-header h5{font-weight: 600; color: var(--ss--gray-500)}
.calc-tabs{margin-bottom: 24px}
.calc-tabs ul{display: flex; gap: 12px}
.calc-tabs ul li{flex: 1}
.calc-tabs ul li a{display: block; text-align: center; padding: 12px 16px; border-radius: 16px; background: var(--ss--gray-100); color: var(--ss--gray-700); border: 1px solid var(--ss--gray-200); font-size: 16px; font-weight: 600; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease}
.calc-tabs ul li a.active{background: var(--ss--brand--book); color: var(--ss--white); border-color: transparent}
.calc-tabs ul li a:hover{transform: translateY(-2px); box-shadow: var(--ss--box-shadow)}
.calc-tab-content{margin-top: 8px}
.calc-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px}
.calc-field{display: flex; flex-direction: column; gap: 10px; border-radius: 16px; padding: 10px 12px; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease}
.calc-field:hover{background: #F8FAFC; box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08); transform: translateY(-2px)}
.calc-input-group{display: flex; align-items: center; gap: 10px}
.calc-input-group .form-control{text-align: center; border-radius: 14px; padding: 12px; font-weight: 500; transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease}
.calc-input-group .form-control:hover{border-color: #D0D5DD}
.calc-input-group .form-control:focus{border-color: #98A2B3; box-shadow: 0 0 0 3px rgba(5, 40, 130, 0.12); background: #FCFDFF}
.calc-input-group .calc-input[data-type="date"]{text-align: left; width: 100%; min-height: 48px; cursor: pointer}
.calc-date-quick{display: flex; flex-wrap: wrap; gap: 8px}
.calc-date-btn{border: 1px solid var(--ss--gray-200); background: var(--ss--white); color: var(--ss--gray-700); border-radius: 999px; font-size: 12px; line-height: 1; padding: 8px 10px; cursor: pointer}
.calc-date-btn:hover{border-color: var(--ss--gray-300); background: var(--ss--gray-100)}
.calc-slider{width: 100%; appearance: none; height: 6px; border-radius: 999px; background: var(--ss--gray-200); outline: none; transition: background 0.2s ease}
.calc-slider:hover{background: #D0D5DD}
.calc-slider::-webkit-slider-thumb{appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ss--red); box-shadow: 0 4px 10px rgba(219, 53, 61, 0.35); cursor: pointer}
.calc-slider::-moz-range-thumb{width: 18px; height: 18px; border-radius: 50%; background: var(--ss--red); border: none; box-shadow: 0 4px 10px rgba(219, 53, 61, 0.35); cursor: pointer}
.calc-result-row{display: flex; align-items: center; gap: 24px; margin-top: 24px}
.calc-result-row--savings{margin-top: 8px}
.result-item{padding: 10px 12px; border-radius: 14px; transition: transform 0.22s ease, background 0.22s ease}
.result-item:hover{transform: translateY(-2px); background: #F8FAFC}
.result-item span{font-size: 13px; color: var(--ss--gray-400)}
.result-item strong{display: block; font-size: 28px; font-weight: 700; color: var(--ss--gray-800)}
.calc-note{margin-top: 10px; color: var(--ss--gray-500); font-size: 13px}
.calc-total-center{margin-top: 24px; text-align: center}
.calc-total-center span{display: block; color: var(--ss--gray-400); margin-bottom: 6px}
.calc-total-center strong{font-size: 36px; font-weight: 700; color: var(--ss--gray-800)}
.calc-schedule{margin-top: 24px}
.calc-schedule__title{font-size: 16px; font-weight: 600; color: var(--ss--gray-700); margin-bottom: 12px}
.calc-table-wrap{overflow: visible; border: 1px solid var(--ss--gray-200); border-radius: 12px}
.calc-table{width: 100%; border-collapse: collapse; font-size: 14px}
.calc-table th,
.calc-table td{padding: 12px 14px; border-bottom: 1px solid var(--ss--gray-200); text-align: right; white-space: nowrap}
.calc-table thead th{position: sticky; top: 80px; z-index: 2; background: var(--ss--white); box-shadow: 0 1px 0 var(--ss--gray-200)}
.calc-table th:first-child,
.calc-table td:first-child{text-align: left}
.calc-table tr:last-child td{border-bottom: 0}
.calc-input-group{display: flex; align-items: center; gap: 10px}
.calc-btn{width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--ss--gray-200); background: var(--ss--white); font-size: 20px; color: var(--ss--gray-400); cursor: pointer}
.calc-input-group .form-control{text-align: center; border-radius: 14px; padding: 12px; font-weight: 500}
.calc-result{display: flex; align-items: center; gap: 24px}
.result-item span{font-size: 13px; color: var(--ss--gray-400)}
.result-item strong{display: block; font-size: 28px; font-weight: 700; color: var(--ss--gray-800)}
.divider{width: 1px; background: var(--ss--gray-200)}
.btn-loan{display: inline-block; padding: 14px 72px; border-radius: 999px; border: 1px solid transparent; background: var(--ss--brand--book); color: var(--ss--white); font-weight: 600; text-decoration: none; transform: translateY(0); box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); transition: transform 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, background 0.28s ease, border-color 0.28s ease}
.btn-loan:hover{color: var(--ss--blue-900); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 24, 40, 0.16); background: linear-gradient(var(--ss--white), var(--ss--white)) padding-box, var(--ss--blue-gradient) border-box}
.btn-loan:active{transform: translateY(-1px)}

/* Responsive */
@media (max-width: 992px) {
    .tab-content{min-width: 0}
    .tab-content > .tab-pane{min-width: 0}
    .loan-info-table{table-layout: fixed}
    .loan-info-table th,
    .loan-info-table td{overflow-wrap: anywhere}
    .calc-result{flex-direction: column; align-items: flex-start}
    .divider{display: none}
    .calc-grid{grid-template-columns: 1fr}
    .calc-result-row{flex-direction: column; align-items: flex-start}
    .calc-result-row{gap: 16px; padding: 18px 20px; border: 1px solid var(--ss--gray-200); border-radius: 18px; background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%)}
    .result-item{width: 100%}
    .calc-table-wrap{overflow-x: auto; overflow-y: visible}
    .calc-table{min-width: 640px}
}
@media (max-width: 767px) {
    .tab-content{margin-top: 16px}
    .loan-info-card{padding: 18px; border-radius: 16px}
    .loan-info-title{margin-bottom: 12px}
    .loan-info-table{display: table; overflow: hidden}
    .loan-info-table th,
    .loan-info-table td{padding: 12px 14px}
    .loan-info-table th{width: 40%}
    .loan-calc-card{padding: 20px; border-radius: 20px}
    .calc-tabs{margin-bottom: 18px}
    .calc-tabs ul{flex-direction: column; gap: 8px}
    .calc-tabs ul li a{padding: 11px 14px; font-size: 15px}
    .calc-field{padding: 8px 0}
    .calc-input-group .form-control{padding: 11px 12px}
    .calc-date-quick{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr))}
    .calc-date-btn{display: flex; align-items: center; justify-content: center; min-height: 36px; text-align: center}
    .calc-result-row{gap: 14px; margin-top: 18px; padding: 16px}
    .result-item{width: 100%; padding: 0}
    .result-item strong{font-size: 24px}
    .calc-total-center strong{font-size: 30px}
    .calc-schedule{margin-top: 20px}
    .calc-table-wrap{margin: 0 -2px; border-radius: 14px}
}
@media (max-width: 480px) {
    .tab-content{margin-top: 14px}
    .loan-info-card{padding: 16px}
    .loan-info-table th,
    .loan-info-table td{padding: 10px 12px; font-size: 13px}
    .loan-calc-card{padding: 16px}
    .calc-tabs ul li a{font-size: 14px}
    .calc-input-group{gap: 8px}
    .calc-btn{width: 38px; height: 38px; font-size: 18px}
    .calc-date-quick{grid-template-columns: repeat(2, minmax(0, 1fr))}
    .result-item strong{font-size: 22px}
    .calc-total-center strong{font-size: 26px}
}

/* faq */
.faq-list{max-width: 980px; margin: 0 auto}
.faq-item{margin-bottom: 16px; border-radius: 24px; overflow: hidden; background: var(--ss--white)}
.faq-header{position: relative; width: 100%; display: block; padding: 22px 28px; font-size: 20px; font-weight: 600; text-align: left; background: var(--ss--white); color: var(--ss--gray-800); border: 1px solid var(--ss--blue); border-radius: 24px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease}
.faq-header > span:first-child{display: block; padding-right: 58px}
.faq-icon{position: absolute; right: 28px; top: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--ss--white); border: 1px solid var(--ss--gray-200); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ss--gray-800); transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease}
.faq-item:not(.active) .faq-header:hover{background: #f8fbff; border-color: #8bb6f5; box-shadow: 0 10px 24px rgba(15, 61, 119, 0.12); transform: translateY(-2px)}
.faq-item:not(.active) .faq-header:hover .faq-icon{transform: scale(1.08)}
.faq-header .faq-body{display: block; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease}
.faq-header .faq-body-text{display: block; font-size: 16px; line-height: 1.6; font-weight: 400; color: var(--ss--gray-700)}
.faq-header .faq-body-text p{margin: 0}
.faq-header .faq-body-text ol,
.faq-header .faq-body-text ul{padding-left: 20px}
.faq-header .faq-body-text ol,
.faq-header .faq-body-text ul,
.faq-header .faq-body-text li{list-style: disc}
.faq-header .faq-body-text p,
.faq-header .faq-body-text li,
.faq-header > span:first-child{overflow-wrap: anywhere}
.faq-item.active .faq-header{background: var(--ss--blue-gradient); color: var(--ss--white)}
.faq-item.active .faq-body{opacity: 1; margin-top: 12px}
.faq-item.active .faq-body-text{color: var(--ss--white)}
.faq-item.active .faq-icon{background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--ss--white); transform: rotate(180deg)}
@media (max-width: 991px) {
    .faq-list{max-width: 100%}
    .faq-item{margin-bottom: 14px; border-radius: 22px}
    .faq-header{padding: 20px 24px; font-size: 18px; border-radius: 22px}
    .faq-header > span:first-child{padding-right: 52px}
    .faq-icon{right: 24px; top: 17px; width: 40px; height: 40px}
    .faq-header .faq-body-text{font-size: 15px; line-height: 1.7}
}
@media (max-width: 767px) {
    .faq-item{margin-bottom: 12px; border-radius: 18px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06)}
    .faq-header{padding: 16px 18px; font-size: 16px; line-height: 1.45; border-radius: 18px; box-shadow: none}
    .faq-item:not(.active) .faq-header:hover{transform: none; box-shadow: none}
    .faq-header > span:first-child{padding-right: 46px}
    .faq-icon{right: 16px; top: 14px; width: 34px; height: 34px; font-size: 12px}
    .faq-item.active .faq-body{margin-top: 10px}
    .faq-header .faq-body-text{font-size: 14px; line-height: 1.7}
    .faq-header .faq-body-text ol,
    .faq-header .faq-body-text ul{padding-left: 18px}
}
@media (max-width: 480px) {
    .faq-item{border-radius: 16px}
    .faq-header{padding: 14px 16px; font-size: 15px; border-radius: 16px}
    .faq-header > span:first-child{padding-right: 40px}
    .faq-icon{right: 14px; top: 13px; width: 28px; height: 28px; font-size: 11px}
    .faq-item.active .faq-body{margin-top: 8px}
    .faq-header .faq-body-text{font-size: 13px}
}

/* currency-modal */
.currency-modal{border-radius: 24px; overflow: hidden}
.currency-modal .modal-header{padding: 20px 24px; border-bottom: 1px solid #e5e7eb}
.currency-modal .modal-title{font-size: 18px; font-weight: 600; color: #475569}
.currency-table th{background: #f8fafc; font-size: 14px; color: #334155; border-bottom: 1px solid #e5e7eb}
.currency-table td{font-size: 14px; color: #475569; vertical-align: middle}
.currency-table tbody tr:not(:last-child) td{border-bottom: 1px solid #e5e7eb}
.currency-table .fi{width: 22px; height: 16px; border-radius: 2px}
.currency-page{padding: 8px 0 48px}
.currency-page__intro{margin: 0 0 18px; color: #334155; font-size: 16px; font-weight: 600; line-height: 1.65}
.currency-page__date{display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: #1f2937; font-size: 16px; font-weight: 800}
.currency-page__date i{font-size: 14px}
.currency-page__table-wrap{width: 100%; overflow-x: auto; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06)}
.currency-page__table{width: 100%; min-width: 760px; border-collapse: collapse; background: #fff}
.currency-page__table th{padding: 12px 14px; color: #111827; font-size: 13px; font-weight: 800; text-align: right; white-space: nowrap; border-bottom: 1px solid #e5e7eb}
.currency-page__table th:first-child{text-align: left}
.currency-page__table td{padding: 12px 14px; color: #1f2937; font-size: 14px; line-height: 1.25; text-align: right; border-bottom: 1px solid #e5e7eb; white-space: nowrap}
.currency-page__table tbody tr:last-child td{border-bottom: 0}
.currency-page__flag{width: 52px; text-align: center !important}
.currency-page__flag .fi{width: 26px; height: 18px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08)}
.currency-page__code{width: 72px; font-weight: 700; text-align: left !important}
.currency-page__name{min-width: 170px; text-align: left !important}
@media (max-width: 768px) {
    .currency-page{padding: 4px 0 36px}
    .currency-page__intro{margin-bottom: 14px; font-size: 14px; line-height: 1.55}
    .currency-page__date{margin-bottom: 14px; font-size: 14px}
    .currency-page__table-wrap{overflow: visible; background: transparent; box-shadow: none}
    .currency-page__table{display: block; min-width: 0; background: transparent; border-collapse: separate}
    .currency-page__table thead{display: none}
    .currency-page__table tbody{display: grid; gap: 12px}
    .currency-page__table tr{display: grid; grid-template-columns: 42px minmax(58px, auto) 1fr; align-items: center; gap: 0 8px; padding: 14px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06)}
    .currency-page__table td{display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 9px 0; font-size: 14px; text-align: right; border-bottom: 1px solid #edf1f5; white-space: normal}
    .currency-page__table td::before{content: attr(data-label); color: #64748b; font-size: 12px; font-weight: 700; line-height: 1.25; text-align: left}
    .currency-page__table td[colspan]{grid-column: 1 / -1; justify-content: center; padding: 16px 8px; text-align: center}
    .currency-page__table td[colspan]::before{display: none}
    .currency-page__flag{grid-column: 1; grid-row: 1; width: 42px; padding: 0 !important; justify-content: center; border-bottom: 0; text-align: center !important}
    .currency-page__flag::before{display: none}
    .currency-page__flag .fi{width: 30px; height: 21px}
    .currency-page__code{grid-column: 2; grid-row: 1; width: auto; padding: 0 !important; border-bottom: 0; color: #17335f; font-size: 18px; font-weight: 800; text-align: left !important}
    .currency-page__code::before{display: none}
    .currency-page__name{grid-column: 3; grid-row: 1; min-width: 0; padding: 0 !important; border-bottom: 0; color: #475569; font-size: 13px; font-weight: 600; text-align: left !important}
    .currency-page__name::before{display: none}
    .currency-page__table td:nth-child(4){grid-column: 1 / -1; margin-top: 10px; padding-top: 12px; border-top: 1px solid #edf1f5}
    .currency-page__table td:nth-child(5), .currency-page__table td:nth-child(6){grid-column: 1 / -1}
    .currency-page__table tbody tr:last-child td{border-bottom: 1px solid #edf1f5}
    .currency-page__table tbody tr:last-child td:last-child, .currency-page__table tr td:last-child{border-bottom: 0}
}
@media (max-width: 420px) {
    .currency-page__table tr{grid-template-columns: 34px 54px 1fr; padding: 12px}
    .currency-page__flag{width: 34px}
    .currency-page__flag .fi{width: 26px; height: 18px}
    .currency-page__code{font-size: 16px}
    .currency-page__name{font-size: 12px}
    .currency-page__table td{gap: 12px; font-size: 13px}
    .currency-page__table td::before{max-width: 52%; font-size: 11px}
}

/* loan-modal */
.loan-modal{border-radius: 24px; padding: 12px}
.loan-modal .modal-body{padding-top: 0}
.loan-modal .loan-calc-card{padding: 20px; box-shadow: none; border: 1px solid var(--ss--gray-200)}
.loan-modal .calc-input{display: block; width: 100%}
.loan-modal .calc-table thead th{top: 0}

/* ai-tool  */
.ai-chat-popup{position: fixed; bottom: 10px; right: 120px; width: 320px; height: 480px; background: var(--ss--white); border-radius: 18px; box-shadow: var(--ss--box-shadow); display: none; flex-direction: column; overflow: hidden; z-index: 999}
.ai-chat-header{background: var(--ss--blue-gradient); color: var(--ss--white); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center}
.ai-logo{display: flex; align-items: center; gap: 8px; font-weight: 600}
.ai-logo img{width: 100px}
.ai-close{background: none; border: none; color: var(--ss--white); font-size: 22px; cursor: pointer}
.ai-chat-body{flex: 1; padding: 16px; overflow-y: auto; background: var(--ss--gray-100)}
.ai-message{display: flex; gap: 10px; align-items: flex-start}
.avatar{width: 36px; height: 36px; border-radius: 50%}
.bubble{background: var(--ss--white); padding: 10px 12px; border-radius: 10px; max-width: 200px; box-shadow: var(--ss--box-shadow)}
.bubble .name{font-size: 12px; font-weight: 600}
.bubble .text{font-size: 13px; margin-top: 4px}

/* org chart */
.org-chart{padding: 24px 0}
.org-chart.reveal-on-scroll{transform: translateY(30px) scale(.985)}
.org-chart.reveal-on-scroll.is-visible{transform: translateY(0) scale(1)}
.org-tree{display: flex; justify-content: center}
.org-node{display: flex; flex-direction: column; align-items: center; position: relative}
.org-node__label{background: var(--ss--gray-100); color: var(--ss--gray-800); padding: 10px 16px; width: clamp(190px, 16vw, 210px); min-height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 14px; text-align: center; font-weight: 600; line-height: 1.35; word-break: break-word; box-shadow: 0 0 0 3px transparent, 0 10px 24px rgba(16, 24, 40, 0.14); background-clip: padding-box; position: relative; cursor: default; transition: transform 0.2s ease}
.org-node.has-children > .org-node__label{cursor: pointer}
.org-node.has-children > .org-node__label::after{content: "▾"; margin-left: 8px; font-size: 12px; color: var(--ss--gray-500); display: inline-block; transform: rotate(0deg); transition: transform 0.2s ease}
.org-node.has-children.is-expanded > .org-node__label::after{transform: rotate(180deg)}
.org-node__label:hover{transform: scale(1.02)}
.org-children{display: flex; justify-content: center; gap: 24px; margin-top: 20px; position: relative; max-height: 0; opacity: 0; transform: translateY(-6px); overflow: hidden; transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease}
.org-node.is-expanded > .org-children{max-height: 2000px; opacity: 1; transform: translateY(0)}
.org-node.is-expanded > .org-children::before{content: ""; position: absolute; top: -12px; left: 50%; width: 1px; height: 12px; background: var(--ss--gray-200)}
.org-children > .org-node::before{content: ""; position: absolute; top: -12px; left: 50%; width: 1px; height: 12px; background: var(--ss--gray-200)}
.org-children::after{content: ""; position: absolute; top: -12px; left: 8%; right: 8%; height: 1px; background: var(--ss--gray-200)}
.org-children--center{align-items: center}
.org-children-group{display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative}
.org-children--row{flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 24px}
.org-children--column{flex-direction: column; align-items: center}
.org-children--column::after{display: none}
.org-node--col > .org-children{flex-direction: column; align-items: center}
.org-node--col > .org-children::after{display: none}
.org-node:not(.has-children) > .org-node__label{box-shadow: 0 0 0 3px transparent, 0 8px 18px rgba(16, 24, 40, 0.12)}
.org-node.has-children > .org-node__label{background: linear-gradient(#f2f4f7, #f2f4f7) padding-box, linear-gradient(90deg, #052882, #DB353D) border-box; border: 1px solid transparent}
@media (max-width: 1200px) {
    .org-children{flex-wrap: wrap}
}
@media (max-width: 1880px) {
    .org-tree{overflow-x: auto}
}
@media (max-width: 768px) {
    .org-chart{padding: 12px 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch}
    .org-tree{justify-content: flex-start; min-width: max-content; padding-bottom: 4px}
    .org-children{gap: 16px; flex-wrap: nowrap}
    .org-node__label{font-size: 14px; padding: 8px 12px; width: min(100%, 240px); min-height: 54px}
}
.time{font-size: 11px; color: var(--ss--gray-400); margin-left: auto}
.ai-chat-footer{padding: 12px; border-top: 1px solid var(--ss--gray-200); display: flex; gap: 10px}
.ai-chat-footer input{flex: 1; border: 1px solid var(--ss--gray-200); border-radius: 20px; padding: 8px 14px; font-size: 13px; outline: none}
.send-btn{width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--ss--blue); color: var(--ss--white); cursor: pointer}

/* policy */
.policy-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px}
.policy-card{background: var(--ss--blue-gradient); padding: 24px; border-radius: 24px; border-bottom: 2px solid var(--ss--red); color: white; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, filter 0.28s ease}
.policy-card:hover{transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); border-color: #F16A70; filter: saturate(1.06)}
.policy-card h3{font-size: 18px; font-weight: 700; margin-bottom: 16px}
.policy-card p{font-size: 15px; color: var(--ss--white)}
@media (max-width: 1199px) {
    .policy-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px}
    .policy-card{padding: 22px; border-radius: 22px}
}
@media (max-width: 767px) {
    .policy-section{margin-top: 0}
    .policy-grid{grid-template-columns: 1fr; gap: 14px}
    .policy-card{padding: 18px; border-radius: 18px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14)}
    .policy-card:hover{transform: none; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14); filter: none}
    .policy-card h3{font-size: 17px; line-height: 1.35; margin-bottom: 0}
    .policy-card p{margin-bottom: 0}
    .policy-card p,
    .policy-card li,
    .policy-card span{font-size: 14px; line-height: 1.65}
}
@media (max-width: 480px) {
    .policy-card{padding: 16px; border-radius: 16px}
    .policy-card h3{font-size: 16px}
}

/* aml */
.aml-section{display: flex; gap: 24px}
.aml-section .aml-image{width: 40%; display: flex; align-items: center}
.aml-section .aml-image .feature-split__image{width: 100%; transition: transform 0.28s ease, box-shadow 0.28s ease}
.aml-section .aml-image .feature-split__bg-shape-right{transition: transform 0.28s ease, opacity 0.28s ease}
.aml-section .aml-image:hover .feature-split__image{transform: translateY(-4px)}
.aml-section .aml-image:hover .feature-split__bg-shape-right{transform: translate(6px, -6px); opacity: 0.92}
.aml-section .aml-text{width: 60%; font-size: 16px; color: var(--ss--gray-700); background: var(--ss--white); border: 1px solid var(--ss--gray-200); border-radius: 20px; padding: 20px 22px; box-shadow: var(--ss--box-shadow); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease}
.aml-section .aml-text:hover{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12); border-color: #D0D5DD}
.aml-section .aml-text ul,
.aml-section .aml-text li,
.aml-section .aml-text ol{list-style: disc; padding-left: 20px}
.aml-section .aml-text li{padding: 0}
.aml-section .aml-text ul{margin-bottom: 20px}
.aml-section .aml-text p,
.aml-section .aml-text li{overflow-wrap: anywhere}
.aml-section .aml-text > *:last-child{margin-bottom: 0}
.aml-section .aml-text img,
.aml-section .aml-text iframe{max-width: 100%; height: auto}
@media (max-width: 992px) {
    .microbusiness-layout{gap: 24px}
    .microbusiness-sidebar{padding: 16px 18px; border-radius: 16px}
    .microbusiness-sidebar__title{margin-bottom: 10px; font-size: 15px}
    .microbusiness-sidebar__list{gap: 8px}
    .microbusiness-sidebar__list a{padding: 9px 12px; border-radius: 10px}
    .aml-section{flex-direction: column; gap: 20px}
    .aml-section .aml-image,
    .aml-section .aml-text{width: 100%}
    .aml-section .aml-image{max-width: 720px; margin: 0 auto}
    .aml-section .aml-text{padding: 18px 20px; border-radius: 18px; box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08)}
}
@media (max-width: 767px) {
    .microbusiness-layout{gap: 18px}
    .microbusiness-sidebar{padding: 14px; border-radius: 14px; box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08)}
    .microbusiness-sidebar__title{font-size: 14px}
    .microbusiness-sidebar__list{grid-template-columns: 1fr}
    .microbusiness-sidebar__list a{padding: 10px 12px; font-size: 14px; min-height: 44px; background: #F8FAFC}
    .microbusiness-content > .tabs{margin-bottom: 16px; padding: 8px; border: 1px solid var(--ss--gray-200); border-radius: 18px; box-shadow: 0 12px 24px rgba(16, 24, 40, 0.06)}
    .microbusiness-content > .tabs ul{display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding: 0; overflow: visible; scroll-snap-type: none}
    .microbusiness-content > .tabs ul li{min-width: 0; width: 100%; scroll-snap-align: none}
    .microbusiness-content > .tabs ul li a{min-height: 44px; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; white-space: normal; word-break: break-word; box-shadow: none}
    .feature-split__title{padding: 20px 0 16px}
    .feature-split__title span{font-size: 20px; line-height: 1.35}
    .aml-section{gap: 16px}
    .aml-section .aml-image{order: -1}
    .aml-section .aml-image .feature-split__bg-shape-right{display: none}
    .aml-section .aml-image .feature-split__image img{border-radius: 18px; margin-top: 0; aspect-ratio: 16 / 10; object-fit: cover}
    .aml-section .aml-image:hover .feature-split__image,
    .aml-section .aml-text:hover{transform: none}
    .aml-section .aml-text{padding: 16px; border-radius: 16px; font-size: 15px; line-height: 1.75; box-shadow: 0 10px 22px rgba(16, 24, 40, 0.06); background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%)}
    .aml-section .aml-text p{margin-bottom: 12px}
    .aml-section .aml-text ul,
    .aml-section .aml-text ol,
    .aml-section .aml-text li{padding-left: 18px}
    .aml-section .aml-text table{display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch}
    .governance-section{gap: 20px!important;}
    .socialResponsibility2{gap: 20px!important; margin-top: 20px!important;}
}
@media (max-width: 480px) {
    .microbusiness-sidebar{padding: 12px}
    .microbusiness-sidebar__list a{padding: 9px 10px; border-radius: 10px; font-size: 13px}
    .mobile-sidebar-drawer-toggle{width: 24px; height: 48px; border-radius: 0 14px 14px 0}
    .mobile-sidebar-drawer-layout .microbusiness-sidebar{width: min(296px, calc(100vw - 44px)); padding: 22px 14px 16px}
    .mobile-sidebar-drawer-layout.is-sidebar-open .mobile-sidebar-drawer-toggle{left: min(296px, calc(100vw - 44px))}
    .microbusiness-content > .tabs ul{grid-template-columns: repeat(2, minmax(0, 1fr))}
    .microbusiness-content > .tabs ul li:last-child:nth-child(odd){grid-column: 1 / -1}
    .microbusiness-content > .tabs ul li a{min-height: 42px; font-size: 13px}
    .feature-split__title span{font-size: 18px}
    .aml-section .aml-image .feature-split__image img{border-radius: 16px; min-height: 200px}
    .aml-section .aml-text{padding: 14px; border-radius: 14px; font-size: 14px}
}
.code-of-ethics{color: var(--ss--gray-700); background: var(--ss--white); border: 1px solid var(--ss--gray-200); border-radius: 20px; padding: 20px 22px; box-shadow: var(--ss--box-shadow); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease}
.code-of-ethics:hover{transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12); border-color: #D0D5DD}
.code-of-ethics ul,
.code-of-ethics li,
.code-of-ethics ol{list-style: disc; padding-left: 20px}
.code-of-ethics li{padding: 0; font-size: 16px}
.code-of-ethics ul{margin-bottom: 20px}
.code-of-ethics p strong{font-size: 20px}
.governance-section{gap: 80px}
.governance{width: 50% !important}
.search-result-banner{display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 18px; border: 1px solid #d9e3f4; border-left: 4px solid #0f3d77; border-radius: 10px; background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%)}
.search-result-banner i{color: #0f3d77; font-size: 16px}
.search-result-banner .search-keyword{font-weight: 700; color: #0d2f5b}
.search-result-banner .search-label{color: #29466d}
.search-page__summary{font-size: 16px; color: var(--ss--gray-600)}
.search-page__summary strong{font-size: 18px; color: var(--ss--gray-800)}
@media (max-width: 767px) {
    .search-result-banner{align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 12px; margin-bottom: 16px; border-radius: 12px}
    .search-result-banner i{margin-top: 2px}
    .search-result-banner .search-keyword,
    .search-result-banner .search-label{line-height: 1.5; overflow-wrap: anywhere}
    .article .alert{padding: 14px 16px; border-radius: 16px}
    .article .alert .small{line-height: 1.55}
    .search-page .tab-content{padding-top: 8px!important; padding-bottom: 28px!important}
    .search-page__summary{margin-top: 10px!important; margin-bottom: 12px!important; font-size: 14px}
    .search-page__summary strong{font-size: 16px}
    .search-page__empty .alert{align-items: flex-start!important; padding: 14px 16px; border-radius: 16px}
    .search-page__empty .alert i{margin-top: 2px}
}
@media (max-width: 480px) {
    .search-result-banner{padding: 10px 12px; gap: 6px; border-radius: 10px}
    .search-result-banner i{font-size: 14px}
    .search-result-banner .search-keyword,
    .search-result-banner .search-label{font-size: 13px}
    .article .alert{padding: 12px 14px; border-radius: 14px}
    .search-page__summary{font-size: 13px}
    .search-page__summary strong{font-size: 15px}
    .search-page__empty .alert{padding: 12px 14px; border-radius: 14px}
}
.company-timeline{position: relative; margin-top: 40px; overflow: hidden; color: var(--ss--white)}
.company-timeline__inner{max-width: 1380px; margin: 0 auto; padding: 68px 56px 72px}
.company-timeline__slider{position: relative}
.company-timeline__track{position: relative; overflow: hidden}
.company-timeline__slider::before{content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 4px; background: var(--ss--blue-900)}
.company-timeline__item{position: relative; padding-top: 0; height: auto}
.company-timeline__item::before{content: ""; position: absolute; top: 8px; left: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--ss--red); box-shadow: 0 0 0 8px rgba(219, 53, 61, 0.16)}
.company-timeline__year{margin: 40px 0 20px; font-size: 20px; font-weight: 700; line-height: 1; color: var(--ss--white)}
.company-timeline__text,
.company-timeline__text p,
.company-timeline__text li{font-size: 18px; line-height: 1.45; color: var(--ss--gray-100)}
.company-timeline__text p:first-child,
.company-timeline__text ul:first-child{margin-top: 0}
.company-timeline__text p:last-child,
.company-timeline__text ul:last-child{margin-bottom: 0}
.company-timeline__text ul,
.company-timeline__text ol,
.company-timeline__text li{list-style: disc}
.company-timeline__text ul{padding-left: 22px}
.company-timeline__pagination{display: flex; justify-content: center; gap: 10px; margin-top: 22px}
.company-timeline__pagination .swiper-pagination-bullet{width: 10px; height: 10px; margin: 0 !important; background: var(--ss--white); opacity: 1}
.company-timeline__pagination .swiper-pagination-bullet-active{background: var(--ss--red)}
@media (max-width: 1199px) {
    .company-timeline__inner{padding-left: 32px; padding-right: 32px}
}
@media (max-width: 991px) {
    .company-timeline{margin-top: 0;}
    .company-timeline__inner{padding: 40px 18px 46px}
    .company-timeline__slider{padding-top: 0}
    .company-timeline__slider::before{top: 14px; left: 0; right: 0; width: auto; height: 4px}
    .company-timeline__item{padding-left: 0}
    .company-timeline__item::before{top: 8px; left: 10px}
    .company-timeline__year{font-size: 22px; margin: 34px 0 12px; line-height: 1.1}
    .company-timeline__text,
    .company-timeline__text p,
    .company-timeline__text li{font-size: 15px; line-height: 1.7}
    .company-timeline__text ul{padding-left: 18px}
    .company-timeline__pagination{margin-top: 18px; gap: 8px}
    .company-timeline__pagination .swiper-pagination-bullet{width: 8px; height: 8px}
    .company-timeline__nav{justify-content: center}
}
@media (max-width: 480px) {
    .company-timeline__inner{padding: 34px 14px 40px}
    .company-timeline__slider{padding-top: 0}
    .company-timeline__slider::before{top: 12px}
    .company-timeline__item{padding-left: 0}
    .company-timeline__item::before{width: 14px; height: 14px; top: 6px; left: 8px; box-shadow: 0 0 0 6px rgba(219, 53, 61, 0.14)}
    .company-timeline__year{font-size: 20px; margin: 28px 0 10px}
    .company-timeline__text,
    .company-timeline__text p,
    .company-timeline__text li{font-size: 13px}
    .socialResponsibility2 .socialResponsibility2__image img{height: auto!important;}
}
.socialResponsibility2{gap: 60px; margin-top: 40px}
.socialResponsibility2 .socialResponsibility2__image img{height: 500px; object-fit: cover}
.org-children--board{align-items: stretch}
.org-node--audit{width: 100%; display: flex; justify-content: flex-end; padding-left: clamp(0px, 30vw, 500px)}
.org-node--audit::before{left: auto; right: clamp(95px, 10vw + 95px, 255px)}
@media (max-width: 992px) {
    .org-node--audit{justify-content: center; padding-right: 0}
    .org-node--audit::before{left: 50%; right: auto}
}
.tab-pane .loan-item-img{position: relative; overflow: hidden}
.tab-pane .loan-item-img img{display: block; width: 100%}
.tab-pane .loan-item-img .loan-item-img-overlay{position: absolute; inset: 0; background: var(--ss--blue-gradient); opacity: 0.9; pointer-events: none}
.exchange-ribbon{position: relative; overflow: hidden; padding: 0; margin-top: 40px; background: radial-gradient(circle at top left, rgba(58, 119, 255, 0.12), transparent 32%), linear-gradient(135deg, #ffffff 0%, #f6f9fd 52%, #eef4fb 100%); border: 1px solid #d9e4f0; box-shadow: 0 18px 40px rgba(19, 47, 89, 0.08)}
.exchange-ribbon__viewport{position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.82)}
.exchange-ribbon__status{padding: 16px 18px; color: #35507d; font-size: 14px}
.exchange-ribbon__status.is-error{color: #b42318}
.exchange-ribbon__track{display: none; width: max-content; align-items: center; gap: 12px; padding: 12px; will-change: transform}
.exchange-ribbon__track.is-ready{display: flex; animation: exchangeRibbonScroll 52s linear infinite}
.exchange-ribbon__viewport:hover .exchange-ribbon__track.is-ready{animation-play-state: paused}
.exchange-ribbon__group{display: flex; align-items: center; gap: 12px; flex-shrink: 0}
.exchange-pill{display: inline-flex; align-items: center; gap: 12px; min-width: auto; padding: 10px 14px; border-radius: 999px; background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%); border: 1px solid #dce5ef; box-shadow: 0 8px 20px rgba(19, 47, 89, 0.06)}
.exchange-pill__flag{display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #eef4fb; border: 1px solid #dbe6f1; overflow: hidden; flex-shrink: 0}
.exchange-pill__flag .fi{width: 22px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(23, 51, 95, 0.1)}
.exchange-pill__main{display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1}
.exchange-pill__code{color: #17335f; font-size: 16px; font-weight: 800; line-height: 1}
.exchange-pill__divider{width: 1px; height: 20px; background: #d8e3ef; flex-shrink: 0}
.exchange-pill__rates{display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1}
.exchange-pill__rate{display: flex; flex-direction: column; min-width: 0}
.exchange-pill__label{color: #7587a2; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1}
.exchange-pill__value{color: #17335f; font-size: 15px; font-weight: 800; line-height: 1.2}
.exchange-ribbon__fade{position: absolute; top: 0; bottom: 0; width: 46px; z-index: 2; pointer-events: none}
.exchange-ribbon__fade--left{left: 0; background: linear-gradient(90deg, #f7fafe 0%, rgba(247, 250, 254, 0) 100%)}
.exchange-ribbon__fade--right{right: 0; background: linear-gradient(270deg, #f7fafe 0%, rgba(247, 250, 254, 0) 100%)}
@keyframes exchangeRibbonScroll{from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); }}
@media (max-width: 991px) {
    .exchange-pill{min-width: 190px; padding: 10px 12px}
    .exchange-pill__flag{width: 34px; height: 34px}
    .exchange-pill__main{gap: 8px}
    .exchange-pill__rates{gap: 8px}
    .exchange-pill__value{font-size: 14px}
    .exchange-ribbon__fade{width: 28px}
    .exchange-ribbon__track.is-ready{animation-duration: 48s}
}
@media (max-width: 767px) {
    .exchange-ribbon{margin-top: 28px}
    .exchange-ribbon__track{gap: 10px; padding: 10px}
    .exchange-ribbon__group{gap: 10px}
    .exchange-pill{min-width: 172px; padding: 9px 11px}
    .exchange-pill__flag{width: 32px; height: 32px}
    .exchange-pill__flag .fi{width: 20px; height: 14px}
    .exchange-pill__code{font-size: 14px}
    .exchange-pill__divider{height: 18px}
    .exchange-pill__label{font-size: 9px}
    .exchange-pill__value{font-size: 13px}
    .exchange-ribbon__fade{width: 18px}
    .exchange-ribbon__track.is-ready{animation-duration: 44s}
}
@media (max-width: 640px) {
    .exchange-pill{min-width: 160px; padding: 8px 10px}
    .exchange-pill__rates{gap: 6px}
    .exchange-ribbon__track.is-ready{animation-duration: 40s}
}
@media (prefers-reduced-motion: reduce) {
    .exchange-ribbon__track.is-ready{animation: none}
}
.exchange-ribbon.reveal-on-scroll{transform: translateY(32px) scale(0.985); filter: blur(6px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s cubic-bezier(0.22, 1, 0.36, 1)}
.exchange-ribbon.reveal-on-scroll.is-visible{transform: translateY(0) scale(1); filter: blur(0)}
.exchange-ribbon.is-visible .exchange-pill{animation: exchangePillLift 0.72s cubic-bezier(0.22, 1, 0.36, 1) both}
.exchange-ribbon.is-visible .exchange-pill:nth-child(2n){animation-delay: 0.06s}
.exchange-ribbon.is-visible .exchange-pill:nth-child(3n){animation-delay: 0.12s}
@keyframes exchangePillLift{from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); }}
@media (prefers-reduced-motion: reduce) {
    .exchange-ribbon.reveal-on-scroll{filter: none; transition: opacity 0.2s ease; transform: translateY(0)}
    .exchange-ribbon.is-visible .exchange-pill{animation: none}
}
.stable-sidebar-nav{position: relative; background: var(--ss--white); border: 1px solid var(--ss--gray-200); border-radius: 20px; padding: 18px; box-shadow: var(--ss--box-shadow); overflow: hidden}
.stable-sidebar-nav::before{content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--ss--brand--book)}
.stable-sidebar-nav__eyebrow{display: inline-block; margin-bottom: 8px; padding: 6px 10px; border-radius: 999px; background: var(--ss--brand--book); color: var(--ss--white); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase}
.stable-sidebar-nav__title{margin: 0 0 6px; color: var(--ss--gray-800); font-size: 20px; font-weight: 700; line-height: 1.3}
.stable-sidebar-nav__desc{margin: 0 0 16px; color: var(--ss--gray-500); font-size: 14px; line-height: 1.6}
.stable-sidebar-nav .microbusiness-sidebar__list{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch}
.stable-sidebar-nav .microbusiness-sidebar__list li{height: 100%}
.stable-sidebar-nav .microbusiness-sidebar__list a{position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; min-height: 72px; padding: 14px; border-radius: 14px; background: var(--ss--gray-100); border: 1px solid var(--ss--gray-200); color: var(--ss--gray-700); font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease}
.stable-sidebar-nav__link-text{flex: 1; min-width: 0}
.stable-sidebar-nav__icon{display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ss--brand--book); color: var(--ss--white); flex-shrink: 0; font-size: 12px; box-shadow: 0 8px 16px rgba(5, 40, 130, 0.18); transition: transform 0.2s ease}
.stable-sidebar-nav .microbusiness-sidebar__list a:hover{transform: translateY(-2px); background: var(--ss--white); box-shadow: 0 18px 30px rgba(5, 40, 130, 0.16), 0 8px 18px rgba(71, 156, 255, 0.10); color: var(--ss--gray-900)}
.stable-sidebar-nav .microbusiness-sidebar__list a:hover .stable-sidebar-nav__icon{transform: translateX(2px)}
@media (max-width: 767.98px) {
    .stable-sidebar-nav{padding: 16px; border-radius: 16px}
    .stable-sidebar-nav__title{font-size: 18px}
    .stable-sidebar-nav .microbusiness-sidebar__list{grid-template-columns: 1fr}
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .stable-sidebar-nav .microbusiness-sidebar__list{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
.sustainability-report-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px}
.sustainability-report-card{height: 100%; padding: 14px 14px 16px; border-radius: 20px; background: var(--ss--white); border: 1px solid var(--ss--gray-200); border-bottom: 1px solid var(--ss--red); box-shadow: var(--ss--box-shadow); text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-bottom-color .25s ease}
.sustainability-report-card:hover{transform: translateY(-4px); border-bottom-color: transparent; box-shadow: 0 18px 34px rgba(16, 24, 40, 0.12)}
.sustainability-report-card__media{display: block; border-radius: 16px; overflow: hidden; margin-bottom: 18px; aspect-ratio: 1 / 1; background: var(--ss--gray-100)}
.sustainability-report-card__media img{width: 100%; height: 100%; object-fit: cover; display: block}
.sustainability-report-card__title{min-height: 64px; margin: 0 0 18px; font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--ss--gray-700)}
.sustainability-report-card__action{display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--ss--blue-gradient); color: var(--ss--white); font-size: 14px; line-height: 1; transition: opacity .2s ease, transform .2s ease}
.sustainability-report-card__action:hover{opacity: .92; transform: translateY(-1px); color: var(--ss--white)}
.sustainability-report-card__action i{font-size: 13px}
.sustainability-report-viewer{position: fixed; inset: 0; z-index: 9999; display: none; padding: 0; background: rgba(15, 23, 42, 0.82)}
.sustainability-report-viewer.is-open{display: flex; align-items: center; justify-content: center}
.sustainability-report-viewer__dialog{width: 100vw; height: 100vh; position: relative; overflow: hidden; border-radius: 0; background: transparent; box-shadow: none}
.sustainability-report-viewer__close{position: absolute; top: 20px; right: 20px; z-index: 3; width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2)}
.sustainability-report-viewer__body{height: 100%; padding: 0; background: transparent}
.sustainability-report-viewer__book{height: 100%}
.sustainability-report-viewer__book-stage{position: relative; height: 100%; min-height: 0; padding: 24px; border-radius: 0; background: transparent; box-shadow: none}
.sustainability-report-viewer__book-stage::before{content: ""; position: absolute; inset: 24px; border-radius: 28px; background: rgba(255, 255, 255, 0.20); filter: blur(36px); opacity: 0.9; pointer-events: none}
.sustainability-report-viewer__loading,
.sustainability-report-viewer__empty{display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; border-radius: 24px; color: rgba(255, 255, 255, 0.84); font-size: 16px; text-align: center; background: rgba(255, 255, 255, 0.04)}
.sustainability-report-viewer__loading.is-hidden,
.sustainability-report-viewer__empty.is-hidden{display: none}
.sustainability-report-viewer__flipbook{position: relative; z-index: 1; width: 100%; height: 100%; margin: 0 auto; visibility: hidden}
.sustainability-report-viewer__flipbook.is-ready{visibility: visible}
.sustainability-report-page,
.sustainability-report-page *{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none}
.sustainability-report-viewer__nav-hit{position: absolute; top: 50%; z-index: 2; width: 56px; height: 56px; margin-top: -28px; border: 0; border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2); transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease}
.sustainability-report-viewer__nav-hit--prev{left: 24px}
.sustainability-report-viewer__nav-hit--next{right: 24px}
.sustainability-report-viewer__nav-hit[disabled]{opacity: 0.35; cursor: default; pointer-events: none}
.sustainability-report-viewer__nav-hit:not([disabled]):hover{transform: scale(1.05); background: rgba(15, 23, 42, 0.88)}
.sustainability-report-viewer__page-item{position: relative; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden}
.sustainability-report-viewer__page-canvas{width: auto; height: 100%; max-width: 100%; max-height: 100%; display: block; margin: 0 auto; background: #fff}
@media (max-width: 1199px) {
    .sustainability-report-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 767px) {
    .sustainability-report-grid{grid-template-columns: 1fr; gap: 20px}
    .sustainability-report-card__title{min-height: auto}
    .sustainability-report-viewer{padding: 0}
    .sustainability-report-viewer__dialog,
    .sustainability-report-viewer__book-stage,
    .sustainability-report-viewer__loading,
    .sustainability-report-viewer__empty,
    .sustainability-report-viewer__flipbook{height: 100%}
    .sustainability-report-viewer__nav-hit{width: 48px; height: 48px; margin-top: -24px}
}
.nav-tabs{border: 0}
.header-menu-toggle{display:none; width:48px; height:48px; padding:0; border:1px solid #d7dee8; border-radius:14px; background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%); align-items:center; justify-content:center; flex-direction:column; gap:5px; box-shadow:0 8px 18px rgba(16,24,40,.08)}
.header-menu-toggle span{display:block; width:18px; height:2px; border-radius:999px; background:var(--ss--gray-700); transition:transform .24s ease, opacity .24s ease}
header.menu-open .header-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.menu-open .header-menu-toggle span:nth-child(2){opacity:0}
header.menu-open .header-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.header-menu-panel{width:100%}
.header-menu-panel{display:flex; align-items:center; gap:24px}
.header-main-nav{flex:1 1 auto; min-width:0}
.header-mobile-cta{display:none!important;}

@media (max-width: 1200px) {
    .container{max-width:calc(100% - 40px)}
    header .header-bottom ul{gap:16px}
    header .header-bottom ul li a,
    header .header-bottom ul li a:visited{font-size:15px}
    .feature-split__body{margin-left:0; align-items:center}
    .feature-split__right{max-width:none}
}

@media (max-width: 992px) {
    .container{max-width:calc(100% - 32px)}
    header .header-top{display:none}
    header .header-mobile-top{display:block; max-height:60px; opacity:1; transform:translateY(0)}
    header.header-mobile-top-hidden .header-mobile-top{max-height:0; opacity:0; transform:translateY(-8px); border-bottom-color:transparent; pointer-events:none}
    header .header-bottom{height:72px}
    header.header-fixed .header-bottom{height:72px}
    header .header-bottom .header-logo img{height:54px}
    .header-menu-toggle{display:inline-flex}
    header .header-bottom__inner{position:relative; gap:12px; justify-content:space-between}
    header .header-menu{position:absolute; top:100%; left:0; right:0; width:100%; margin-left:0}
    .header-menu-panel{display:block; position:absolute; top:calc(100% + 12px); left:0; right:0; padding:16px; border-radius:20px; background:#fff; border:1px solid #d7dee8; box-shadow:0 18px 38px rgba(16,24,40,.14); max-height:calc(100dvh - 148px - env(safe-area-inset-bottom, 0px)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity .24s ease, transform .24s ease, visibility .24s ease}
    header.menu-open .header-menu-panel{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
    .header-main-nav{display:none}
    header .header-bottom ul{flex-direction:column; gap:10px}
    header .header-bottom ul li{padding:0}
    header .header-bottom .header-menu ul .active{padding:0; border-radius:16px; background:transparent}
    header .header-bottom .header-menu ul .active a,
    header .header-bottom .header-menu ul .active a:visited{color:var(--ss--white); background:var(--ss--red)}
    header .header-bottom ul li a,
    header .header-bottom ul li a:visited{display:flex; width:100%; padding:13px 14px; border-radius:16px; background:#f6f8fb; color:var(--ss--gray-700)}
    .header-mobile-footer-links{display:grid; gap:10px;/*margin-top:14px; padding-top:14px; border-top:1px solid var(--ss--gray-200)*/}
    .header-mobile-cta{display:block!important; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--ss--gray-200)}
    .header-mobile-cta .active{opacity:0.8}
    .header-mobile-footer-group{border:1px solid var(--ss--gray-200); border-radius:16px; background:#f8fafc; overflow:hidden}
    .header-mobile-footer-group summary{position:relative; display:flex; align-items:center; padding:13px 40px 13px 14px; list-style:none; cursor:pointer; font-size:14px; font-weight:700; color:var(--ss--gray-800)}
    .header-mobile-footer-group summary::-webkit-details-marker{display:none}
    .header-mobile-footer-group summary::after{content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--ss--gray-500); transition:transform .2s ease}
    .header-mobile-footer-group[open] summary::after{transform:translateY(-50%) rotate(180deg)}
    .header-mobile-footer-group__body{padding:0 10px 10px}
    .header-mobile-footer-group__body ul{display:flex; flex-direction:column; gap:8px}
    .header-mobile-footer-group__body ul li{padding:0}
    .header-mobile-footer-group__body ul li a,
    .header-mobile-footer-group__body ul li a:visited{display:flex; width:100%; padding:11px 12px; border-radius:12px; background:#fff; border:1px solid var(--ss--gray-200); color:var(--ss--gray-700); font-size:13px}
    .home-banner-swiper{height:min(82vh, 760px)}
    .home-banner .banner-menus{padding:24px 0}
    .home-banner .banner-menus ul{gap:18px; flex-wrap:wrap}
    .feature-split__title{padding:28px 0}
    .feature-split__title span{font-size:24px; text-align:center}
    .feature-split__body{flex-direction:column; gap:28px}
    .feature-split__left,
    .feature-split__right{width:100%}
    .feature-split__subtitle span{font-size:34px}
    .feature-split__description,
    .feature-split__description p,
    .feature-split__description span{font-size:16px}
    .page-banner{height:420px; padding:0 20px 56px; margin-bottom:28px}
    .page-banner h2{font-size:38px}
    footer .footer-items{padding:32px 0}
    footer .footer-items .footer--bottom-items{flex-direction:column; gap:22px}
    footer .footer-items .footer--bottom-items .footer--bottom-items-right .footer--bottom-items-right-title{text-align:left}
    body{--tool-stack-gap: 10px; --tool-fab-size: 54px; --tool-dock-offset: 16px}
    .tools-toggle{display:inline-flex}
    .tools{top:auto; right:calc(var(--tool-dock-offset) + 2px); bottom:calc(var(--tool-safe-bottom) + (var(--tool-fab-size) * 2) + (var(--tool-stack-gap) * 2) + 4px); transform:translateY(16px) scale(0.92); transform-origin:bottom right; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:10px; border-radius:28px; width:auto; max-width:none; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.28s ease, visibility 0.28s ease, transform 0.32s ease, box-shadow 0.28s ease}
    .tools.is-open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1)}
    .tools .tool a{width:46px; height:46px}
    .scroll-top-btn{right:calc(var(--tool-dock-offset) + var(--tool-fab-size) + var(--tool-stack-gap)); bottom:calc(var(--tool-safe-bottom) + 2px)}
    .ai-tool{bottom:calc(var(--tool-safe-bottom) + 2px)}
    .tools-toggle{bottom:calc(var(--tool-safe-bottom) + var(--tool-fab-size) + var(--tool-stack-gap) + 2px)}
}

@media (max-width: 767px) {
    .ss-mt-40{margin-top:20px!important}
    .ss-mb-40{margin-bottom:20px!important}
    .container{max-width:calc(100% - 24px)}
    .home-banner-swiper{min-height:100svh}
    .home-banner .container{min-height:calc(100svh - 146px)}
    .home-banner .banners .banner-item{padding:96px 0 36px}
    .home-banner .banners .banner-item .banner-name{font-size:38px; margin-bottom:16px}
    .home-banner .banners .banner-item .banner-description{font-size:14px; line-height:1.7}
    .home-banner .banners .banner-item .banner-more{margin-top:28px}
    .home-banner .banner-menus{padding:18px 0 76px}
    .home-banner__menu-content{grid-template-columns: 1fr 1fr; gap: 10px}
    .home-banner__menu-content > p,
    .home-banner__menu-content > a,
    .home-banner__menu-content > span,
    .home-banner__menu-content > div,
    .home-banner__menu-content > ul,
    .home-banner__menu-content > ol{padding: 12px 14px; border-radius: 16px; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08)}
    .home-banner__menu-content > ul,
    .home-banner__menu-content > ol{padding-left: 26px}
    .home-banner__menu-content p,
    .home-banner__menu-content a,
    .home-banner__menu-content span,
    .home-banner__menu-content li,
    .home-banner__menu-content td,
    .home-banner__menu-content th{font-size: 14px; line-height: 1.55}
    .home-banner .banner-menus ul,
    .home-banner .banner-menus ol,
    .home-banner .banner-menus .container > *:not(ul):not(ol){display:grid; grid-template-columns:1fr 1fr; width:100%; gap:12px 16px}
    .home-banner .banner-menus ul li,
    .home-banner .banner-menus ol li,
    .home-banner .banner-menus .container > * > a,
    .home-banner .banner-menus .container > * > span,
    .home-banner .banner-menus .container > * > p{min-width:0}
    .home-banner .banner-menus ul li a,
    .home-banner .banner-menus ul li span,
    .home-banner .banner-menus ol li,
    .home-banner .banner-menus ol li span,
    .home-banner .banner-menus .container > * > a,
    .home-banner .banner-menus .container > * > span,
    .home-banner .banner-menus .container > * > p{display:block; line-height:1.5}
    .home-banner-swiper .swiper-button-next,
    .home-banner-swiper .swiper-button-prev{display:none}
    .feature-split{padding:8px 0}
    .feature-split__title{gap:10px;}
    .feature-split__title::before,
    .feature-split__title::after{display:none}
    .feature-split__title span{font-size:22px; padding:0; text-align:center; width:100%}
    .feature-split__body{margin-left:0; gap:40px; align-items:center; padding:34px; border:1px solid var(--ss--gray-200); border-radius:28px; background:linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); box-shadow:0 22px 48px rgba(16, 24, 40, 0.08)}
    .feature-split__left{flex:0 0 min(42%, 420px); width:min(42%, 420px)}
    .feature-split__right{flex:1 1 auto; max-width:none}
    .feature-split__left,
    .feature-split__right{width:100%; flex-basis:auto}
    .feature-split__image{overflow:visible; max-width:100%; margin:0 auto}
    .feature-split__image img{height:320px; border-radius:24px; box-shadow:0 16px 34px rgba(15, 23, 42, 0.10); object-fit:cover}
    .feature-split__bg-shape{display:none}
    .feature-split__subtitle,
    .feature-split__description,
    .feature-split__more{text-align:left}
    .feature-split__subtitle{margin-bottom:14px}
    .feature-split__subtitle span{font-size:34px; line-height:1.18; font-weight:700}
    .feature-split__description,
    .feature-split__description p,
    .feature-split__description span{font-size:16px; line-height:1.75}
    .feature-split__description p:last-child{margin-bottom:0}
    .feature-split__more{display:block; margin-top:24px}
    .page-banner{height:360px; padding-bottom:44px}
    .page-banner .breadcrumb{font-size:13px; flex-wrap:wrap}
    .page-banner h2{font-size:30px}
    footer .footer-items .footer--top-items{padding-bottom:28px; margin-bottom:28px}
    .footer-feedback-btn{width:100%; justify-content:center}
    footer .footer-items .footer--bottom-items .footer--bottom-items-right ul{justify-content:flex-start; flex-wrap:wrap}
}

@media (max-width: 576px) {
    .home-banner .container{min-height:calc(100svh - 158px)}
    .home-banner .banners .banner-item{padding:330px 0 28px}
    .home-banner .banners .banner-item .banner-name{font-size:32px}
    .home-banner .banners .banner-item .banner-more a,
    .home-banner .banners .banner-item .banner-more a:visited{display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:220px}
    .home-banner .banner-menus{padding:16px 0 72px}
    .home-banner__menu-content{grid-template-columns: 1fr}
    .home-banner__menu-content > p,
    .home-banner__menu-content > a,
    .home-banner__menu-content > span,
    .home-banner__menu-content > div,
    .home-banner__menu-content > ul,
    .home-banner__menu-content > ol{padding: 11px 12px; border-radius: 14px}
    .home-banner__menu-content p,
    .home-banner__menu-content a,
    .home-banner__menu-content span,
    .home-banner__menu-content li,
    .home-banner__menu-content td,
    .home-banner__menu-content th{font-size: 13px}
    .home-banner .banner-menus ul,
    .home-banner .banner-menus ol,
    .home-banner .banner-menus .container > *:not(ul):not(ol){grid-template-columns:1fr}
    .home-banner .banner-menus ul li,
    .home-banner .banner-menus ul li span,
    .home-banner .banner-menus ol li,
    .home-banner .banner-menus ol li span,
    .home-banner .banner-menus .container > * > a,
    .home-banner .banner-menus .container > * > span,
    .home-banner .banner-menus .container > * > p{font-size:14px}
    .page-banner{height:320px; margin-top: 120px;}
    .page-banner__desc{max-width:100%; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-height:4.5em; font-size:14px; line-height:1.5; margin-top:12px}
    .page-banner__content.is-desc-expanded .breadcrumb{display:none}
    .page-banner__desc.is-expanded{display:block; -webkit-line-clamp:unset; max-height:min(32vh, 150px); overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-right:6px}
    .page-banner__desc > *{display:inline; margin:0}
    .page-banner__desc br{display:none}
    .page-banner__desc-toggle{display:inline-flex; align-items:center; justify-content:center}
    .page-banner h2{font-size:18px}
    footer .footer-items .footer--top-items .footer--top-items-left > div:not(.footer-column-title){align-items:flex-start}
    body{--tool-stack-gap: 8px; --tool-fab-size: 48px; --tool-dock-offset: 12px}
    .tools{right:8px; bottom:calc(var(--tool-safe-bottom) + (var(--tool-fab-size) * 2) + (var(--tool-stack-gap) * 2) + 6px); padding:8px; gap:8px}
    .tools .tool a{width:42px; height:42px}
    .tools .tool a .icon{width:18px; height:18px}
    .ai-tool .icon{font-size:20px}
    .scroll-top-btn i{font-size:14px}
}

@media (max-width: 480px) {
    header .header-mobile-top__inner{min-height: 46px}
    header .header-mobile-top__actions > *{min-height: 24px}
    header .header-mobile-top__action,
    header .header-mobile-top__action:visited{width: 24px; height: 24px}
    header .header-mobile-top__action .icon{width: 16px; height: 16px}
    header .header-mobile-top__action .lang-flag{width: 18px; height: 18px}
    header .header-mobile-top__edc{width: 36px; height: 24px}
    header .header-mobile-top__edc .edc-logo{max-width: 36px}
    header .header-mobile-top__actions > *:not(:last-child){padding-right: 8px; margin-right: 8px}
    header .header-mobile-top__actions > *:not(:last-child)::after{height: 16px}
    header .header-mobile-top .mini-search-box--mobile{top: calc(100% + 0); left: 0; right: 0; width: auto; min-width: 0; padding: 10px 12px 12px; border-radius: 0 0 14px 14px}
    header .header-mobile-top .mini-search-box--mobile form{gap: 8px}
    header .header-mobile-top .mini-search-box--mobile input[type="search"]{height: 38px; padding: 0 12px; font-size: 13px; border-radius: 10px}
    header .header-mobile-top .mini-search-box--mobile button{width: 38px; height: 38px; border-radius: 10px}
    .feature-split__body{gap:20px; padding:18px; border-radius:20px}
    .feature-split__image img{height:228px; border-radius:18px; box-shadow:none}
    .business-section-bg-image img{height:auto!important;}
    .feature-split__subtitle{margin-bottom:10px}
    .feature-split__subtitle span{font-size:24px}
    .feature-split__description,
    .feature-split__description p,
    .feature-split__description span{font-size:15px; line-height:1.7}
    .feature-split__more{margin-top:18px}
    .feature-split__more a,
    .feature-split__more a:visited{width:100%; max-width:220px; text-align:center}
}

@media (max-width: 420px) {
    .tools{padding:8px; gap:6px}
    .tools .tool a{width:40px; height:40px}
}