/* =====================================================================
   หมวดดวงโชคลาภ — fortune.css (ใช้ร่วมกับ lucky.html และ calendar.html)
   โทน: ทอง/มั่งคั่ง มากกว่าหมวดอื่นเล็กน้อย แต่ยังอยู่ในโทน Mystic Luxury
   ===================================================================== */
:root { --fx-gold-bg: linear-gradient(160deg, rgba(120, 78, 24, .38), rgba(58, 29, 99, .55) 55%, rgba(27, 13, 49, .75)); }

/* ---------- Hero หน้ารวม ---------- */
.fx-hero { position: relative; overflow: hidden; isolation: isolate; padding: 26px 0 10px; text-align: center; }
.fx-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 260px at 50% 30%, rgba(245, 208, 111, .22), transparent 70%); }
.fx-hero-art { width: 220px; height: 170px; margin: 0 auto 6px; filter: drop-shadow(0 18px 30px rgba(184, 138, 62, .35)); }
.fx-hero-art .fx-float { animation: floatY 5s ease-in-out infinite; transform-box: fill-box; }
.fx-hero-art .fx-tw { animation: twinkle 2.6s ease-in-out infinite; }
.fx-hero-art .fx-tw.d2 { animation-delay: .9s; } .fx-hero-art .fx-tw.d3 { animation-delay: 1.7s; }
.fx-hero h1 { font-size: clamp(2rem, 8vw, 3.4rem); margin-bottom: .15em; }
.fx-hero .lead { color: var(--text-2); max-width: 600px; margin: 0 auto; }
.fx-hero .date-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 16px; border-radius: 999px; background: rgba(245, 208, 111, .08); border: 1px solid var(--line-2); font-size: .88rem; color: var(--gold-2); }
.fx-hero .date-pill svg, .page-hero .date-pill svg { width: 16px; height: 16px; }
@media (min-width: 720px) { .fx-hero { padding: 44px 0 16px; } .fx-hero-art { width: 280px; height: 210px; } }

/* hero-icon ทอง */
.fx-page .page-hero .hero-icon { background: radial-gradient(circle at 30% 25%, rgba(255, 236, 186, .45), rgba(184, 138, 62, .35) 55%, rgba(58, 29, 99, .5)); color: #fff1c9; }

/* ---------- แท็บ ---------- */
.fx-tabs-wrap { display: flex; justify-content: center; margin: 4px 0 6px; }
.fx-tabs-wrap .tabs { max-width: 100%; }
.fx-tabs-wrap .tabs a { min-height: 40px; display: inline-flex; align-items: center; }

/* ---------- การ์ดทอง ---------- */
.fx-gold { position: relative; border-radius: var(--radius); padding: 20px; background: var(--fx-gold-bg); border: 1px solid var(--line-2); box-shadow: var(--shadow-gold); overflow: hidden; }
.fx-gold::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 208, 111, .22), transparent 70%); pointer-events: none; }
@media (min-width: 720px) { .fx-gold { padding: 26px; } }
.fx-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; letter-spacing: .08em; color: var(--gold); margin-bottom: 6px; }
.fx-kicker svg { width: 14px; height: 14px; }
.fx-title { font-family: var(--font-head); font-size: 1.25rem; margin: 0 0 4px; }

/* ring + bars */
.fx-score { display: grid; gap: 18px; align-items: center; justify-items: center; }
.fx-score .bars { width: 100%; }
@media (min-width: 560px) { .fx-score { grid-template-columns: auto 1fr; justify-items: stretch; gap: 26px; } }
.fx-score-head { text-align: center; }
.fx-score-head .badge { margin-top: 8px; }

/* ---------- ข้อความคำทำนาย ---------- */
.fx-read { display: grid; gap: 12px; }
.fx-read .topic-card p { color: var(--text); }

/* ---------- อันดับ ---------- */
.fx-rank { display: grid; gap: 8px; counter-reset: rk; }
.fx-rank a, .fx-rank .fx-rr { display: grid; grid-template-columns: 30px 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--text); transition: .2s; min-height: 56px; }
.fx-rank a:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--text); transform: translateX(2px); }
.fx-rank .no { font-family: var(--font-head); font-weight: 700; color: var(--text-3); text-align: center; font-size: 1.05rem; }
.fx-rank .top .no { color: #2a1640; background: var(--gold-grad); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-size: .9rem; }
.fx-rank .top { border-color: var(--line-2); background: linear-gradient(90deg, rgba(245, 208, 111, .12), var(--surface)); }
.fx-rank .dd, .fx-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .95rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
.fx-rank .zc, .fx-mini .zc { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.2rem; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .5), transparent 45%), var(--zc); }
.fx-rank .nm { min-width: 0; line-height: 1.3; }
.fx-rank .nm b { font-weight: 500; display: block; }
.fx-rank .nm .bar { height: 6px; margin-top: 6px; }
.fx-rank .sc { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--money); min-width: 34px; text-align: right; }
.fx-rank .nm small { color: var(--text-3); font-size: .78rem; }

/* ---------- swatch / สี ---------- */
.fx-sw { width: 54px; height: 54px; border-radius: 50%; flex: none; background: var(--c); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 10px 22px -10px var(--c); position: relative; }
.fx-sw.lg { width: 76px; height: 76px; }
.fx-sw.sm { width: 34px; height: 34px; }
.fx-sw.pair { background: linear-gradient(135deg, var(--c) 50%, var(--c2, var(--c)) 50%); }
.fx-sw.bad::after { content: ''; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .85); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 6px rgba(0, 0, 0, .4); }
.fx-swrow { display: flex; align-items: center; gap: 12px; }
.fx-swrow b { display: block; font-weight: 500; line-height: 1.3; }
.fx-swrow small { color: var(--text-3); font-size: .82rem; line-height: 1.4; display: block; }

/* แถบเตือนกาลกิณี */
.fx-avoid { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(90deg, rgba(240, 138, 138, .14), rgba(240, 138, 138, .04)); border: 1px solid rgba(240, 138, 138, .35); }
.fx-avoid b { color: var(--bad); font-weight: 500; display: block; }
.fx-avoid small { color: var(--text-2); font-size: .85rem; display: block; line-height: 1.5; }

/* ---------- ตัวเลข ---------- */
.fx-nums { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fx-num2 { min-width: 64px; height: 50px; padding: 0 14px; border-radius: 999px; display: inline-grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--gold-2); background: rgba(245, 208, 111, .08); border: 1px solid var(--line-2); letter-spacing: .06em; }
.fx-num2.bad { color: var(--bad); border-color: rgba(240, 138, 138, .4); background: rgba(240, 138, 138, .08); }
.num-ball.bad { background: radial-gradient(circle at 32% 26%, #ffd9d9, #e98b8b 50%, #9b3e3e); color: #3a0f12; }

/* ---------- tile เมนูหัวข้อย่อย ---------- */
.fx-tiles { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) { .fx-tiles { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1000px) { .fx-tiles { grid-template-columns: repeat(9, 1fr); } }
.fx-tiles .tile .ti { color: #fff1c9; background: radial-gradient(circle at 32% 26%, rgba(255, 236, 186, .45), rgba(184, 138, 62, .3) 55%, rgba(18, 8, 31, .5)); }

/* ---------- การ์ดย่อยในกริด ---------- */
.fx-mini { padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); display: grid; gap: 8px; align-content: start; color: var(--text); }
a.fx-mini { transition: .2s; }
a.fx-mini:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-2px); background: var(--surface-2); }
.fx-mini-head { display: flex; align-items: center; gap: 10px; }
.fx-mini-head b { font-weight: 500; line-height: 1.3; }
.fx-mini-head .sc { margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--money); }
.fx-mini p { margin: 0; font-size: .92rem; color: var(--text-2); line-height: 1.7; }
.fx-mini .more { font-size: .85rem; color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.fx-mini .more svg { width: 14px; height: 14px; }

/* tip cards */
.fx-tips { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fx-tips { grid-template-columns: 1fr 1fr; } }
.fx-tip { display: flex; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); }
.fx-tip .ic { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff1c9; background: radial-gradient(circle at 32% 26%, rgba(255, 236, 186, .4), rgba(184, 138, 62, .3) 60%, rgba(18, 8, 31, .4)); box-shadow: inset 0 0 0 1px var(--line-2); }
.fx-tip .ic svg { width: 20px; height: 20px; }
.fx-tip b { display: block; font-weight: 500; margin-bottom: 2px; }
.fx-tip p { margin: 0; font-size: .9rem; color: var(--text-2); line-height: 1.65; }

/* key-value info chips */
.fx-facts { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .fx-facts { grid-template-columns: repeat(4, 1fr); } }
.fx-fact { padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); display: grid; gap: 4px; align-content: start; }
.fx-fact .k { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-3); }
.fx-fact .k svg { width: 15px; height: 15px; color: var(--gold); }
.fx-fact .v { font-weight: 500; line-height: 1.4; color: var(--text); }
.fx-fact .v small { display: block; font-weight: 300; color: var(--text-3); font-size: .8rem; }

/* สัปดาห์นี้ */
.fx-week { display: grid; gap: 8px; }
.fx-wd { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); }
.fx-wd .dt { text-align: center; line-height: 1.15; }
.fx-wd .dt b { display: block; font-family: var(--font-head); font-size: 1.35rem; }
.fx-wd .dt small { color: var(--text-3); font-size: .74rem; }
.fx-wd .info { min-width: 0; font-size: .88rem; color: var(--text-2); line-height: 1.5; }
.fx-wd .info b { color: var(--text); font-weight: 500; }
.fx-wd.best { border-color: var(--gold); background: linear-gradient(90deg, rgba(245, 208, 111, .14), var(--surface)); }
.lv-great { --lv: #f5d06f; } .lv-good { --lv: #7fd8a4; } .lv-normal { --lv: #b996ec; } .lv-caution { --lv: #f08a8a; }
.fx-lv { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 3px 10px; border-radius: 999px; color: var(--lv); background: color-mix(in srgb, var(--lv) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lv) 35%, transparent); white-space: nowrap; }
.fx-lv::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lv); box-shadow: 0 0 8px var(--lv); }

/* ตัวเลือกวัน: เพิ่มคะแนนใต้ชื่อ */
.day-btn .sc { font-size: .75rem; color: var(--money); }
.day-grid .day-btn { min-height: 44px; }

/* แถวราศีแบบ grid (ไม่เลื่อน) */
.fx-zgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 720px) { .fx-zgrid { grid-template-columns: repeat(6, 1fr); } }
.fx-zgrid .zodiac-chip { padding: 8px 2px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); }
.fx-zgrid .zodiac-chip.is-active { border-color: var(--gold); background: rgba(227, 194, 122, .12); }
.fx-zgrid .zodiac-chip .zc { width: 50px; height: 50px; font-size: 1.5rem; }
.fx-zgrid .zodiac-chip b { font-size: .86rem; }
.fx-zgrid .zodiac-chip small { color: var(--money); opacity: 1; }

/* โปรไฟล์ notice */
.fx-me { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; font-size: .9rem; color: var(--text-2); margin: 10px 0 0; text-align: center; }
.fx-me svg { width: 16px; height: 16px; color: var(--gold); }

/* CTA โปรไฟล์ */
.fx-cta { display: grid; gap: 14px; align-items: center; text-align: center; }
@media (min-width: 720px) { .fx-cta { grid-template-columns: 1fr auto; text-align: left; } }

/* section head icon */
.fx-h { display: flex; align-items: center; gap: 10px; }
.fx-h .hi { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff1c9; background: rgba(245, 208, 111, .14); box-shadow: inset 0 0 0 1px var(--line-2); }
.fx-h .hi svg { width: 18px; height: 18px; }

.fx-note { font-size: .82rem; color: var(--text-3); line-height: 1.6; margin-top: 12px; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chips .chip { padding: 6px 12px; font-size: .84rem; }

/* วันมงคลใกล้ที่สุด */
.fx-next { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .fx-next { grid-template-columns: repeat(3, 1fr); } }
.fx-nd { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--text); transition: .2s; }
.fx-nd:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-2px); }
.fx-nd .cal { border-radius: 14px; overflow: hidden; text-align: center; background: var(--cream); color: var(--ink); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .7); }
.fx-nd .cal small { display: block; background: var(--gold-grad); font-size: .72rem; font-weight: 500; padding: 2px 0; }
.fx-nd .cal b { display: block; font-family: var(--font-head); font-size: 1.6rem; line-height: 1.4; }
.fx-nd .tx { font-size: .86rem; color: var(--text-2); line-height: 1.5; min-width: 0; }
.fx-nd .tx b { color: var(--text); font-weight: 500; display: block; font-size: .95rem; }

.fx-link-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (min-width: 900px) { .fx-read { grid-template-columns: repeat(3, 1fr); } }