/* Smart ITL Translation - shared website standards */
:root {
    --std-ink: #102a43;
    --std-ink-soft: #526779;
    --std-blue: #1769aa;
    --std-teal: #0d8b8f;
    --std-teal-dark: #096c70;
    --std-gold: #e5a33a;
    --std-paper: #f7fbfd;
    --std-line: #dce8f0;
    --std-font: "Sarabun", "Noto Sans Thai", Tahoma, Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* One browser scrollbar for the document, using the site's teal accent. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #e8f1f5;
}

::-webkit-scrollbar-thumb {
    background: #65aeb2;
    border: 2px solid #e8f1f5;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0d8b8f;
}

body,
#body-bg,
#wrapper,
#content {
    font-family: var(--std-font) !important;
}

body {
    min-width: 320px;
    color: var(--std-ink) !important;
    background: var(--std-paper) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

main {
    scroll-margin-top: 18px;
}

/* Keyboard users should always be able to see where they are. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--std-gold) !important;
    outline-offset: 2px !important;
    border-radius: 8px;
}

.skip-to-content {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    padding: 10px 16px;
    color: #fff !important;
    background: var(--std-ink);
    border-radius: 9px;
    box-shadow: 0 8px 22px rgba(16, 42, 67, .24);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    transform: translateY(-160%);
    transition: transform .2s ease;
}

.skip-to-content:focus {
    transform: translateY(0);
}

/* Shared navigation */
.standard-site-header {
    background: #fff !important;
    border-bottom-color: var(--std-line) !important;
}

.standard-site-brand strong {
    color: var(--std-ink) !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
}

.standard-site-brand small {
    color: var(--std-ink-soft) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.standard-site-menu,
.standard-site-menu-toggle {
    background: var(--std-ink) !important;
}

.standard-site-menu-inner > a,
.standard-site-menu-inner > details > summary {
    min-height: 48px;
    color: #f1f8fc !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.standard-site-menu-inner > a:hover,
.standard-site-menu-inner > a:focus-visible,
.standard-site-menu-inner > details > summary:hover,
.standard-site-menu-inner > details > summary:focus-visible,
.standard-site-menu-inner > details[open] > summary {
    color: #fff !important;
    background: var(--std-teal) !important;
}

.standard-site-menu-inner > a.is-current {
    color: #fff !important;
    background: rgba(13, 139, 143, .72) !important;
    box-shadow: inset 0 -3px 0 var(--std-gold);
}

.standard-site-menu-inner > details.has-current > summary {
    box-shadow: inset 0 -3px 0 var(--std-gold);
}

.standard-site-menu-inner details .standard-site-submenu {
    border-color: var(--std-line) !important;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(16, 42, 67, .18);
}

.standard-site-menu-inner details .standard-site-submenu a {
    min-height: 44px;
    color: var(--std-ink) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.standard-site-menu-inner details .standard-site-submenu a:hover,
.standard-site-menu-inner details .standard-site-submenu a:focus-visible {
    color: var(--std-ink) !important;
    background: #e8f5f5 !important;
}

/* The legacy top navigation uses the same brand palette. */
#topbar .topbar-sub-container {
    background: var(--std-ink) !important;
}

#topbar ul.topnav > li > a:hover,
#topbar ul.topnav > li > a:focus-visible,
#topbar ul.topnav > li > .menu-label:hover,
#topbar ul.topnav > li.has-submenu.is-open > .menu-label,
#topbar ul.topnav > li.has-submenu:focus-within > .menu-label {
    background: var(--std-teal) !important;
}

#topbar ul.topnav > li > ul.subnav a:hover {
    color: var(--std-ink) !important;
    background: #e8f5f5 !important;
}

/* Legacy article pages: readable measure, spacing and heading hierarchy. */
#content > .title,
#content > .product-title,
#content > .product-search-result-title,
#content > .content-tag-title {
    color: var(--std-ink) !important;
    font-size: clamp(30px, 4vw, 42px) !important;
    line-height: 1.3 !important;
}

#content .descriptionContainer .description {
    max-width: 920px !important;
    margin-top: 18px !important;
    padding: clamp(24px, 4vw, 40px) !important;
    color: #263b4d !important;
    background: #fff !important;
    border: 1px solid var(--std-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(16, 42, 67, .06);
    font-size: 16px !important;
    line-height: 1.85 !important;
}

#content .descriptionContainer .description h1,
#content .descriptionContainer .description h2,
#content .descriptionContainer .description h3 {
    color: var(--std-ink) !important;
    line-height: 1.4 !important;
}

#content .descriptionContainer .description h1 {
    font-size: clamp(28px, 4vw, 38px) !important;
}

#content .descriptionContainer .description h2 {
    font-size: 26px !important;
}

#content .descriptionContainer .description h3 {
    font-size: 20px !important;
}

.content-enhancement h2 {
    border-left-color: var(--std-teal) !important;
    background: linear-gradient(90deg, #e8f5f5 0%, #fff 100%) !important;
}

.content-enhancement h3 {
    color: var(--std-teal-dark) !important;
}

#content .descriptionContainer .description p,
#content .descriptionContainer .description li {
    color: #334e68 !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
}

#content .descriptionContainer .description a,
.content-enhancement a,
.service-related-links a {
    color: var(--std-blue) !important;
}

#content .descriptionContainer .description a:hover,
.content-enhancement a:hover,
.service-related-links a:hover {
    color: var(--std-teal-dark) !important;
}

#content .descriptionContainer .description img {
    max-width: 100%;
    height: auto !important;
}

/* Older enhancement blocks inherit the same calm blue/teal system. */
.why-choose-us,
.process-flow,
.testimonials-section,
.faq-section,
.seo-content-section {
    border-color: var(--std-line) !important;
}

.why-choose-us,
.testimonials-section {
    background: linear-gradient(135deg, #f7fbfd 0%, #e8f5f5 100%) !important;
}

.process-flow,
.faq-section,
.seo-content-section {
    background: #fff !important;
}

.why-choose-us h2::after,
.process-flow h2::after,
.testimonials-section h2::after {
    background: linear-gradient(90deg, var(--std-teal), var(--std-blue)) !important;
}

.benefit-item i,
.process-step i,
.testimonial-card i,
.faq-item i {
    color: var(--std-teal) !important;
}

.step-number {
    background: linear-gradient(135deg, var(--std-teal), var(--std-blue)) !important;
    box-shadow: 0 4px 10px rgba(13, 139, 143, .24) !important;
}

/* Shared action blocks and floating contact controls. */
.service-standard-cta,
.service-related-links {
    border-color: var(--std-line) !important;
    border-radius: 16px !important;
}

.service-cta-button,
.cta-button,
.cta-button-step,
.floating-contact a {
    background: var(--std-teal) !important;
    border-color: var(--std-teal) !important;
    color: #fff !important;
}

.service-cta-button:hover,
.cta-button:hover,
.cta-button-step:hover,
.floating-contact a:hover {
    background: var(--std-teal-dark) !important;
}

/* Shared footer */
.footer-modern {
    background: linear-gradient(135deg, #0b1d30 0%, #123b58 100%) !important;
}

.footer-modern .footer-col h4::after {
    background: var(--std-gold) !important;
}

.footer-modern .footer-col a:hover,
.footer-modern .footer-col a:focus-visible {
    color: #9ce4df !important;
}

.footer-modern .footer-col ul li a::before,
.footer-modern .footer-col p i {
    color: #8ad1cb !important;
}

.footer-modern .footer-social a:hover {
    background: var(--std-teal) !important;
}

/* Keep touch controls comfortable without making desktop pages dense. */
@media (max-width: 720px) {
    .standard-site-menu-toggle {
        min-height: 56px !important;
        padding: 0 18px !important;
        font-size: 17px !important;
    }

    .standard-site-menu a,
    .standard-site-menu summary {
        min-height: 48px !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
    }

    .standard-site-submenu a {
        min-height: 46px !important;
        font-size: 14px !important;
    }

    #content > .title,
    #content > .product-title,
    #content > .product-search-result-title,
    #content > .content-tag-title {
        font-size: clamp(28px, 8vw, 36px) !important;
    }

    #content .descriptionContainer .description {
        margin-top: 12px !important;
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Unified content geometry for inner pages.
   The original template gave the main description a 920px card while the
   sections below it used 1,160px.  This created uneven edges and a card
   inside another card.  The homepage is intentionally excluded because it
   has its own Hero layout. */
#content:not(.homepage-content) .descriptionContainer {
    width: 100% !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

#content:not(.homepage-content) .descriptionContainer .description {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 18px 0 42px !important;
    padding: 28px 0 36px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Enhanced service copy can contain the shared CTA and related-links blocks.
   Flatten that wrapper so those blocks do not become cards inside a second
   card, while retaining the heading bars and readable typography. */
#content:not(.homepage-content) .descriptionContainer .description > .content-enhancement {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 0 42px !important;
    padding: 0 0 42px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#content:not(.homepage-content) .descriptionContainer .description > .service-standard-cta,
#content:not(.homepage-content) .descriptionContainer .description > .service-related-links {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--std-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(16, 42, 67, .06) !important;
}

#content:not(.homepage-content) > .service-standard-cta,
#content:not(.homepage-content) > .service-related-links,
#content:not(.homepage-content) > .why-choose-us,
#content:not(.homepage-content) > .process-flow,
#content:not(.homepage-content) > .testimonials-section,
#content:not(.homepage-content) > .cta-section,
#content:not(.homepage-content) > .related-articles {
    width: calc(100% - 40px) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Keep each lower callout on the same neutral surface and use one restrained
   border treatment instead of competing yellow/blue frames. */
#content:not(.homepage-content) > .service-standard-cta,
#content:not(.homepage-content) > .service-related-links {
    border: 1px solid var(--std-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(16, 42, 67, .06) !important;
}

@media (max-width: 720px) {
    #content:not(.homepage-content) .descriptionContainer {
        width: 100% !important;
        max-width: 100% !important;
    }

    #content:not(.homepage-content) .descriptionContainer .description {
        width: 100% !important;
        margin: 12px 0 32px !important;
        padding: 22px 18px 30px !important;
    }

    #content:not(.homepage-content) > .service-standard-cta,
    #content:not(.homepage-content) > .service-related-links,
    #content:not(.homepage-content) > .why-choose-us,
    #content:not(.homepage-content) > .process-flow,
    #content:not(.homepage-content) > .testimonials-section,
    #content:not(.homepage-content) > .cta-section,
    #content:not(.homepage-content) > .related-articles {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
    }
}