@import url("https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700;800&family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap");

:root {
    --template-font: "Google Sans", "Noto Sans Thai", system-ui, sans-serif;
    --template-body-size: 18px;
    --template-body-line: 1.82;
    --template-heading-line: 1.24;
    --template-navy: #0a2d7d;
    --template-navy-dark: #071e57;
    --template-navy-light: #1348c6;
    --template-orange: #ff7a00;
    --template-text: #1f2937;
    --template-muted: #5f6b7a;
    --template-panel: #ffffff;
    --template-bg: #f3f6fc;
    --template-line: #dbe5f4;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
    font-family: var(--template-font) !important;
}

body {
    font-size: var(--template-body-size) !important;
    line-height: var(--template-body-line) !important;
    color: var(--template-text);
    background: var(--template-bg);
    text-rendering: optimizeLegibility;
}

p,
li,
td,
th,
label,
summary,
.faq-ans,
.note,
.svc-card-body p,
.price-card-body ul,
.price-card-body .note,
.hero p,
.page-hero p,
.article-content p,
.v710 p {
    font-size: 1rem !important;
    line-height: 1.82 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--template-heading-line) !important;
    letter-spacing: 0 !important;
    color: var(--template-navy-dark);
}

.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero h4,
.page-hero h5,
.page-hero h6,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="hero"] h3,
[class*="hero"] h4,
[class*="hero"] h5,
[class*="hero"] h6,
[style*="#071e57"] h1,
[style*="#071e57"] h2,
[style*="#071e57"] h3,
[style*="#0a2d7d"] h1,
[style*="#0a2d7d"] h2,
[style*="#0a2d7d"] h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(7, 30, 87, 0.18);
}

h1 {
    font-size: clamp(2.2rem, 4vw, 3.25rem) !important;
}

h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
}

h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.65rem) !important;
}

h4 {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important;
}

a,
.menu a,
.smenu a,
.site-nav a {
    text-underline-offset: 0.16em;
}

.std-header,
.site-header,
header {
    border-bottom: 1px solid rgba(10, 45, 125, 0.08);
    backdrop-filter: saturate(160%) blur(12px);
}

.std-header .slogo,
.site-header .brand,
.logo,
.site-brand {
    font-family: var(--template-font) !important;
    font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
    font-weight: 800 !important;
}

.std-header .smenu a,
.site-nav a,
.menu a,
nav .menu a {
    font-family: var(--template-font) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.std-header .smenu,
.menu {
    position: relative;
}

.services-mega {
    display: none;
}

.services-mega-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--template-line);
    margin-bottom: 18px;
}

.services-mega-head strong {
    display: block;
    font-size: 1.18rem;
    color: var(--template-navy-dark);
}

.services-mega-head p {
    margin: 6px 0 0;
    color: var(--template-muted);
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
}

.services-mega-linkall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--template-navy-light) !important;
    font-weight: 700 !important;
}

.services-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.services-mega-card {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 16px !important;
    background: #f8fbff;
    border: 1px solid #e6eef9;
    text-decoration: none;
    min-height: 100px;
}

.services-mega-card:hover {
    background: #eef5ff;
    border-color: #c9d9f6;
}

.services-mega-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--template-navy-light);
    background: #e8f0ff;
    box-shadow: inset 0 0 0 1px rgba(19, 72, 198, 0.08);
}

.services-mega-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.services-mega-body strong {
    display: block;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--template-navy-dark);
}

.services-mega-body span {
    display: block;
    margin-top: 4px;
    color: var(--template-muted);
    font-size: 0.87rem;
    line-height: 1.6;
}

.std-header .smenu a.cta,
.btn-cta,
.cta-btn,
.site-nav .cta,
.smenu a.login,
.smenu a.cta {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.page-hero p,
.hero p,
.lead,
.svc-intro p,
.price-intro p {
    font-size: 1.05rem !important;
    color: var(--template-muted);
}

.page-hero p,
.hero p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.page-hero .lead,
.page-hero .subtitle,
.page-hero .eyebrow,
.hero .lead,
.hero .subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

.container,
.wrap,
.content-wrap,
.sf-main,
.snav,
.nav {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.std-footer,
.site-footer,
footer.std-footer {
    font-family: var(--template-font) !important;
}

.std-footer h4,
.site-footer h4,
footer h4 {
    font-size: 1rem !important;
}

.std-footer p,
.std-footer a,
.std-footer li,
.site-footer p,
.site-footer a,
.site-footer li,
footer .footer-inner,
footer .footer-brand {
    font-size: 0.96rem !important;
    line-height: 1.8 !important;
}

.std-footer .sf-bottom,
.std-footer .sf-cat,
.site-footer .sf-bottom,
.site-footer .sf-cat,
footer .footer-inner {
    font-size: 0.94rem !important;
}

.std-footer .sf-bottom a,
.std-footer .sf-cat a {
    margin-inline: 6px !important;
}

.std-footer .sf-sep {
    width: 15px !important;
    height: 15px !important;
}

.price-card,
.svc-card,
.svc-group,
.cta-section,
.price-compare,
.faq-item,
.faq-card,
.article-card,
.post-card {
    border-radius: 16px !important;
}

@media (max-width: 900px) {
    body {
        font-size: 17px !important;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 16.5px !important;
    }

    .std-header .smenu a,
    .site-nav a,
    .menu a,
    nav .menu a {
        font-size: 0.95rem !important;
    }

    .std-footer .sf-main,
    .site-footer .sf-main {
        gap: 22px !important;
    }
}

.hero-banner + .section,
.hero-banner + section,
.page-hero + .section,
.page-hero + section,
.service-main,
main > .section,
main > section,
.faq-section .container,
.reviews-grid,
.reviews-summary,
.process-steps,
.seo-steps-list,
.cta-inline,
.cta-contact,
.toc,
.hc-section.container,
.v710 {
    width: min(1120px, calc(100% - 56px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero-banner .container,
.hero-banner .banner-img {
    width: 100% !important;
    max-width: 100% !important;
}

.hero-banner {
    margin-bottom: 24px !important;
}

.hero-banner + .section .container,
.hero-banner + section .container,
main > .section > .container,
main > section > .container,
.faq-section .container,
.section .container {
    width: min(1120px, calc(100% - 56px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.step-item,
.faq-item,
.review-card,
.toc,
.process-step,
.seo-step-item,
.cta-inline,
.hc-card,
.v710 .card {
    border-radius: 18px !important;
}

.step-item,
.faq-item,
.process-step,
.seo-step-item,
.review-card,
.cta-inline {
    box-shadow: 0 16px 40px rgba(10, 45, 125, 0.08) !important;
    border: 1px solid #dbe5f4 !important;
}

.price-card .p-desc,
.price-card .p-features li,
.step-item p,
.faq-a p,
.seo-step-item div,
.cta-inline .cta-text p,
.toc,
.reviews-grid p,
.process-step p {
    font-size: 1rem !important;
    line-height: 1.82 !important;
}

.price-card .p-price,
.price-card .p-name,
.step-item h4,
.faq-q,
.process-step h3 {
    color: var(--template-navy-dark) !important;
}

.cta-inline .cta-text h2,
.cta-inline .cta-contact-item span,
.cta-inline .cta-contact-item strong,
.cta-inline .btn-cta-big {
    color: #fff !important;
}

.faq-list {
    max-width: 100% !important;
}

.faq-q {
    font-weight: 800 !important;
}

.rs-foot,
.rs-foot a {
    font-size: 1rem !important;
    line-height: 1.8 !important;
}

@media (max-width: 760px) {
    .hero-banner + .section,
    .hero-banner + section,
    .page-hero + .section,
    .page-hero + section,
    .service-main,
    main > .section,
    main > section,
    .faq-section .container,
    .reviews-grid,
    .reviews-summary,
    .process-steps,
    .seo-steps-list,
    .cta-inline,
    .cta-contact,
    .toc,
    .hc-section.container,
    .v710,
    .hero-banner + .section .container,
    .hero-banner + section .container,
    main > .section > .container,
    main > section > .container,
    .section .container {
        width: min(1120px, calc(100% - 24px)) !important;
    }
}

@media (min-width: 1024px) {
    .menu-services {
        position: relative;
    }

    .menu-services > a {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
    }

    .menu-services > a::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 1.8px solid currentColor;
        border-bottom: 1.8px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        opacity: 0.72;
    }

    .menu-services.is-open > a,
    .menu-services:hover > a,
    .menu-services:focus-within > a {
        background: #eef2ff !important;
        color: var(--template-navy-light) !important;
    }

    .services-mega {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        z-index: 120;
        display: block;
        width: min(920px, calc(100vw - 32px));
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(10, 45, 125, 0.08);
        border-radius: 22px;
        box-shadow: 0 20px 60px rgba(10, 45, 125, 0.16);
        padding: 22px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    }

    .services-mega::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 18px;
    }

    .menu-services.is-open .services-mega,
    .menu-services:hover .services-mega,
    .menu-services:focus-within .services-mega {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .services-mega::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 50%;
        width: 16px;
        height: 16px;
        background: #fff;
        border-top: 1px solid rgba(10, 45, 125, 0.08);
        border-left: 1px solid rgba(10, 45, 125, 0.08);
        transform: translateX(-50%) rotate(45deg);
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .services-mega {
        width: min(760px, calc(100vw - 28px));
    }

    .services-mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}