/* Shared support-page header layout, with distinct editorial notes per topic. */
.khae-na-support { --note-bg: #eff4e8; --note-ink: #244b42; --note-accent: #457869; }
.khae-na-support main .species-hero {
    padding: 40px 0 72px;
    background-image: linear-gradient(100deg, rgba(10,39,43,.96), rgba(10,39,43,.78) 60%, rgba(10,39,43,.5)), var(--khae-hero-image);
    background-size: cover; background-position: center;
}
.khae-na-support .species-hero::before, .khae-na-support .species-hero::after { display: none; }
.khae-na-support .species-hero .species-hero-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,1fr); gap: 48px; padding: 0; align-items: center; }
.khae-na-support .species-hero-content { min-width: 0; }
.khae-na-support .species-hero h1 { color: #fffef7; font-size: clamp(2rem,3.5vw,3.2rem); line-height: 1.5; text-wrap: balance; text-shadow: none; margin: 18px 0; }
.khae-na-support .species-hero-content p { background: none; padding: 0; color: #e2eeea; font-size: 1.02rem; line-height: 1.9; border-radius: 0; }
.khae-na-support .species-hero .species-badge { background: #ffffff12; border: 1px solid #ffffff50; color: #f3eedf; font-size: .85rem; margin-bottom: 8px; }
.khae-na-support .species-hero .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; }
.khae-na-support .species-hero .breadcrumb :is(a, span) { /* color: #edf4ef; */ }
.khae-na-support .species-hero .hero-action { display: flex; flex-wrap: wrap; gap: 12px; }
.khae-na-support .species-hero .btn-primary { background: #f3eedf; color: #193f43; border-color: #f3eedf; }
.khae-na-support .species-hero .btn-primary:hover { background: #dbece4; border-color: #dbece4; }
.khae-na-support .species-hero .btn-outline { background: transparent; color: #fff; border-color: #b9d2c8; }
.khae-na-support .species-hero .btn-outline:hover { background: #ffffff18; }
.khae-na-support .khae-support-note { min-width: 0; padding: 32px; background: var(--note-bg); color: var(--note-ink); border: 1px solid #ffffff70; border-radius: 24px; box-shadow: 0 18px 40px #0002; }
.khae-na-support .khae-note-label { display: block; color: var(--note-accent); font-size: .82rem; font-weight: 700; margin-bottom: 16px; }
.khae-na-support .khae-support-note h2 { color: var(--note-ink); font-size: clamp(1.5rem,2.2vw,2rem); line-height: 1.5; margin: 0 0 22px; text-align: left; }
.khae-na-support .khae-support-note :is(ul,ol) { margin: 0 0 24px; padding-left: 22px; }
.khae-na-support .khae-support-note li { color: var(--note-ink); line-height: 1.85; margin-bottom: 10px; }
.khae-na-support .khae-support-note li::marker { color: var(--note-accent); font-weight: 700; }
.khae-na-support .khae-support-note a { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--note-accent); color: var(--note-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.khae-na-support .species-hero a:focus-visible { outline: 3px solid #b9ded5; outline-offset: 4px; }
.khae-na-support .khae-support-note a:focus-visible { outline-color: var(--note-accent); }
/* Field notebook: sage panel with a strong left rule. */
.khae-na-characteristic .khae-support-note { border-left: 5px solid var(--note-accent); border-radius: 4px 24px 24px 4px; }
/* Flower stages: ivory, soft corners and numbered stages. */
.khae-na-flower { --note-bg: #fff9ec; --note-ink: #514431; --note-accent: #826439; }
.khae-na-flower .khae-support-note { border-radius: 44px 44px 16px 16px; border-top: 5px solid #d9bf83; }
.khae-na-flower .khae-support-note li { padding-bottom: 10px; border-bottom: 1px dashed #d9cdb2; }
/* Names and identification: blue-grey reference rows. */
.khae-na-khae-pa { --note-bg: #eaf2f5; --note-ink: #294653; --note-accent: #47768b; }
.khae-na-khae-pa .khae-support-note { border-radius: 12px; border-top: 4px solid var(--note-accent); }
.khae-na-khae-pa .khae-support-note ul { list-style: none; padding: 0; }
.khae-na-khae-pa .khae-support-note li { padding: 10px 14px; background: #fff9; border-radius: 8px; }
/* Evidence note: warm paper with a double rule. */
.khae-na-properties { --note-bg: #f5eee5; --note-ink: #594632; --note-accent: #83633d; }
.khae-na-properties .khae-support-note { border-top: 6px double #b69a75; border-radius: 8px 8px 24px 24px; }
/* Meaning and belief: muted mauve and a framed label. */
.khae-na-maimongkol { --note-bg: #f4eaf0; --note-ink: #553e51; --note-accent: #875c7c; }
.khae-na-maimongkol .khae-support-note { border-radius: 32px 8px 32px 8px; }
.khae-na-maimongkol .khae-note-label { display: inline-block; border: 1px solid #bca1b5; border-radius: 999px; padding: 6px 12px; }
/* Quote checklist: compact numbered rows on warm sand. */
.khae-na-price { --note-bg: #f6efdd; --note-ink: #51452d; --note-accent: #7c652f; }
.khae-na-price .khae-support-note { border-radius: 18px; border-bottom: 5px solid #b89a56; }
.khae-na-price .khae-support-note li { border-bottom: 1px dashed #cdbc93; padding: 8px 0 12px; }
/* Moving and planting: dark teal operations checklist. */
.khae-na-mailom { --note-bg: #173f43; --note-ink: #edf5ef; --note-accent: #b9ded5; }
.khae-na-mailom .khae-support-note { border-radius: 8px 28px 8px 28px; border-top: 4px solid var(--note-accent); }
.khae-na-mailom .khae-support-note li { padding-left: 6px; }
@media (max-width: 960px) {
    .khae-na-support .species-hero .species-hero-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
}
@media (max-width: 640px) {
    .khae-na-support main .species-hero { padding: 28px 0 44px; }
    .khae-na-support .species-hero h1 { font-size: 2rem; }
    .khae-na-support .khae-support-note { padding: 26px 22px; }
    .khae-na-support .hero-action .btn { width: 100%; justify-content: center; }
}
.khae-na-characteristic { --khae-hero-image: url("../../images/greenfencethai/asset/ต้นแคนา/bg-ลักษณะต้นแคนา.webp"); }
.khae-na-flower { --khae-hero-image: url("../../images/greenfencethai/asset/ต้นแคนา/bg-ดอกแคนา.webp"); }
.khae-na-khae-pa { --khae-hero-image: url("../../images/greenfencethai/asset/ต้นแคนา/bg-แคนาแคป่า.webp"); }
.khae-na-properties { --khae-hero-image: url("../../images/greenfencethai/asset/ต้นแคนา/bg-ประโยชน์และสรรพคุณแคนา.webp"); }
.khae-na-maimongkol { --khae-hero-image: url("../../images/greenfencethai/asset/ต้นแคนา/bg-ต้นแคนาไม้มงคล.webp"); }
.khae-na-price { --khae-hero-image: url("../../images/greenfencethai/asset/ต้นแคนา/bg-ต้นแคนาราคา.webp"); }
.khae-na-mailom { --khae-hero-image: url("../../images/greenfencethai/asset/ต้นแคนา/bg-ต้นแคนาไม้ล้อม.webp"); }