/**
 * โทนสี Preset แบนเนอร์เรท — fallback สำหรับโทนมาตรฐน (ก่อน/หลัง seed DB)
 * ปกติโทนระบบโหลดจาก rate_banner_palette (tokens_json) ผ่าน renderStyleBlock()
 */
/* stylelint-disable declaration-block-no-redundant-longhand-properties */

/* ── 1. ส้มอาทิตย์ตก ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="sunset_flame"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="sunset_flame"] {
    --hl-rate-accent: #f4502f;
    --hl-rate-accent-2: #df4225;
    --hl-rate-accent-hover: #e03e24;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: color-mix(in srgb, #f4502f 8%, #ffffff);
    --hl-rate-accent-12: color-mix(in srgb, #f4502f 12%, transparent);
    --hl-rate-accent-18: color-mix(in srgb, #f4502f 18%, transparent);
    --hl-rate-accent-22: color-mix(in srgb, #f4502f 22%, transparent);
    --hl-rate-accent-35: color-mix(in srgb, #f4502f 35%, transparent);
    --hl-rate-gradient: linear-gradient(269.98deg, #f6402d 0%, #fe6232 100%);
    --hl-rate-btn-bg: #f4502f;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #e03e24;
    --hl-rate-btn-ghost-text: #c2410c;
    --hl-rate-btn-ghost-border: rgba(244, 80, 47, 0.32);
    --hl-rate-shadow: 0 14px 36px rgba(244, 80, 47, 0.18);
    --hl-rate-shadow-strong: 0 22px 50px rgba(244, 80, 47, 0.24);
    --hl-rate-text-title: #0f172a;
    --hl-rate-text-muted: #64748b;
    --hl-rate-surface-border: color-mix(in srgb, #f4502f 14%, #e2e8f0);
}

/* ── 2. น้ำเงินทะเล ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="ocean_blue"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="ocean_blue"] {
    --hl-rate-accent: #2563eb;
    --hl-rate-accent-2: #1d4ed8;
    --hl-rate-accent-hover: #1d4ed8;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #eff6ff;
    --hl-rate-accent-12: rgba(37, 99, 235, 0.12);
    --hl-rate-accent-18: rgba(37, 99, 235, 0.18);
    --hl-rate-accent-22: rgba(37, 99, 235, 0.22);
    --hl-rate-accent-35: rgba(37, 99, 235, 0.35);
    --hl-rate-gradient: linear-gradient(265deg, #1d4ed8 0%, #3b82f6 100%);
    --hl-rate-btn-bg: #2563eb;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #1d4ed8;
    --hl-rate-btn-ghost-text: #1e40af;
    --hl-rate-btn-ghost-border: rgba(37, 99, 235, 0.3);
    --hl-rate-shadow: 0 14px 36px rgba(37, 99, 235, 0.16);
    --hl-rate-shadow-strong: 0 22px 50px rgba(37, 99, 235, 0.22);
    --hl-rate-text-title: #0f172a;
    --hl-rate-text-muted: #64748b;
    --hl-rate-surface-border: rgba(37, 99, 235, 0.22);
}

/* ── 3. มรกตตลาด ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="jade_market"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="jade_market"] {
    --hl-rate-accent: #0d9488;
    --hl-rate-accent-2: #0f766e;
    --hl-rate-accent-hover: #0f766e;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #f0fdfa;
    --hl-rate-accent-12: rgba(13, 148, 136, 0.12);
    --hl-rate-accent-18: rgba(13, 148, 136, 0.18);
    --hl-rate-accent-22: rgba(13, 148, 136, 0.22);
    --hl-rate-accent-35: rgba(13, 148, 136, 0.35);
    --hl-rate-gradient: linear-gradient(265deg, #0f766e 0%, #14b8a6 100%);
    --hl-rate-btn-bg: #0d9488;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #0f766e;
    --hl-rate-btn-ghost-text: #115e59;
    --hl-rate-btn-ghost-border: rgba(13, 148, 136, 0.3);
    --hl-rate-shadow: 0 14px 36px rgba(13, 148, 136, 0.16);
    --hl-rate-shadow-strong: 0 22px 50px rgba(13, 148, 136, 0.22);
    --hl-rate-text-title: #0f172a;
    --hl-rate-text-muted: #64748b;
    --hl-rate-surface-border: rgba(13, 148, 136, 0.22);
}

/* ── 4. ซากุระโรส ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="cherry_rose"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="cherry_rose"] {
    --hl-rate-accent: #e11d48;
    --hl-rate-accent-2: #be123c;
    --hl-rate-accent-hover: #be123c;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #fff1f2;
    --hl-rate-accent-12: rgba(225, 29, 72, 0.12);
    --hl-rate-accent-18: rgba(225, 29, 72, 0.18);
    --hl-rate-accent-22: rgba(225, 29, 72, 0.22);
    --hl-rate-accent-35: rgba(225, 29, 72, 0.35);
    --hl-rate-gradient: linear-gradient(265deg, #be123c 0%, #fb7185 100%);
    --hl-rate-btn-bg: #e11d48;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #be123c;
    --hl-rate-btn-ghost-text: #9f1239;
    --hl-rate-btn-ghost-border: rgba(225, 29, 72, 0.3);
    --hl-rate-shadow: 0 14px 36px rgba(225, 29, 72, 0.16);
    --hl-rate-shadow-strong: 0 22px 50px rgba(225, 29, 72, 0.22);
    --hl-rate-text-title: #881337;
    --hl-rate-text-muted: #9f1239;
    --hl-rate-surface-border: rgba(225, 29, 72, 0.22);
}

/* ── 5. ม่วงราชา ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="royal_violet"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="royal_violet"] {
    --hl-rate-accent: #7c3aed;
    --hl-rate-accent-2: #6d28d9;
    --hl-rate-accent-hover: #6d28d9;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #f5f3ff;
    --hl-rate-accent-12: rgba(124, 58, 237, 0.12);
    --hl-rate-accent-18: rgba(124, 58, 237, 0.18);
    --hl-rate-accent-22: rgba(124, 58, 237, 0.22);
    --hl-rate-accent-35: rgba(124, 58, 237, 0.35);
    --hl-rate-gradient: linear-gradient(265deg, #6d28d9 0%, #a78bfa 100%);
    --hl-rate-btn-bg: #7c3aed;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #6d28d9;
    --hl-rate-btn-ghost-text: #5b21b6;
    --hl-rate-btn-ghost-border: rgba(124, 58, 237, 0.3);
    --hl-rate-shadow: 0 14px 36px rgba(124, 58, 237, 0.16);
    --hl-rate-shadow-strong: 0 22px 50px rgba(124, 58, 237, 0.22);
    --hl-rate-text-title: #4c1d95;
    --hl-rate-text-muted: #6b7280;
    --hl-rate-surface-border: rgba(124, 58, 237, 0.22);
}

/* ── 6. ทองหรูหรา (เหมาะแบบดาร์ก) ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="gold_luxe"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="gold_luxe"] {
    --hl-rate-accent: #fbbf24;
    --hl-rate-accent-2: #f59e0b;
    --hl-rate-accent-hover: #f59e0b;
    --hl-rate-accent-on: #1f2937;
    --hl-rate-accent-8: #fffbeb;
    --hl-rate-accent-12: rgba(251, 191, 36, 0.14);
    --hl-rate-accent-18: rgba(251, 191, 36, 0.22);
    --hl-rate-accent-22: rgba(251, 191, 36, 0.28);
    --hl-rate-accent-35: rgba(251, 191, 36, 0.38);
    --hl-rate-gradient: linear-gradient(265deg, #b45309 0%, #fbbf24 100%);
    --hl-rate-btn-bg: #fbbf24;
    --hl-rate-btn-text: #1f2937;
    --hl-rate-btn-hover: #f59e0b;
    --hl-rate-btn-ghost-text: #fde68a;
    --hl-rate-btn-ghost-border: rgba(253, 230, 138, 0.38);
    --hl-rate-shadow: 0 14px 36px rgba(251, 191, 36, 0.2);
    --hl-rate-shadow-strong: 0 22px 50px rgba(251, 191, 36, 0.28);
    --hl-rate-text-title: #ffffff;
    --hl-rate-text-muted: rgba(248, 250, 252, 0.72);
    --hl-rate-surface-border: rgba(253, 230, 138, 0.22);
}

/* ── 7. แดงมงคล ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="china_red"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="china_red"] {
    --hl-rate-accent: #dc2626;
    --hl-rate-accent-2: #b91c1c;
    --hl-rate-accent-hover: #b91c1c;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #fef2f2;
    --hl-rate-accent-12: rgba(220, 38, 38, 0.12);
    --hl-rate-accent-18: rgba(220, 38, 38, 0.18);
    --hl-rate-accent-22: rgba(220, 38, 38, 0.22);
    --hl-rate-accent-35: rgba(220, 38, 38, 0.35);
    --hl-rate-gradient: linear-gradient(265deg, #b91c1c 0%, #ef4444 100%);
    --hl-rate-btn-bg: #dc2626;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #b91c1c;
    --hl-rate-btn-ghost-text: #991b1b;
    --hl-rate-btn-ghost-border: rgba(220, 38, 38, 0.3);
    --hl-rate-shadow: 0 14px 36px rgba(220, 38, 38, 0.16);
    --hl-rate-shadow-strong: 0 22px 50px rgba(220, 38, 38, 0.22);
    --hl-rate-text-title: #7f1d1d;
    --hl-rate-text-muted: #64748b;
    --hl-rate-surface-border: rgba(220, 38, 38, 0.22);
}

/* ── 8. เขียวป่า ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="forest_green"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="forest_green"] {
    --hl-rate-accent: #16a34a;
    --hl-rate-accent-2: #15803d;
    --hl-rate-accent-hover: #15803d;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #f0fdf4;
    --hl-rate-accent-12: rgba(22, 163, 74, 0.12);
    --hl-rate-accent-18: rgba(22, 163, 74, 0.18);
    --hl-rate-accent-22: rgba(22, 163, 74, 0.22);
    --hl-rate-accent-35: rgba(22, 163, 74, 0.35);
    --hl-rate-gradient: linear-gradient(265deg, #15803d 0%, #4ade80 100%);
    --hl-rate-btn-bg: #16a34a;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #15803d;
    --hl-rate-btn-ghost-text: #166534;
    --hl-rate-btn-ghost-border: rgba(22, 163, 74, 0.3);
    --hl-rate-shadow: 0 14px 36px rgba(22, 163, 74, 0.16);
    --hl-rate-shadow-strong: 0 22px 50px rgba(22, 163, 74, 0.22);
    --hl-rate-text-title: #14532d;
    --hl-rate-text-muted: #64748b;
    --hl-rate-surface-border: rgba(22, 163, 74, 0.22);
}

/* ── 9. เทามืออาชีพ ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="slate_pro"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="slate_pro"] {
    --hl-rate-accent: #475569;
    --hl-rate-accent-2: #334155;
    --hl-rate-accent-hover: #334155;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #f8fafc;
    --hl-rate-accent-12: rgba(71, 85, 105, 0.12);
    --hl-rate-accent-18: rgba(71, 85, 105, 0.18);
    --hl-rate-accent-22: rgba(71, 85, 105, 0.22);
    --hl-rate-accent-35: rgba(71, 85, 105, 0.35);
    --hl-rate-gradient: linear-gradient(265deg, #334155 0%, #64748b 100%);
    --hl-rate-btn-bg: #475569;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #334155;
    --hl-rate-btn-ghost-text: #334155;
    --hl-rate-btn-ghost-border: rgba(71, 85, 105, 0.32);
    --hl-rate-shadow: 0 14px 36px rgba(71, 85, 105, 0.14);
    --hl-rate-shadow-strong: 0 22px 50px rgba(71, 85, 105, 0.2);
    --hl-rate-text-title: #0f172a;
    --hl-rate-text-muted: #64748b;
    --hl-rate-surface-border: rgba(71, 85, 105, 0.22);
}

/* ── 10. มืดนีออนฟ้า ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="midnight_cyan"],
.home .hl-module--rate-banner[data-hl-color-mode="preset"][data-hl-color-palette="midnight_cyan"] {
    --hl-rate-accent: #22d3ee;
    --hl-rate-accent-2: #06b6d4;
    --hl-rate-accent-hover: #0891b2;
    --hl-rate-accent-on: #0f172a;
    --hl-rate-accent-8: #ecfeff;
    --hl-rate-accent-12: rgba(34, 211, 238, 0.14);
    --hl-rate-accent-18: rgba(34, 211, 238, 0.22);
    --hl-rate-accent-22: rgba(34, 211, 238, 0.28);
    --hl-rate-accent-35: rgba(34, 211, 238, 0.38);
    --hl-rate-gradient: linear-gradient(265deg, #0e7490 0%, #22d3ee 100%);
    --hl-rate-btn-bg: #06b6d4;
    --hl-rate-btn-text: #0f172a;
    --hl-rate-btn-hover: #0891b2;
    --hl-rate-btn-ghost-text: #67e8f9;
    --hl-rate-btn-ghost-border: rgba(34, 211, 238, 0.35);
    --hl-rate-shadow: 0 14px 36px rgba(6, 182, 212, 0.2);
    --hl-rate-shadow-strong: 0 22px 50px rgba(6, 182, 212, 0.28);
    --hl-rate-text-title: #ffffff;
    --hl-rate-text-muted: rgba(248, 250, 252, 0.72);
    --hl-rate-surface-border: rgba(34, 211, 238, 0.22);
}

/* ── ผูกโทนข้อความ/ขอบบนแบบพื้นขาว ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__ocean-title,
.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__triple-title,
.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__strip-title,
.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__ocean-headline,
.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__triple-foot-title {
    color: var(--hl-rate-text-title, #0f172a);
}

.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__ocean-date,
.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__triple-date,
.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__strip-date,
.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__triple-copy,
.home .hl-module--rate-banner[data-hl-color-mode="palette"] .hl-rate-banner__strip-copy {
    color: var(--hl-rate-text-muted, #64748b);
}

.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="ocean_card"] .hl-rate-banner__surface--ocean,
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="triple_rates"] .hl-rate-banner__surface--triple,
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="compact_strip"] .hl-rate-banner__surface--strip {
    border-color: var(--hl-rate-surface-border, color-mix(in srgb, var(--hl-rate-accent) 14%, #e2e8f0));
}

/* ── แบบส้มคลาสสิก: gradient ตาม preset ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="classic_orange"] .hl-rate-banner__surface--classic {
    background: var(--hl-rate-gradient);
    border: none;
    box-shadow: var(--hl-rate-shadow-strong);
}

/* ── แบบสเปลิต: พื้นหลักอ่อนตาม accent ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="ocean_card"] .hl-rate-banner__ocean-main {
    background: linear-gradient(165deg, var(--hl-rate-accent-8) 0%, #ffffff 72%);
}

.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="compact_strip"] .hl-rate-banner__strip-rate-panel {
    background: linear-gradient(135deg, var(--hl-rate-accent-8) 0%, #ffffff 100%);
}

/* ── แบบดาร์ก: พื้นตามโทน ── */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="gold_luxe"][data-hl-variant="dark_luxe"] .hl-rate-banner__surface--dark {
    background: radial-gradient(120% 120% at 100% 0%, #3d2f14 0%, #111827 42%, #0b1220 100%);
    border-color: var(--hl-rate-surface-border);
}

.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="midnight_cyan"][data-hl-variant="dark_luxe"] .hl-rate-banner__surface--dark {
    background: radial-gradient(90% 80% at 100% 0%, rgba(34, 211, 238, 0.16), transparent 55%), linear-gradient(155deg, #0f2830 0%, #0f172a 48%, #0b1220 100%);
    border-color: var(--hl-rate-surface-border);
}

.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-color-palette="royal_violet"][data-hl-variant="dark_luxe"] .hl-rate-banner__surface--dark {
    background: radial-gradient(90% 80% at 100% 0%, rgba(124, 58, 237, 0.2), transparent 55%), linear-gradient(155deg, #1e1535 0%, #0f172a 48%, #0b1220 100%);
    border-color: var(--hl-rate-surface-border);
}

.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="dark_luxe"] .hl-rate-banner__dark-title,
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="dark_luxe"] .hl-rate-banner__dark-headline {
    color: var(--hl-rate-text-title, #ffffff);
}

.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="dark_luxe"] .hl-rate-banner__dark-date,
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="dark_luxe"] .hl-rate-banner__dark-copy {
    color: var(--hl-rate-text-muted, rgba(248, 250, 252, 0.72));
}

/* Ghost ปุ่มบนพื้นขาว — ทุก preset */
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="ocean_card"] .hl-rate-banner__action.hl-button--ghost,
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="triple_rates"] .hl-rate-banner__action.hl-button--ghost {
    background: #ffffff;
    color: var(--hl-rate-btn-ghost-text);
    border-color: var(--hl-rate-btn-ghost-border);
}

.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="ocean_card"] .hl-rate-banner__action.hl-button--ghost:hover,
.home .hl-module--rate-banner[data-hl-color-mode="palette"][data-hl-variant="triple_rates"] .hl-rate-banner__action.hl-button--ghost:hover {
    background: var(--hl-rate-accent-8);
    color: var(--hl-rate-btn-ghost-text);
    border-color: color-mix(in srgb, var(--hl-rate-accent) 36%, #cbd5e1);
}

/* ── โทนเทศกาล (แสดงเฉพาะช่วง MM-DD ตาม RateBannerPaletteService) ── */

.home .hl-module--rate-banner[data-hl-color-palette="festive_cny"] {
    --hl-rate-accent: #dc2626;
    --hl-rate-accent-2: #b91c1c;
    --hl-rate-accent-hover: #b91c1c;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #fef2f2;
    --hl-rate-accent-12: rgba(220, 38, 38, 0.12);
    --hl-rate-accent-18: rgba(220, 38, 38, 0.18);
    --hl-rate-accent-22: rgba(220, 38, 38, 0.22);
    --hl-rate-accent-35: rgba(220, 38, 38, 0.35);
    --hl-rate-gradient: linear-gradient(265deg, #b91c1c 0%, #ef4444 48%, #fbbf24 100%);
    --hl-rate-btn-bg: #dc2626;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #b91c1c;
    --hl-rate-btn-ghost-text: #991b1b;
    --hl-rate-btn-ghost-border: rgba(220, 38, 38, 0.32);
    --hl-rate-text-title: #7f1d1d;
    --hl-rate-text-muted: #9f1239;
    --hl-rate-surface-border: rgba(220, 38, 38, 0.24);
    --hl-rate-shadow: 0 14px 36px rgba(220, 38, 38, 0.18);
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_double11"] {
    --hl-rate-accent: #ea580c;
    --hl-rate-accent-2: #c2410c;
    --hl-rate-accent-hover: #c2410c;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #fff7ed;
    --hl-rate-accent-12: rgba(234, 88, 12, 0.14);
    --hl-rate-accent-18: rgba(234, 88, 12, 0.2);
    --hl-rate-accent-22: rgba(234, 88, 12, 0.26);
    --hl-rate-accent-35: rgba(234, 88, 12, 0.36);
    --hl-rate-gradient: linear-gradient(265deg, #1e1b4b 0%, #ea580c 55%, #f97316 100%);
    --hl-rate-btn-bg: #ea580c;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #c2410c;
    --hl-rate-btn-ghost-text: #9a3412;
    --hl-rate-btn-ghost-border: rgba(234, 88, 12, 0.32);
    --hl-rate-text-title: #1e1b4b;
    --hl-rate-text-muted: #64748b;
    --hl-rate-surface-border: rgba(234, 88, 12, 0.24);
    --hl-rate-shadow: 0 14px 36px rgba(234, 88, 12, 0.2);
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_songkran"] {
    --hl-rate-accent: #0ea5e9;
    --hl-rate-accent-2: #0284c7;
    --hl-rate-accent-hover: #0284c7;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #e0f2fe;
    --hl-rate-accent-12: rgba(14, 165, 233, 0.12);
    --hl-rate-accent-18: rgba(14, 165, 233, 0.18);
    --hl-rate-accent-22: rgba(14, 165, 233, 0.22);
    --hl-rate-accent-35: rgba(14, 165, 233, 0.35);
    --hl-rate-gradient: linear-gradient(265deg, #0284c7 0%, #38bdf8 45%, #fde047 100%);
    --hl-rate-btn-bg: #0ea5e9;
    --hl-rate-btn-text: #ffffff;
    --hl-rate-btn-hover: #0284c7;
    --hl-rate-btn-ghost-text: #0369a1;
    --hl-rate-btn-ghost-border: rgba(14, 165, 233, 0.32);
    --hl-rate-text-title: #0c4a6e;
    --hl-rate-text-muted: #64748b;
    --hl-rate-surface-border: rgba(14, 165, 233, 0.24);
    --hl-rate-shadow: 0 14px 36px rgba(14, 165, 233, 0.18);
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_valentine"] {
    --hl-rate-accent: #e11d48;
    --hl-rate-accent-2: #be123c;
    --hl-rate-accent-hover: #be123c;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #fff1f2;
    --hl-rate-accent-12: rgba(225, 29, 72, 0.12);
    --hl-rate-accent-18: rgba(225, 29, 72, 0.18);
    --hl-rate-accent-22: rgba(225, 29, 72, 0.22);
    --hl-rate-gradient: linear-gradient(265deg, #be123c 0%, #fb7185 100%);
    --hl-rate-btn-bg: #e11d48;
    --hl-rate-btn-text: #ffffff;
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_mothers"] {
    --hl-rate-accent: #2563eb;
    --hl-rate-accent-2: #4f46e5;
    --hl-rate-accent-hover: #1d4ed8;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #eff6ff;
    --hl-rate-accent-12: rgba(37, 99, 235, 0.12);
    --hl-rate-accent-18: rgba(37, 99, 235, 0.18);
    --hl-rate-accent-22: rgba(37, 99, 235, 0.22);
    --hl-rate-gradient: linear-gradient(265deg, #2563eb 0%, #a78bfa 100%);
    --hl-rate-btn-bg: #2563eb;
    --hl-rate-btn-text: #ffffff;
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_fathers"] {
    --hl-rate-accent: #1d4ed8;
    --hl-rate-accent-2: #1e3a8a;
    --hl-rate-accent-hover: #1e3a8a;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #eff6ff;
    --hl-rate-accent-12: rgba(29, 78, 216, 0.12);
    --hl-rate-accent-18: rgba(29, 78, 216, 0.18);
    --hl-rate-accent-22: rgba(29, 78, 216, 0.22);
    --hl-rate-gradient: linear-gradient(265deg, #1e3a8a 0%, #f59e0b 100%);
    --hl-rate-btn-bg: #1d4ed8;
    --hl-rate-btn-text: #ffffff;
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_loy_krathong"] {
    --hl-rate-accent: #7c3aed;
    --hl-rate-accent-2: #6d28d9;
    --hl-rate-accent-hover: #5b21b6;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #f5f3ff;
    --hl-rate-accent-12: rgba(124, 58, 237, 0.12);
    --hl-rate-accent-18: rgba(124, 58, 237, 0.18);
    --hl-rate-accent-22: rgba(124, 58, 237, 0.22);
    --hl-rate-gradient: linear-gradient(265deg, #4c1d95 0%, #f59e0b 100%);
    --hl-rate-btn-bg: #7c3aed;
    --hl-rate-btn-text: #ffffff;
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_halloween"] {
    --hl-rate-accent: #ea580c;
    --hl-rate-accent-2: #c2410c;
    --hl-rate-accent-hover: #c2410c;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #fff7ed;
    --hl-rate-accent-12: rgba(234, 88, 12, 0.14);
    --hl-rate-accent-18: rgba(234, 88, 12, 0.2);
    --hl-rate-accent-22: rgba(234, 88, 12, 0.26);
    --hl-rate-gradient: linear-gradient(265deg, #111827 0%, #ea580c 100%);
    --hl-rate-btn-bg: #ea580c;
    --hl-rate-btn-text: #ffffff;
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_christmas"] {
    --hl-rate-accent: #dc2626;
    --hl-rate-accent-2: #16a34a;
    --hl-rate-accent-hover: #b91c1c;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #f0fdf4;
    --hl-rate-accent-12: rgba(220, 38, 38, 0.12);
    --hl-rate-accent-18: rgba(22, 163, 74, 0.18);
    --hl-rate-accent-22: rgba(22, 163, 74, 0.22);
    --hl-rate-gradient: linear-gradient(265deg, #b91c1c 0%, #16a34a 100%);
    --hl-rate-btn-bg: #dc2626;
    --hl-rate-btn-text: #ffffff;
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_mid_autumn"] {
    --hl-rate-accent: #d97706;
    --hl-rate-accent-2: #92400e;
    --hl-rate-accent-hover: #92400e;
    --hl-rate-accent-on: #ffffff;
    --hl-rate-accent-8: #fffbeb;
    --hl-rate-accent-12: rgba(217, 119, 6, 0.12);
    --hl-rate-accent-18: rgba(217, 119, 6, 0.18);
    --hl-rate-accent-22: rgba(217, 119, 6, 0.22);
    --hl-rate-gradient: linear-gradient(265deg, #92400e 0%, #fde68a 100%);
    --hl-rate-btn-bg: #d97706;
    --hl-rate-btn-text: #ffffff;
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_cny"][data-hl-variant="classic_orange"] .hl-rate-banner__surface--classic,
.home .hl-module--rate-banner[data-hl-color-palette="festive_double11"][data-hl-variant="classic_orange"] .hl-rate-banner__surface--classic,
.home .hl-module--rate-banner[data-hl-color-palette="festive_songkran"][data-hl-variant="classic_orange"] .hl-rate-banner__surface--classic {
    background: var(--hl-rate-gradient);
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_cny"][data-hl-variant="dark_luxe"] .hl-rate-banner__surface--dark {
    background: radial-gradient(100% 90% at 100% 0%, rgba(251, 191, 36, 0.2), transparent 55%), linear-gradient(155deg, #450a0a 0%, #1f2937 48%, #0b1220 100%);
    border-color: rgba(251, 191, 36, 0.24);
}

.home .hl-module--rate-banner[data-hl-color-palette="festive_double11"][data-hl-variant="dark_luxe"] .hl-rate-banner__surface--dark {
    background: radial-gradient(90% 80% at 100% 0%, rgba(234, 88, 12, 0.22), transparent 55%), linear-gradient(155deg, #1e1b4b 0%, #0f172a 48%, #0b1220 100%);
    border-color: rgba(234, 88, 12, 0.24);
}