/*
 * Modern Business: bright and friendly. White canvas, deep navy ink, one
 * electric green kept almost only for the call-to-action buttons (navy label),
 * flat pastel panels with large radii and no borders or shadows, a single
 * rounded geometric family, and one emphasis device per zone: an italic word
 * in the hero, coloured highlight pills in a paragraph, a hand-drawn yellow
 * underline under a section heading, a highlighter mark in testimonials.
 */
:root {
	--sk-bg: #FFFFFF;
	--sk-surface: #FFFFFF;
	--sk-soft: #F3F6FA;
	--sk-border: #E3E8EE;
	--sk-border-strong: #C5D0DA;
	--sk-ink: #14303E;
	--sk-text: #2A4552;
	--sk-muted: #4F6773;
	--sk-dark: #12262E;
	--sk-dark-surface: #19323C;
	--sk-dark-border: rgba(255, 255, 255, .14);
	--sk-dark-ink: #FFFFFF;
	--sk-dark-text: #B5C5CC;
	--sk-btn: var(--primary, #2EE07F);
	--sk-btn-ink: #14303E;
	--sk-btn-hover: #24CF72;
	--sk-accent: var(--secondary, #FFC94D);
	--sk-accent-ink: #14303E;
	--sk-pastel-blue: #E1EAF6;
	--sk-pastel-lavender: #EAE5FA;
	--sk-pastel-cream: #FBF1CE;
	--sk-pastel-mint: #DFF3E7;
	--sk-pastel-pink: #F9E1E4;
	--sk-radius-btn: 8px;
	--sk-radius-card: 24px;
	--sk-radius-media: 20px;
	--sk-radius-sm: 10px;
	--sk-card-border: 0 solid transparent;
	--sk-card-padding: 32px;
	--sk-shadow-media: none;
	--sk-font-display: var(--cms-font-heading, 'LINE Seed', Tahoma, sans-serif);
	--sk-font-body: var(--cms-font-body, 'LINE Seed', Tahoma, sans-serif);
	--sk-font-mono: 'LINE Seed', Tahoma, sans-serif; /* labels: LINE Seed too (3.5.5 theme round) */
	--sk-heading-weight: 700;
	--sk-tracking: -0.02em;
	--sk-hero-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.5rem);
	--sk-display-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	--sk-section-y: 112px;
	--sk-header-bg: #FFFFFF;
	--sk-header-border: #EEF1F4;
	--sk-footer-bg: #12262E;
	--sk-footer-text: #B5C5CC;
	--sk-page-header-bg: #E1EAF6;
}

/* 3.5.5 (HANDOFF 20.6): a colour palette repaints the theme. Kumo writes the palette's paper, words, card colour,
   button and accent (--sk-bg --sk-ink --sk-soft --sk-btn --sk-accent …) on :root; here, on body, the theme works out
   the rest from them — with the theme's own colours these give exactly the values above, so nothing changes until
   a palette is used. The dark band and the footer keep the theme's own near-black; pastels keep their own words. */
/* LINE Seed for Thai: no negative tracking (3.5.5 theme round) */
html[lang="th"] body.cms-theme-modern-business { --sk-tracking: 0; }
body.cms-theme-modern-business {
	--sk-text: color-mix(in srgb, var(--sk-ink) 90%, var(--sk-bg));
	--sk-text: rgb(from color-mix(in srgb, var(--sk-ink) 90%, var(--sk-bg)) max(0, r - 2) g min(255, b + 1));
	--sk-muted: color-mix(in srgb, var(--sk-ink) 73%, var(--sk-bg));
	--sk-muted: rgb(from color-mix(in srgb, var(--sk-ink) 73%, var(--sk-bg)) max(0, r - 4) max(0, g - 1) min(255, b + 1));
	--sk-border: color-mix(in srgb, var(--sk-ink) 11%, var(--sk-bg));
	--sk-border: rgb(from color-mix(in srgb, var(--sk-ink) 11%, var(--sk-bg)) max(0, r - 2) g min(255, b + 4));
	--sk-border-strong: color-mix(in srgb, var(--sk-ink) 22%, var(--sk-bg));
	--sk-border-strong: rgb(from color-mix(in srgb, var(--sk-ink) 22%, var(--sk-bg)) max(0, r - 6) max(0, g - 1) min(255, b + 5));
	--sk-surface: var(--sk-bg);
	--sk-header-bg: var(--sk-bg);
	--sk-header-border: color-mix(in srgb, var(--sk-ink) 7%, var(--sk-bg));
	--sk-header-border: rgb(from color-mix(in srgb, var(--sk-ink) 7%, var(--sk-bg)) max(0, r - 1) g min(255, b + 3));
	--sk-page-header-bg: #E1EAF6; /* a pastel of the theme: its words stay the theme's own (below) */
	--sk-btn-hover: rgb(from var(--sk-btn) max(0, r - 10) max(0, g - 17) max(0, b - 13));
	--sk-accent-ink: #14303E;
	--sk-accent-ink: rgb(from var(--sk-accent) calc(255 - 235 * clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 150) * 999, 1)) calc(255 - 207 * clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 150) * 999, 1)) calc(255 - 193 * clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 150) * 999, 1)));
	--primary-inverse: #212529;
	--primary-inverse: rgb(from var(--primary) calc(255 - 222 * clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 150) * 999, 1)) calc(255 - 218 * clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 150) * 999, 1)) calc(255 - 214 * clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 150) * 999, 1)));
	--sk-dark: #12262E;
	--sk-dark-surface: #19323C;
	--sk-dark-ink: #FFFFFF;
	--sk-dark-text: #B5C5CC;
	--sk-footer-text: #B5C5CC;
}
.cms-theme-modern-business [class*="sk-tone-pastel-"], .cms-theme-modern-business [class*="sk-card-pastel-"], .cms-theme-modern-business .page-header { --sk-ink: #14303E; --sk-text: #2A4552; --sk-muted: #4F6773; --sk-border: #E3E8EE; --sk-link: #14303E; color: var(--sk-text); }
.cms-theme-modern-business .sk-tone-brand { --sk-dark-ink: var(--sk-btn-ink); --sk-dark-text: var(--sk-btn-ink); }

/* 3.5.5 (HANDOFF 20.6) — second part: what the core resolves on :root or draws in fixed greys, re-pointed here so a
   palette reaches it too (the same colours as before with the theme's own). */
body.cms-theme-modern-business {
	--sk-footer-ink: var(--sk-dark-ink);
	--sk-footer-border: var(--sk-dark-border);
	--sk-dark-border: rgba(255, 255, 255, .14);
	--sk-nav-ink: color-mix(in srgb, var(--sk-ink) 90%, var(--sk-bg));
	--sk-nav-ink: rgb(from color-mix(in srgb, var(--sk-ink) 90%, var(--sk-bg)) calc(r + 24) calc(g - 1) calc(b - 13));
}
/* the menu links and icons kumo.css draws in a fixed #444 */
.cms-theme-modern-business #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a, .cms-theme-modern-business #header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a, .cms-theme-modern-business #header .header-nav-features-toggle, .cms-theme-modern-business #header .header-nav-features .header-nav-top-icon { color: var(--sk-nav-ink); }
/* the pastel highlights keep the theme's own words */
.cms-theme-modern-business .cms-text mark, .cms-theme-modern-business .sk-chip.is-active { --sk-ink: #14303E; }

.cms-theme-modern-business body, body.cms-theme-modern-business { font-weight: 400; }
/* Buttons: solid green with a navy label, 8px corners — always the loudest thing on screen. */
.cms-theme-modern-business .btn-primary, .cms-theme-modern-business .sk-btn-primary { font-weight: 700; }
.cms-theme-modern-business .sk-btn-outline { border: 2px solid var(--sk-ink); }
.cms-theme-modern-business .sk-tone-dark .sk-btn-primary { background: var(--sk-btn); border-color: var(--sk-btn); color: var(--sk-btn-ink) !important; }

/* Emphasis devices */
.cms-theme-modern-business h1 .sk-em, .cms-theme-modern-business .sk-h-hero .sk-em { font-style: italic; font-weight: 700; }
.cms-theme-modern-business h2 .sk-em, .cms-theme-modern-business h3 .sk-em {
	font-style: normal;
	padding-bottom: .12em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12 C 60 4, 120 4, 170 9 S 260 15, 296 6' fill='none' stroke='%23FFC94D' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .42em;
}
.cms-theme-modern-business .cms-text mark { color: var(--sk-ink); padding: .08em .45em; border-radius: 999px; background: var(--sk-pastel-mint); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cms-theme-modern-business .cms-text mark:nth-of-type(3n+2) { background: var(--sk-pastel-lavender); }
.cms-theme-modern-business .cms-text mark:nth-of-type(3n) { background: var(--sk-pastel-cream); }
.cms-theme-modern-business .sk-mark { background: linear-gradient(transparent 38%, #FFE08A 38%, #FFE08A 88%, transparent 88%); padding: 0 .1em; }
.cms-theme-modern-business .sk-dot { color: inherit; }

/* Badges: a soft eyebrow, pills as rounded labels */
.cms-theme-modern-business .sk-badge-eyebrow { font-size: 13px; letter-spacing: .08em; color: var(--sk-muted); font-weight: 700; }
.cms-theme-modern-business .sk-badge-pill { border: 0; background: var(--sk-pastel-mint); color: var(--sk-ink); }
.cms-theme-modern-business .sk-badge-step { background: var(--sk-pastel-cream); color: var(--sk-ink); }

/* Flat pastel cards, generous radius, gentle lift */
.cms-theme-modern-business .sk-col-card { background: var(--sk-soft); }
.cms-theme-modern-business .sk-col-card:hover { transform: translateY(-3px); }
.cms-theme-modern-business .sk-card-outline { background: transparent; border: 2px solid var(--sk-border); }
.cms-theme-modern-business .sk-card-pastel-blue { background: var(--sk-pastel-blue); }
.cms-theme-modern-business .sk-card-pastel-lavender { background: var(--sk-pastel-lavender); }
.cms-theme-modern-business .sk-card-pastel-cream { background: var(--sk-pastel-cream); }
.cms-theme-modern-business .sk-card-pastel-mint { background: var(--sk-pastel-mint); }
.cms-theme-modern-business .sk-card-pastel-pink { background: var(--sk-pastel-pink); }
.cms-theme-modern-business .sk-col-card .cms-image img { border-radius: 16px !important; }
.cms-theme-modern-business .sk-feature-icon { background: var(--sk-surface); border: 0; color: var(--sk-ink); width: 52px; height: 52px; border-radius: 16px; font-size: 1.6rem; }
.cms-theme-modern-business .sk-feature-inline .sk-feature-icon { background: var(--sk-pastel-mint); }
.cms-theme-modern-business .sk-feature-title { font-size: 1.125rem; font-weight: 700; }

/* Stats: the number is the headline; thin line icon above */
.cms-theme-modern-business .sk-stat-value { font-weight: 700; letter-spacing: -0.03em; }
.cms-theme-modern-business .sk-stat-icon { font-size: 2rem; color: var(--sk-ink); }

/* Interest picker chips */
.cms-theme-modern-business .sk-chip { border: 2px solid var(--sk-border); padding: 10px 18px; font-weight: 400; }
.cms-theme-modern-business .sk-chip i { font-size: 1.1em; }
.cms-theme-modern-business .sk-chip.is-active { background: var(--sk-pastel-mint); border-color: var(--sk-ink); color: var(--sk-ink); }

/* Testimonials */
.cms-theme-modern-business .sk-testimonial-card, .cms-theme-modern-business .sk-testimonial-photo { border: 0; }
.cms-theme-modern-business .sk-testimonial-card { background: var(--sk-soft); position: relative; }
.cms-theme-modern-business .sk-testimonial-card .sk-testimonial-quote:before, .cms-theme-modern-business .sk-testimonial-photo + .sk-testimonial-label + .sk-stars + .sk-testimonial-quote:before { content: "\f10d"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free"; font-weight: 900; display: block; font-size: 1.8rem; line-height: 1; color: var(--sk-ink); margin-bottom: .6rem; }
.cms-theme-modern-business .sk-testimonial-photo + .sk-testimonial-label { position: relative; margin: -2.6rem 0 1rem 1rem; box-shadow: 0 2px 8px rgba(20, 48, 62, .1); }
.cms-theme-modern-business .sk-testimonial-photo { margin-bottom: 1.25rem; }
.cms-theme-modern-business .sk-stars { color: #FFB020; }
.cms-theme-modern-business .sk-testimonial-centered .sk-testimonial-quote p { font-weight: 400; }

/* Logo strip on the pale-blue band */
.cms-theme-modern-business .sk-logos-muted img { opacity: .6; }

/* FAQ: hairlines and chevrons */
html .cms-theme-modern-business .cms-accordion .accordion-toggle:after { content: "\f078"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free"; font-weight: 900; font-size: .85rem; }
html .cms-theme-modern-business .cms-accordion .accordion-toggle:not(.collapsed):after { transform: rotate(180deg); }

/* Images: rounded, flat */
.cms-theme-modern-business .cms-image img.box-shadow-2 { box-shadow: none !important; }

/* Header and page title */
.cms-theme-modern-business #header .header-nav.header-nav-links nav > ul > li > a { opacity: 1; font-weight: 400; }
.cms-theme-modern-business .sk-header-link { font-weight: 700; }
.cms-theme-modern-business .page-header { border-bottom: 0 !important; }

/* Footer: deep navy */
.cms-theme-modern-business .sk-footer .sk-btn-accent { background: var(--sk-btn); border-color: var(--sk-btn); color: var(--sk-btn-ink) !important; }
.cms-theme-modern-business .post.post-medium { border: 0 !important; background: var(--sk-soft); }

/* Use-case photos: the label pill sits on the picture's bottom edge */
.cms-theme-modern-business .cms-image + .sk-badge-wrap { position: relative; margin-top: -20px; padding-left: 16px; margin-bottom: 8px; }
.cms-theme-modern-business .cms-image + .sk-badge-wrap .sk-badge-pill { background: var(--sk-surface); box-shadow: 0 4px 14px rgba(20, 48, 62, .12); }
/* Pricing cards: price as the headline */
.cms-theme-modern-business .sk-col-card .sk-stat-value { font-size: 2.5rem; }
.cms-theme-modern-business .sk-col-card ul { padding-left: 1.1rem; }

.cms-theme-modern-business .sk-testimonial-quote p { font-style: normal; }
.cms-theme-modern-business .sk-testimonial-photo + .sk-testimonial-label + .sk-stars { margin-bottom: .25rem; }

/* 3.5.5 (HANDOFF 20.6 ข้อ 3): the title bar as it was, drawn on the core's own (the theme no longer overrides
   partials/page-header): the pale-blue band, "- Title" on the left, the breadcrumb on the right (above it on phones). */
html .cms-theme-modern-business .page-header.page-header-modern { padding: 50px 0; border-bottom: 0 !important; }
.cms-theme-modern-business .page-header-modern > [class^="container"] > .row { margin-top: 1rem; }
.cms-theme-modern-business .page-header-modern .row > [class*="col-"] { text-align: left !important; }
html .cms-theme-modern-business .page-header-modern h1 { font-size: var(--sk-display-size) !important; line-height: 1.45; letter-spacing: -0.03em; }
.cms-theme-modern-business .page-header-modern h1::before { content: "- "; }
.cms-theme-modern-business .page-header-modern .breadcrumb { text-align: left !important; }
@media (min-width: 768px) {
	.cms-theme-modern-business .page-header-modern .row > .order-2 { flex: 0 0 auto; width: 66.66666667%; order: 1 !important; }
	.cms-theme-modern-business .page-header-modern .row > .order-1 { flex: 0 0 auto; width: 33.33333333%; order: 2 !important; }
	.cms-theme-modern-business .page-header-modern .breadcrumb { text-align: right !important; }
}

/* 3.5.5 (HANDOFF 20.6) — the blocks of 3.5.3–3.5.5 in this theme */
body.cms-theme-modern-business { --kx-link: var(--sk-link); --sk-on-primary: var(--primary-inverse); /* the call button of the phone bar (kumo.css asks for --sk-on-primary; for 3.5.6) */ }
html .cms-theme-modern-business a.sk-product-more { display: inline-flex; align-items: center; min-height: 28px; }
/* the product page blocks still write some words in fixed colours (kumo.css; for 3.5.6): they sit on the theme's own
   paper with its own words, so they stay readable whatever the palette (the same as the page with the theme's colours) */
.cms-theme-modern-business :is(.cms-product-title, .cms-product-buy-box, .cms-product-tiers, .cms-product-highlights, .cms-product-specs, .cms-product-reviews, .cms-product-video, .cms-product-files, .cms-product-together, .cms-shipping-info, .cms-sales-contact, .cms-share-links, .cms-product-faq, .cms-product-tabs, .cms-product-featured, .cms-product-flash, .cms-product-tabs-group, .cms-product-ranking, .cms-product-showcase, .cms-product-random, .cms-product-recent, .cms-product-brands, .cms-post-featured, .cms-post-group, .cms-post-list-more, .cms-post-group-list, .cms-post-categories) { --sk-ink: #14303E; --sk-bg: #FFFFFF; --sk-surface: #FFFFFF; --sk-soft: #F3F6FA; --pc-surface: var(--sk-surface); --pc-soft: var(--sk-soft); --sk-text: #2A4552; --sk-muted: #4F6773; --sk-border: #E3E8EE; --sk-link: #14303E; --pc-ink: var(--sk-ink); --pc-text: var(--sk-text); --pc-muted: var(--sk-muted); --pc-border: var(--sk-border); --kx-link: var(--sk-link); color: var(--sk-text); background-color: #FFFFFF; }