/* === cd-series-e4.css - health / PA / CI / life planseries + product pages in E4 (owner 2026-11-06 "Build series E4", mockups/series-compare-2026-11-06.html) ===
   Wired on th/{health,pa,critical-illness,life}/{planseries,product}.aspx: their main content is wrapped in <div class="sp-e4">,
   and this file + cd-plans-e4.css load LAST in the head, after every page style.
   Both page types share the v5 template (.header-strip / .hero-v5 / .content-area > .sidebar-v5 + .main-content), so one
   stylesheet scoped to .sp-e4 (the template's wrapper) restyles all eight pages. The plandetails / details look: grey page,
   white 8px cards, dark text, black table heads instead of orange, ONE green action. The plan cards (planseries hero +
   "เทียบกับบริษัทอื่น") get the plans-page card from cd-plans-e4.css. CSS only - no markup moves. */
html, body { background: #F5F5F5 !important; }
.sp-e4, .sp-e4 h1, .sp-e4 h2, .sp-e4 h3, .sp-e4 h4, .sp-e4 .ui.button { font-family: Lato, Kanit, sans-serif; }

/* hero: white band, the details-page headline; trust row + every unbacked star rating dropped (owner 2026-11-06) */
.sp-e4 .hero-v5 { background: #fff !important; border-bottom: 1px solid #eee; padding: 22px 0 18px !important; }
.sp-e4 .hero-v5 > .container { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; align-items: flex-start !important; }
.sp-e4 .hero-v5 .hero-left { min-height: 0 !important; }
.sp-e4 .hero-v5 h1.hero-headline { font-size: 2.1rem !important; line-height: 1.3 !important; margin: 10px 0 8px !important; color: rgba(0,0,0,.87) !important; font-weight: 700 !important; }
.sp-e4 .hero-v5 h1.hero-headline .accent { color: #F7881F !important; }
.sp-e4 .trust-row-v5, .sp-e4 .insurer-rating, .sp-e4 .expert-rating, .sp-e4 .insurer-card .stars, .sp-e4 .insurer-card .rating { display: none !important; }
.sp-e4 .product-identity .partner-logo { width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 8px !important; padding: 4px !important; border: 1px solid #eee !important; box-shadow: none !important; }
.sp-e4 .product-identity .partner-logo img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.sp-e4 .product-identity .product-name-v5 { font-size: 17px !important; font-weight: 700 !important; color: #1a1d23 !important; }
.sp-e4 .benefits-v5 li { font-size: 14px !important; color: #333 !important; }
.sp-e4 .benefits-v5 .ck { background: #21BA45 !important; }
/* planseries: the context line = the plans page's cdh-sum */
.sp-e4 .context-bar { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; background: none !important; border: 0 !important; padding: 0 !important; margin: 4px 0 0 !important; font-size: 13px !important; color: #555 !important; }
.sp-e4 .context-bar .ctx-item { background: none !important; border: 0 !important; padding: 0 !important; color: #555 !important; }
.sp-e4 .context-bar .ctx-item + .ctx-item::before { content: "·"; color: #ccc; margin-right: 6px; }
.sp-e4 .context-bar .ctx-value, .sp-e4 .context-bar b { color: #1a1d23 !important; font-weight: 700; }
.sp-e4 .context-bar .ctx-change { color: #1A518C !important; font-weight: 500 !important; border: 1px solid #d4d4d5 !important; border-radius: 20px !important; padding: 3px 10px !important; background: #fff !important; text-decoration: none !important; }
/* product: the quote card = a white side card, one green action */
.sp-e4 .quote-card, .sp-e4 .mini-quote, .sp-e4 .mini-card { background: #fff !important; border: 0 !important; border-radius: 8px !important; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 !important; }
.sp-e4 .quote-card h3, .sp-e4 .mini-quote-title { color: #1a1d23 !important; font-weight: 700 !important; }
.sp-e4 .quote-card .field-label { color: #555 !important; font-weight: 600 !important; font-size: 13px !important; }
.sp-e4 .quote-card select, .sp-e4 .quote-card input, .sp-e4 .mini-quote select, .sp-e4 .mini-quote input { border-radius: 8px !important; border: 1px solid #dcdcdc !important; }
.sp-e4 .quote-btn, .sp-e4 .mini-quote-btn, .sp-e4 .mini-btn-buy, .sp-e4 .sticky-bar .ui.button, .sp-e4 .sticky-cta, .sp-e4 .og-btn-buy {
    background: #21BA45 !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; font-weight: 600 !important; box-shadow: none !important;
}
.sp-e4 .quote-btn:hover, .sp-e4 .mini-quote-btn:hover, .sp-e4 .mini-btn-buy:hover { background: #16AB39 !important; }
.sp-e4 .mini-btn-detail { color: #1A518C !important; }
.sp-e4 .mini-price-value { color: #1a1d23 !important; }

.sp-e4 .qc-field { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.sp-e4 .mini-card, .sp-e4 .mini-quote { border-top: 0 !important; }
.sp-e4 .mini-card::before, .sp-e4 .mini-quote::before { display: none !important; }
.sp-e4 .mini-tier { color: #1a1d23 !important; }
.sp-e4 .mini-price { background: none !important; border: 0 !important; padding: 4px 0 !important; }
.sp-e4 .main-content > div[id] > :last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* side column: contents list as a white card, the current item marked dark (not orange) */
.sp-e4 .sidebar-v5 .toc { background: #fff !important; border: 0 !important; border-radius: 8px !important; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 !important; padding: 6px !important; }
.sp-e4 .sidebar-v5 .toc a { color: #555 !important; border-left: 3px solid transparent !important; border-radius: 6px !important; background: none !important; font-size: 14px !important; }
.sp-e4 .sidebar-v5 .toc a:hover { color: #1a1d23 !important; background: #f5f6f8 !important; }
.sp-e4 .sidebar-v5 .toc li.active a, .sp-e4 .sidebar-v5 .toc a.active { color: #1a1d23 !important; font-weight: 700 !important; background: #f5f6f8 !important; border-left-color: #1a1d23 !important; }

/* sections: white cards, the details-page heads */
.sp-e4 .main-content > div[id], .sp-e4 .main-content > .cd-mascot-help {
    background: #fff !important; border: 0 !important; border-radius: 8px !important; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 !important; padding: 18px 20px !important; margin: 0 0 16px !important;
}
.sp-e4 .main-content h2.section-title { font-size: 17px !important; font-weight: 700 !important; color: #1a1d23 !important; margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; }
.sp-e4 .main-content h2.section-title > i.icon { display: none; }
.sp-e4 .main-content .section-subtitle { color: #666 !important; font-size: 13px !important; margin: 0 0 12px !important; }
/* tiles: features, personas, terms, claim steps, legal - the plandetails key tile (grey, quiet) */
.sp-e4 .feature-item, .sp-e4 .persona-card, .sp-e4 .terms-row, .sp-e4 .step-item, .sp-e4 .legal-item, .sp-e4 .verdict-item, .sp-e4 .faq-item, .sp-e4 .case-card, .sp-e4 .insurer-card, .sp-e4 .expert-card, .sp-e4 .pdf-placeholder {
    background: #FAFAFA !important; border: 1px solid #ececec !important; border-radius: 8px !important; box-shadow: none !important;
}
.sp-e4 .feature-item .feature-icon { background: #fff !important; border: 1px solid #ececec !important; box-shadow: none !important; }
.sp-e4 .step-num { background: #1a1d23 !important; color: #fff !important; border-radius: 6px !important; }
.sp-e4 .feature-item strong, .sp-e4 .feature-item b, .sp-e4 .persona-card strong { color: #1a1d23 !important; }
.sp-e4 .terms-label { color: #666 !important; }
.sp-e4 .terms-value { color: #1a1d23 !important; font-weight: 600; }
.sp-e4 .faq-icon { background: #1a1d23 !important; color: #fff !important; border-radius: 6px !important; }
.sp-e4 .faq-question { color: #1a1d23 !important; font-weight: 600 !important; }
.sp-e4 .expert-header, .sp-e4 .case-header { background: none !important; border-bottom: 1px solid #ececec !important; }
.sp-e4 .expert-quote { border-left-color: #1a1d23 !important; background: #fff !important; }
.sp-e4 .case-amount { color: #1a1d23 !important; font-weight: 700 !important; }
.sp-e4 .pdf-actions a { border-radius: 8px !important; color: #1A518C !important; border-color: #d4d4d5 !important; background: #fff !important; }

/* tables: black heads, the cheapest / chosen column a soft grey, numbers dark */
.sp-e4 table.series-table, .sp-e4 table.coverage-table { border: 1px solid #ececec !important; border-radius: 8px !important; overflow: hidden; border-collapse: separate !important; border-spacing: 0 !important; }
.sp-e4 table.series-table thead th, .sp-e4 table.coverage-table thead th, .sp-e4 table.series-table tr:first-child th { background: #1a1d23 !important; color: #fff !important; border-color: #1a1d23 !important; font-weight: 700 !important; }
.sp-e4 table.series-table .col-highlight, .sp-e4 table.series-table th.highlight, .sp-e4 table.series-table td.highlight, .sp-e4 table.coverage-table .highlight { background: #F5F6F8 !important; box-shadow: none !important; border-color: #ececec !important; }
.sp-e4 table.series-table thead th.col-highlight, .sp-e4 table.series-table thead th.highlight, .sp-e4 table.coverage-table thead th.highlight { background: #2b2f36 !important; color: #fff !important; }
.sp-e4 table.series-table td, .sp-e4 table.coverage-table td { color: #1a1d23 !important; border-color: #f0f0f0 !important; }
.sp-e4 table.series-table .group-header td, .sp-e4 table.series-table tr.group-header > * { background: #fff !important; color: #1a1d23 !important; font-weight: 700 !important; border-bottom: 2px solid #1a1d23 !important; }
.sp-e4 table.series-table .premium-row td { background: #fff !important; font-weight: 700 !important; color: #1a1d23 !important; border-top: 2px solid #1a1d23 !important; }
.sp-e4 table.series-table .premium-row .price-value, .sp-e4 table.series-table .premium-row b { color: #1a1d23 !important; }
.sp-e4 .best-value { background: #E8F7EE !important; color: #15803D !important; border: 0 !important; }

/* "เทียบกับบริษัทอื่น" (product) - small cards; the two orange buttons -> basic + a plain link */
.sp-e4 .others-card { background: #fff !important; border: 0 !important; border-radius: 8px !important; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 !important; }
.sp-e4 .others-company { color: #6b7280 !important; }
.sp-e4 .others-plan { color: #1a1d23 !important; font-weight: 700 !important; }
.sp-e4 .others-price { color: #1a1d23 !important; }
.sp-e4 .others-actions .ui.orange.button, .sp-e4 .others-actions .ui.basic.orange.button, .sp-e4 .others-links a {
    background: #fff !important; color: #1A518C !important; box-shadow: 0 0 0 1px #d4d4d5 inset !important; border-radius: 8px !important; font-weight: 600 !important;
}
.sp-e4 .others-compare { color: #1A518C !important; }

/* health / CI / life planseries "others": the same .og-card E4 as details (cd-details-e4.css) */
.sp-e4 .og-card { background: #fff !important; border: 0 !important; border-radius: .28571429rem !important; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 !important; transform: none !important; }
.sp-e4 .og-card .og-logo { width: 48px !important; height: 48px !important; object-fit: contain; border-radius: 6px !important; border: 1px solid #eee !important; }
.sp-e4 .og-card .og-company { font-weight: 700 !important; color: #1a1d23 !important; }
.sp-e4 .og-card .coverage-row { border-bottom: 0 !important; border-top: 1px solid rgba(34,36,38,.1) !important; padding: .42em 0 !important; }
.sp-e4 .og-card .coverage-row .cov-label > i.check.circle.icon { display: none !important; }
.sp-e4 .og-card .coverage-row .cov-amount, .sp-e4 .og-card .coverage-row .cov-amount-main { font-weight: 700 !important; color: #1a1d23 !important; }
.sp-e4 .og-card .price-section { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: .7em 0 0 !important; text-align: left !important; box-shadow: none !important; }
.sp-e4 .og-card .price-section .price-value { color: #1a1d23 !important; font-size: 24px !important; font-weight: 700 !important; }
.sp-e4 .og-card .price-section .price-unit { color: #6b7280 !important; font-size: 13px !important; }
.sp-e4 .og-card .price-section .ui.accordion .title { background: none !important; border: 0 !important; padding: 4px 0 0 !important; justify-content: flex-start !important; color: #1A518C !important; }
.sp-e4 .og-card .price-section .ui.accordion .title .icon:first-child { display: none; }
.sp-e4 .og-card .og-price { background: none !important; border: 0 !important; padding: 0 !important; margin: .7em 0 0 !important; text-align: left !important; }
.sp-e4 .og-card .og-price-value { color: #1a1d23 !important; font-size: 24px !important; font-weight: 700 !important; }
.sp-e4 .og-card .og-price-label .icon { display: none; }
.sp-e4 .og-card .og-btn-detail { color: #1A518C !important; font-weight: 600 !important; }
.sp-e4 .og-card .plan-tag { background: #F2711C !important; color: #fff !important; border: 0 !important; }

/* bottom bar + the back link */
.sp-e4 .sticky-bar { background: #fff !important; border-top: 1px solid #e0e1e2 !important; box-shadow: 0 -2px 8px rgba(0,0,0,.06) !important; }
.sp-e4 .sticky-price, .sp-e4 .sticky-name { color: #1a1d23 !important; }
.sp-e4 .page-footer-v5 { background: transparent !important; }

@media (max-width: 991.98px) {
    .sp-e4 .hero-v5 { padding: 12px 0 12px !important; }
    .sp-e4 .hero-v5 h1.hero-headline { font-size: 1.5rem !important; }
    .sp-e4 .product-identity .partner-logo { width: 48px !important; height: 48px !important; min-width: 48px !important; }
    .sp-e4 .main-content > div[id], .sp-e4 .main-content > .cd-mascot-help { padding: 16px 14px !important; }
}