:root {
    --prm-navy: #0b1f3a;
    --prm-blue: #1456a0;
    --prm-red: #9e1b32;
    --prm-bg: #f5f7fa;
    --prm-text: #172033;
    --bs-primary: #1456a0;
    --bs-primary-rgb: 20, 86, 160;
}

html, body { font-family: "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif; color: var(--prm-text); background: var(--prm-bg); }
a { color: var(--prm-blue); }
.btn-primary { --bs-btn-bg: var(--prm-blue); --bs-btn-border-color: var(--prm-blue); --bs-btn-hover-bg: #0f477f; --bs-btn-hover-border-color: #0f477f; }
.brand-mark { width: 48px; aspect-ratio: 1; display: inline-grid; place-content: center; text-align: center; border-radius: .65rem; background: var(--prm-navy); color: #fff; line-height: 1; font-size: .8rem; box-shadow: 0 .25rem .75rem rgba(11, 31, 58, .18); }
.brand-mark strong { display: block; color: #c9334d; font-size: 1rem; }
.brand-mark span { display: block; font-weight: 300; }
.brand-mark-sm { width: 42px; }
.hero-section { background: linear-gradient(135deg, var(--prm-navy), #123a69 68%, var(--prm-red)); }
.hero-section .lead { color: #dce8f7; max-width: 42rem; }
.eyebrow, .section-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.section-kicker { color: var(--prm-red); }
.hero-panel { border: 1px solid rgba(255,255,255,.25); border-radius: 1.25rem; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.hero-feature { min-height: 112px; display: grid; place-content: center; border-radius: .9rem; background: rgba(255,255,255,.1); }
.hero-feature strong, .hero-feature small { display: block; }
.hero-feature small { margin-top: .35rem; color: #dce8f7; }
.product-card { border-radius: 1rem; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(11,31,58,.12) !important; }
.product-visual { min-height: 160px; display: grid; place-content: center; font-size: 3rem; color: var(--prm-blue); background: linear-gradient(145deg, #f0f5fb, #dce8f5); }
.trust-section { background: #fff; }
.admin-stat-card { border-radius: 1rem; }
.admin-action { display: flex; min-height: 108px; flex-direction: column; gap: .4rem; padding: 1.15rem; border: 1px solid #dce3ec; border-radius: .85rem; color: var(--prm-text); text-decoration: none; background: #fff; }
.admin-action:hover { border-color: var(--prm-blue); box-shadow: 0 .5rem 1rem rgba(11,31,58,.08); }
.admin-action span { color: #667085; font-size: .9rem; }
.page-heading, .product-detail-hero { background: linear-gradient(180deg, #fff, #eef4fa); }
.detail-icon { display: inline-grid; width: 180px; aspect-ratio: 1; place-content: center; border-radius: 2rem; background: #fff; box-shadow: 0 1rem 2.5rem rgba(11,31,58,.12); font-size: 5rem; }
.pricing-card { border-radius: 1rem; }
.product-description { white-space: pre-line; line-height: 1.8; }
.contact-list { display: grid; gap: 1rem; }
.contact-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e6eaf0; }
.contact-list span { color: #667085; }
.contact-list strong { font-weight: 600; }
.payment-contact-box { padding: 1.25rem; border: 1px solid rgba(255,255,255,.25); border-radius: 1rem; background: rgba(255,255,255,.1); }
.promptpay-qr { width: fit-content; padding: .65rem; border-radius: .8rem; background: #fff; line-height: 0; }
.promptpay-qr img { max-width: 100%; height: auto; }
.step-card { height: 100%; padding: 1.5rem; border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 1.5rem rgba(11,31,58,.08); }
.step-card > span { display: grid; width: 44px; aspect-ratio: 1; place-content: center; border-radius: 50%; color: #fff; background: var(--prm-red); font-weight: 700; }
.step-card h2 { margin-top: 1rem; font-size: 1.15rem; font-weight: 700; }
.step-card p { margin-bottom: 0; color: #667085; }
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #198754; }
.invalid { outline: 1px solid #b42318; }
.validation-message { color: #b42318; }
#blazor-error-ui { color-scheme: light only; background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; display: none; left: 0; padding: .8rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #b42318; color: #fff; padding: 1rem; }
.blazor-error-boundary::after { content: "เกิดข้อผิดพลาด กรุณาลองใหม่"; }

@media (max-width: 575.98px) {
    .hero-section { text-align: center; }
    .hero-section .d-flex { justify-content: center; }
}