/* ธีม "ขลัง": พื้นรักดำ ลายรดน้ำทองคำเปลว ชาดแดง ฟอนต์ไทยมีหัวแบบตำรา — โหลดหลังไฟล์อื่นเพื่อทับค่า */
:root {
  --bg: #0b0705;
  --surface: #150d08;
  --surface-2: #1d130b;
  --surface-3: #2a1b10;
  --line: rgba(217, 169, 76, 0.16);
  --line-strong: rgba(217, 169, 76, 0.34);
  --text: #f3e7cc;
  --text-2: #dccaa5;
  --muted: #a8936e;
  --gold: #d9a94c;
  --gold-2: #f1d48a;
  --gold-soft: rgba(217, 169, 76, 0.12);
  --violet: #8e1b14;
  --vermilion: #9c1f17;
  --good: #7fc48f;
  --warn: #e0a35e;
  --bad: #e0705e;
  --r-lg: 10px;
  --r-md: 8px;
  --r-sm: 6px;
  --serif: 'Taviraj', 'Noto Serif Thai', serif;
  --sans: 'Sarabun', 'Leelawadee UI', 'Thonburi', sans-serif;
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' stroke='%23d9a94c' stroke-width='1.2'%3E%3Cpath d='M1 21V8C1 4 4 1 8 1h13'/%3E%3Cpath d='M5 14c0-5 3-9 9-9' opacity='.6'/%3E%3C/g%3E%3Ccircle cx='5' cy='5' r='1.6' fill='%23d9a94c'/%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='rotate(90 11 11)'%3E%3Cg fill='none' stroke='%23d9a94c' stroke-width='1.2'%3E%3Cpath d='M1 21V8C1 4 4 1 8 1h13'/%3E%3Cpath d='M5 14c0-5 3-9 9-9' opacity='.6'/%3E%3C/g%3E%3Ccircle cx='5' cy='5' r='1.6' fill='%23d9a94c'/%3E%3C/g%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='rotate(180 11 11)'%3E%3Cg fill='none' stroke='%23d9a94c' stroke-width='1.2'%3E%3Cpath d='M1 21V8C1 4 4 1 8 1h13'/%3E%3Cpath d='M5 14c0-5 3-9 9-9' opacity='.6'/%3E%3C/g%3E%3Ccircle cx='5' cy='5' r='1.6' fill='%23d9a94c'/%3E%3C/g%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='rotate(270 11 11)'%3E%3Cg fill='none' stroke='%23d9a94c' stroke-width='1.2'%3E%3Cpath d='M1 21V8C1 4 4 1 8 1h13'/%3E%3Cpath d='M5 14c0-5 3-9 9-9' opacity='.6'/%3E%3C/g%3E%3Ccircle cx='5' cy='5' r='1.6' fill='%23d9a94c'/%3E%3C/g%3E%3C/svg%3E");
  --pjy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='-7 -7 14 14'%3E%3Cpath d='M0-6.5c2.6 2.6 2.6 4 0 6.5c-2.6-2.5-2.6-3.9 0-6.5zM0 6.5c2.6-2.6 2.6-4 0-6.5c-2.6 2.5-2.6 3.9 0 6.5zM-6.5 0c2.6-2.6 4-2.6 6.5 0c-2.5 2.6-3.9 2.6-6.5 0zM6.5 0c-2.6-2.6-4-2.6-6.5 0c2.5 2.6 3.9 2.6 6.5 0z' fill='%23d9a94c'/%3E%3Ccircle r='1.2' fill='%230b0705'/%3E%3C/svg%3E");
  --krajang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M7 .5c2.6 2.6 3.4 5.4 2.6 8.5H4.4C3.6 5.9 4.4 3.1 7 .5z' fill='%23d9a94c' fill-opacity='.6'/%3E%3C/svg%3E");
}
:root[data-size="l"] { font-size: 20px; }
:root[data-size="xl"] { font-size: 23px; }

body {
  font-family: var(--sans);
  background-color: var(--bg);
  background-image:
    radial-gradient(90% 50% at 50% -8%, rgba(156, 31, 23, 0.28), transparent 70%),
    radial-gradient(60% 40% at 50% 0%, rgba(217, 169, 76, 0.10), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23d9a94c' stroke-opacity='.07'%3E%3Cpath d='M28 15c4.5 4.5 4.5 8.5 0 13c-4.5-4.5-4.5-8.5 0-13zM28 41c4.5-4.5 4.5-8.5 0-13c-4.5 4.5-4.5 8.5 0 13zM15 28c4.5-4.5 8.5-4.5 13 0c-4.5 4.5-8.5 4.5-13 0zM41 28c-4.5-4.5-8.5-4.5-13 0c4.5 4.5 8.5 4.5 13 0z'/%3E%3C/g%3E%3Cpath d='M0 0L56 56M56 0L0 56' stroke='%23d9a94c' stroke-opacity='.025'/%3E%3C/svg%3E");
  background-attachment: fixed;
  letter-spacing: 0;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
h1 { color: var(--gold-2); }
h2 { color: var(--text); }
.overline { letter-spacing: .04em; color: var(--muted); }

/* แผงไม้รักปิดทอง: ขอบทองคู่ + ลายมุม */
.surface, .list-group, .tile, .paywall, .why-box, .kpi, .panel, .cal-teaser, .trial-card, .plan, .faq details, .related a, .cards3 a, .cards3 div, .fact {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px rgba(217, 169, 76, 0.14), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.surface, .panel, .paywall, .trial-card {
  background:
    var(--corner-tl) top 7px left 7px / 18px no-repeat,
    var(--corner-tr) top 7px right 7px / 18px no-repeat,
    var(--corner-br) bottom 7px right 7px / 18px no-repeat,
    var(--corner-bl) bottom 7px left 7px / 18px no-repeat,
    linear-gradient(180deg, #180f09, #120a06);
}
.tile, .kpi, .list-group, .why-box, .plan { background: linear-gradient(180deg, #170e08, #110905); }

/* หัวข้อหมวด: ลายประจำยามนำหน้า */
.section-title h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 1.08rem; color: var(--gold-2); }
.section-title h2::before { content: ''; width: 14px; height: 14px; background: var(--pjy) center / contain no-repeat; flex: none; }

/* แถบลายกระจัง */
.krajang { height: 9px; background: var(--krajang) repeat-x center / 14px 9px; opacity: .8; margin: 14px 0; }

/* ปุ่มทองคำเปลว */
.btn {
  border-radius: var(--r-md);
  color: #2a1606;
  background: linear-gradient(180deg, #f7e2a4 0%, #e1b45a 48%, #c48f37 52%, #e2b860 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(90, 50, 10, 0.35), 0 6px 18px rgba(0, 0, 0, 0.35);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
}
.btn.ghost { background: transparent; color: var(--gold-2); border: 1px solid var(--line-strong); box-shadow: none; }
.btn.subtle { background: var(--surface-2); color: var(--gold-2); box-shadow: none; }

/* ป้าย: ฟรี = กรอบทอง, พรีเมียม = ตราชาดแดง */
.tag { border-radius: 4px; letter-spacing: .02em; }
.tag.free { color: var(--gold-2); background: transparent; border: 1px solid rgba(217, 169, 76, 0.5); }
.tag.pro { color: #f6dc97; background: linear-gradient(180deg, #a8261c, #7d150f); border: 1px solid #c79a3e; }
.tag.part { color: var(--text-2); background: transparent; border: 1px dashed rgba(217, 169, 76, 0.45); }
.unlock-chip, .mini-lock { border-radius: 6px; }
.unlock-chip { color: #f6dc97; background: linear-gradient(180deg, #a8261c, #7d150f); border: 1px solid #c79a3e; }
.lvl { border-radius: 4px; }
.badge-pro { border-radius: 6px; border: 1px solid rgba(217, 169, 76, 0.45); }

/* ฮีโร่ดวงวันนี้: พื้นรักแดงเข้ม */
.hero {
  border-radius: var(--r-lg);
  background:
    var(--corner-tl) top 8px left 8px / 20px no-repeat,
    var(--corner-tr) top 8px right 8px / 20px no-repeat,
    var(--corner-br) bottom 8px right 8px / 20px no-repeat,
    var(--corner-bl) bottom 8px left 8px / 20px no-repeat,
    radial-gradient(120% 80% at 50% 0%, #3a120c 0%, #1c0c07 55%, #120906 100%);
  border: 1px solid rgba(217, 169, 76, 0.55);
  box-shadow: inset 0 0 0 4px #0b0705, inset 0 0 0 5px rgba(217, 169, 76, 0.3), 0 14px 40px rgba(0, 0, 0, 0.45);
}
.hero::after { display: none; }
.ring .lbl b { font-family: var(--serif); }
.highlight { border-radius: var(--r-md); background: rgba(217, 169, 76, 0.07); }
.meter i { border-radius: 1px; }

/* หิ้งพระ: ภาพเทพธิดาด้านบนหน้าแรก */
.shrine { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; }
.shrine img { width: 92px; height: auto; flex: none; filter: drop-shadow(0 6px 18px rgba(217, 169, 76, 0.25)); }
.shrine .s-txt { flex: 1; min-width: 0; }
.shrine h1 { font-size: 1.5rem; margin: 2px 0 4px; }
.shrine .blessing { font-family: var(--serif); color: var(--text-2); font-size: .92rem; line-height: 1.5; }
.shrine .blessing::before { content: '“'; color: var(--gold); }
.shrine .blessing::after { content: '”'; color: var(--gold); }
.devi-lg { display: block; width: min(64vw, 240px); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 30px rgba(217, 169, 76, 0.28)); }
.devi-md { display: block; width: 130px; height: auto; margin: 0 auto; filter: drop-shadow(0 8px 24px rgba(217, 169, 76, 0.25)); }

/* แถบเมนูล่าง */
.nav { background: rgba(11, 7, 5, 0.94); border-top: 1px solid rgba(217, 169, 76, 0.4); box-shadow: 0 -1px 0 #0b0705, 0 -2px 0 rgba(217, 169, 76, 0.15); }
.nav::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 9px; background: var(--krajang) repeat-x bottom / 14px 9px; opacity: .45; pointer-events: none; }
.nav a { font-family: var(--sans); }

/* ตัวเลือกและชิป */
.seg, .chip, .choice button, input, select { border-radius: var(--r-md); }
.chip.on { background: var(--gold); color: #2a1606; border-color: var(--gold); }
.seg .on { background: var(--surface-3); color: var(--gold-2); }
.icon-btn { border-radius: var(--r-md); }
.list-item .lead { border-radius: var(--r-md); background: rgba(217, 169, 76, 0.08); border: 1px solid var(--line); }
.prayer { border-left: 3px solid var(--gold); background: rgba(217, 169, 76, 0.06); }
.trial-bar { border-radius: var(--r-md); }
.sheet-panel { background: linear-gradient(180deg, #1c110a, #120a06); border-top: 2px solid var(--gold); }
.toast { background: var(--gold-2); color: #2a1606; border-radius: var(--r-md); }
.cal-day { border-radius: 6px; }
.week .wd { border-radius: 6px; }
.src { border-radius: 6px; }

/* หน้าเว็บสาธารณะ */
.site-header { background: rgba(11, 7, 5, 0.92); border-bottom: 1px solid rgba(217, 169, 76, 0.35); }
.logo { font-family: var(--serif); color: var(--gold-2); }
.btn-sm { border-radius: var(--r-md); background: linear-gradient(180deg, #f7e2a4, #d6a54c); color: #2a1606; }
.topnav a { border-radius: var(--r-md); }
.topnav a.on { background: var(--gold); color: #2a1606; border-color: var(--gold); }
.answer { border-radius: var(--r-md); border-left: 3px solid var(--gold); background: rgba(156, 31, 23, 0.12); }
.cta-band { border-radius: var(--r-lg); background: radial-gradient(120% 120% at 50% 0%, #3a120c, #150b07 70%); border: 1px solid rgba(217, 169, 76, 0.5); }
.hero-site { display: grid; grid-template-columns: 1fr; gap: 10px; text-align: center; }
.hero-site .devi-lg { margin-bottom: 4px; }
.page-h1, .hero-site h1 { color: var(--gold-2); }
.site-footer { border-top: 1px solid rgba(217, 169, 76, 0.3); }

/* ป้าย VIP ช่วงทดลองฟรี: บอกว่าส่วนไหนเป็นของพรีเมียม (ตราชาดแดงขอบทองแบบเดียวกับป้ายพรีเมียม) */
.vip-pill { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; margin: 0 6px 0 0; border-radius: 4px; vertical-align: 2px;
  font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .06em; line-height: 1.7; white-space: nowrap;
  color: #f6dc97; background: linear-gradient(180deg, #a8261c, #7d150f); border: 1px solid #c79a3e; }
.vip-pill .ic { width: 11px; height: 11px; }
.tag.vip { color: #f6dc97; background: linear-gradient(180deg, #a8261c, #7d150f); border: 1px solid #c79a3e; }
.vip-txt { background: rgba(217, 169, 76, 0.10); box-shadow: inset 0 -1px 0 rgba(217, 169, 76, 0.45); border-radius: 2px; padding: 0 2px; }
.vip-box { margin: 6px 0; padding: 8px 10px 4px; border-left: 2px solid #c79a3e; background: rgba(217, 169, 76, 0.07); border-radius: 0 4px 4px 0; }
.vip-box > .vip-pill { margin-bottom: 4px; }
.vip-box > p:last-child, .vip-box > ul:last-child { margin-bottom: 4px; }
.link-row .vip-pill, .alert-card .vip-pill { margin: 0 8px 0 6px; flex: none; }
.trial-bar .vip-legend { margin-top: 4px; }
.trial-bar .vip-legend .vip-pill { display: inline-flex; margin: 0 2px; }

/* อธิบายเมื่อวันตามปฏิทินกับวันทางโหราศาสตร์ต่างกัน (เกิดก่อน 06:00) */
.day-shift { display: flex; gap: 10px; align-items: flex-start; }
.day-shift > .ic { color: var(--gold); width: 20px; height: 20px; flex: none; margin-top: 2px; }
.day-shift p { margin: 0; }