/* Support-page reading surfaces. Loaded after the individual page styles. */
.khae-na-support { --reading-accent: #356c5c; --reading-ink: #233e36; --reading-tint: #eff4ed; --reading-border: #d6e2d8; }
.khae-na-support.khae-na-flower { --reading-accent: #806232; --reading-ink: #4d402c; --reading-tint: #faf5e9; --reading-border: #e6dcc5; }
.khae-na-support.khae-na-khae-pa { --reading-accent: #38697e; --reading-ink: #294653; --reading-tint: #eef4f6; --reading-border: #d2e1e6; }
.khae-na-support.khae-na-properties { --reading-accent: #805f3c; --reading-ink: #51412e; --reading-tint: #f7f1e9; --reading-border: #e4d8c9; }
.khae-na-support.khae-na-maimongkol { --reading-accent: #805974; --reading-ink: #503c4b; --reading-tint: #f7eff4; --reading-border: #e3d3de; }
.khae-na-support.khae-na-price { --reading-accent: #7c652f; --reading-ink: #4d422c; --reading-tint: #f8f3e6; --reading-border: #e4dabf; }
.khae-na-support.khae-na-mailom { --reading-accent: #286564; --reading-ink: #193f43; --reading-tint: #edf4f2; --reading-border: #cfe1dc; }
.khae-na-support main { background: #fffefa; }
.khae-na-support main > section:not(.species-hero) { padding: clamp(44px, 5.5vw, 76px) 0; color: var(--reading-ink); }
.khae-na-support main > section:nth-of-type(even):not(.species-hero) { background: var(--reading-tint); }
.khae-na-support main [id] { scroll-margin-top: 120px; }
.khae-na-support main > section:not(.species-hero) .section-title { max-width: 820px; margin: 0 auto 34px; }
.khae-na-support main > section:not(.species-hero) .section-title > span {
    display: inline-block; margin-bottom: 14px; padding: 6px 14px; border: 1px solid var(--reading-border);
    border-radius: 999px; color: var(--reading-accent); background: var(--reading-tint); font-size: .85rem; font-weight: 700;
}
.khae-na-support main > section:not(.species-hero) h2 { color: var(--reading-ink); font-size: clamp(1.55rem,2.5vw,2.2rem); line-height: 1.55; text-wrap: balance; }
.khae-na-support main > section:not(.species-hero) h3 { color: var(--reading-ink); line-height: 1.65; }
.khae-na-support main > section:not(.species-hero) :is(p,li) { line-height: 1.9; }
.khae-na-support main .answer-box {
    max-width: 960px; margin-inline: auto; padding: clamp(24px,3.5vw,40px); background: #fffefa;
    border: 1px solid var(--reading-border); border-left: 4px solid var(--reading-accent);
    border-radius: 6px 22px 22px 6px; box-shadow: 0 10px 28px #203b3308;
}
.khae-na-support main :is(.feature-grid,.detail-grid,.benefit-grid,.guide-grid,.care-grid,.related-grid) {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px;
}
.khae-na-support main :is(.feature-card,.detail-card,.benefit-grid > article,.guide-grid > article,.care-grid > article,.related-card,.buy-guide > article) {
    min-width: 0; background: #fffefa; border: 1px solid var(--reading-border); border-radius: 20px;
    box-shadow: 0 5px 18px #203b3307;
}
.khae-na-support main :is(.feature-card,.detail-card,.benefit-grid > article,.guide-grid > article,.care-grid > article,.related-card) { padding: clamp(22px,2.5vw,32px); }
.khae-na-support main .detail-card > h3 { padding: 0; margin: 0 0 16px; }
.khae-na-support main .detail-card > p, .khae-na-support main .detail-card > div > p { padding: 0; }
.khae-na-support main :is(.feature-card,.detail-card,.benefit-grid > article,.guide-grid > article,.care-grid > article,.buy-guide > article):hover { transform: none; box-shadow: 0 5px 18px #203b3307; }
.khae-na-support main :is(.feature-card .icon,.buy-guide .number) { background: var(--reading-tint); color: var(--reading-accent); box-shadow: none; }
.khae-na-support main .related-card { border-top: 3px solid var(--reading-accent); transition: transform .2s,box-shadow .2s; }
.khae-na-support main .related-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #203b3312; }
.khae-na-support main :is(.table-wrapper,.table-responsive) { overflow-x: auto; border: 1px solid var(--reading-border); border-radius: 18px; background: #fffefa; }
.khae-na-support main :is(.table-wrapper,.table-responsive) table { width: 100%; margin: 0; border-collapse: collapse; }
.khae-na-support main :is(.table-wrapper,.table-responsive) :is(th,td) { padding: 18px 20px; line-height: 1.8; border-color: var(--reading-border); text-align: left; }
.khae-na-support main :is(.table-wrapper,.table-responsive) th { background: var(--reading-ink); color: #fffefa; }
.khae-na-support main :is(.table-wrapper,.table-responsive) tbody tr:nth-child(even) { background: var(--reading-tint); }
.khae-na-support main .species-note { padding: 18px 22px; border-left: 3px solid var(--reading-accent); border-radius: 8px; background: var(--reading-tint); }
.khae-na-support main :is(.guide-link,.price-link-btn) { 
    color: var(--reading-accent); 
/*     background: var(--reading-tint); 
    border-color: var(--reading-border); 
    border-radius: 10px;  */
}
.khae-na-support main .faq-list { max-width: 960px; margin-inline: auto; }
.khae-na-support main .faq-list details { margin-bottom: 14px; background: #fffefa; border: 1px solid var(--reading-border); border-radius: 16px; box-shadow: none; }
.khae-na-support main .faq-list details[open] { border-color: var(--reading-accent); background: var(--reading-tint); }
.khae-na-support main .faq-list summary { color: var(--reading-ink); line-height: 1.75; }
.khae-na-support main .topic-nav { border: 1px solid var(--reading-border); border-radius: 18px; background: #fffefa; }
.khae-na-support main .topic-nav-list a { color: var(--reading-accent); }
.khae-na-support main .cta-box { padding: clamp(28px,4.5vw,50px); border-radius: 26px; background: var(--reading-ink); box-shadow: 0 16px 36px #203b3314; }
.khae-na-support main .cta-box :is(h2,h3,p,.cta-label) { color: #fffefa; }
.khae-na-support main .cta-box .btn-primary { color: var(--reading-ink); background: #f3eedf; border-color: #f3eedf; }
.khae-na-support main .cta-box .btn-outline { color: #fffefa; background: transparent; border-color: #fff9; }
.khae-na-support main .cta-box :is(.btn-primary,.btn-outline):hover { background: #fffefa; color: var(--reading-ink); }
.khae-na-support main > section:not(.species-hero) :is(a,summary,[tabindex]):focus-visible { outline: 3px solid var(--reading-accent); outline-offset: 4px; }
.khae-na-support main .cta-box a:focus-visible { outline-color: #f3eedf; }
@media (max-width: 640px) {
    .khae-na-support main :is(.feature-grid,.detail-grid,.benefit-grid,.guide-grid,.care-grid,.related-grid) { grid-template-columns: minmax(0,1fr); gap: 18px; }
    .khae-na-support main :is(.table-wrapper,.table-responsive) table { min-width: 580px; }
    .khae-na-support main :is(.table-wrapper,.table-responsive) :is(th,td) { padding: 14px 16px; }
    .khae-na-support main .cta-box .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .khae-na-support main *, .khae-na-support main *::before, .khae-na-support main *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .khae-na-support main .fade-up { opacity: 1; transform: none; }
    .khae-na-support main .related-card:hover { transform: none; }
}