/* Akasha Oracle: Tarot & Kinh Dịch */
.oracle{padding-bottom:40px}
.o-intro{text-align:center;padding:42px 0 18px;max-width:680px;margin:0 auto}
.o-eye{display:inline-block;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:#F3EEFC;color:#2E1A47;padding:7px 12px;border-radius:10px}
.o-intro h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,48px);margin:14px 0 10px;line-height:1.1}
.o-intro p{color:#D9CCF4;margin:0;font-size:16px}
.muted{color:var(--muted)}

.o-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0 26px}
.o-tabs button{height:44px;padding:0 18px;border-radius:14px;border:1px solid var(--line-2);background:rgba(24,20,58,.7);color:var(--fg-2);font-family:var(--display);font-weight:600;font-size:13.5px;cursor:pointer}
.o-tabs button[aria-selected="true"]{background:#F3EEFC;color:#2E1A47;border-color:#F3EEFC;box-shadow:0 4px 0 #8F6FCC}

.o-panel{background:linear-gradient(160deg,rgba(40,26,92,.55),rgba(16,22,64,.55));border:1px solid rgba(201,184,238,.16);border-radius:26px;padding:clamp(18px,3vw,36px);position:relative;overflow:hidden}
.o-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:radial-gradient(1.4px 1.4px at 30px 40px,#fff,transparent),radial-gradient(1px 1px at 150px 110px,#d9e2ff,transparent),radial-gradient(1.6px 1.6px at 240px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 170px,#efe6ff,transparent);background-size:300px 200px;animation:twinkle 5s ease-in-out infinite alternate}
.o-panel > *{position:relative}
.o-panel h2{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);margin:6px 0 10px;line-height:1.2}
.o-date{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#C9B8EE;font-weight:600}
.o-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.o-panel .btn{height:48px;border-radius:14px;font-family:var(--display);font-weight:700;font-size:14px}
.o-panel .btn.primary{background:#F3EEFC;color:#2E1A47;border:0;box-shadow:0 5px 0 #8F6FCC}
.o-panel .btn.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #8F6FCC}
.o-panel .btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- lá bài ---------- */
.tcard{--w:150px;width:var(--w);aspect-ratio:7/12;perspective:1200px;flex:0 0 auto}
.tcard.big{--w:min(240px,62vw)}
.tcard .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tcard.open .in{transform:rotateY(180deg)}
.tcard .back,.tcard .face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.tcard .back{border:2px solid #E8C77A;box-shadow:0 14px 34px rgba(8,6,30,.65),inset 0 0 0 5px #2B1B57;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23E8C77A' stroke-width='1.1' opacity='.85'%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='20'/%3E%3Cpath d='M50 14 L56 44 L86 50 L56 56 L50 86 L44 56 L14 50 L44 44Z'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%23E8C77A'/%3E%3C/g%3E%3C/svg%3E") center/62% no-repeat,
    radial-gradient(circle at 50% 40%,#5B3A92 0%,#2B1B57 55%,#160F33 100%)}
.tcard .back::after{content:"";position:absolute;inset:8px;border:1px solid rgba(232,199,122,.45);border-radius:8px}
.tcard .face{transform:rotateY(180deg);background:#F3EEFC;border:2px solid #E8C77A;box-shadow:0 14px 34px rgba(8,6,30,.65)}
.tcard .face img{width:100%;height:100%;object-fit:cover;display:block}
.tcard.rev .face img,.tcard.rev .face .fb{transform:rotate(180deg)}
.tcard .fb{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;font-family:var(--display);font-weight:700;color:#2E1A47;background:linear-gradient(160deg,#F3EEFC,#C9B8EE)}
.tcard .fb b{display:block;font-size:30px;margin-bottom:6px}
.float{animation:cardfloat 6s ease-in-out infinite}
@keyframes cardfloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
.glow{filter:drop-shadow(0 0 22px rgba(201,184,238,.55))}
.shake .in{animation:shake .9s ease-in-out}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg) scale(1.02)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg) scale(1.03)}80%{transform:rotate(3deg)}}

/* ---------- lá của ngày ---------- */
.daily{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center}
.daily-stage{display:grid;place-items:center;padding:16px 0}
.card-name{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);margin:6px 0 2px;line-height:1.2}
.card-en{color:#C9B8EE;font-size:14px}
.pill2{display:inline-block;margin:12px 6px 0 0;padding:5px 11px;border-radius:999px;background:rgba(243,238,252,.12);color:#F3EEFC;font-size:12.5px;font-weight:600}
.pill2.rev{background:rgba(240,154,138,.18);color:#F7B9AC}
.meaning{font-size:16.5px;line-height:1.65;margin:14px 0 0;color:var(--fg)}

/* ---------- trải 3 lá ---------- */
.ask{max-width:640px;margin:0 auto;text-align:center}
.ask label{display:block;font-weight:600;margin-bottom:8px}
.ask small{color:var(--muted);font-weight:400}
.ask textarea{width:100%;background:rgba(11,10,28,.6);border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;resize:vertical;color:var(--fg)}
.ask .o-actions{justify-content:center}
.table{position:relative;height:300px;margin-top:16px}
.deck{position:absolute;left:50%;top:40px;width:120px;height:206px;margin-left:-60px}
.deck .tcard{position:absolute;inset:0;--w:120px}
.deck.go .tcard:nth-child(odd){animation:riffleL 1.5s ease-in-out}
.deck.go .tcard:nth-child(even){animation:riffleR 1.5s ease-in-out}
@keyframes riffleL{0%,100%{transform:none}30%{transform:translateX(-90px) rotate(-12deg)}60%{transform:translateX(-20px) rotate(-3deg)}}
@keyframes riffleR{0%,100%{transform:none}30%{transform:translateX(90px) rotate(12deg)}60%{transform:translateX(20px) rotate(3deg)}}
.fan{position:absolute;inset:0}
.fan .tcard{--w:96px;position:absolute;left:50%;bottom:12px;margin-left:-48px;transform-origin:50% 130%;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s,translate .25s;cursor:pointer;opacity:0}
.fan .tcard.out{opacity:1}
.fan .tcard:hover,.fan .tcard:focus-visible{translate:0 -18px}
.fan .tcard.taken{opacity:0;pointer-events:none}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:10px}
.slot{text-align:center}
.slot-lbl{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#C9B8EE;margin-bottom:10px}
.slot-card{min-height:calc(150px * 12 / 7);display:grid;place-items:center;border:1.5px dashed rgba(201,184,238,.35);border-radius:14px;padding:6px}
.slot-card .tcard{animation:arrive .6s cubic-bezier(.2,.8,.2,1)}
@keyframes arrive{from{opacity:0;transform:translateY(-60px) scale(.7) rotate(-8deg)}to{opacity:1;transform:none}}
.slot-txt{margin-top:12px;text-align:left;font-size:14.5px;line-height:1.6}
.slot-txt b{display:block;font-family:var(--display);font-size:16px;margin-bottom:2px}
.reading{margin-top:22px;padding:18px 20px;border-radius:16px;background:rgba(11,10,28,.55);border:1px solid rgba(201,184,238,.2);line-height:1.7}
.reading h3{font-family:var(--display);margin:0 0 8px;font-size:19px}

/* ---------- Kinh Dịch ---------- */
.iching{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center}
.ich-stage{display:grid;justify-items:center;gap:22px;padding:10px 0}
.coins{display:flex;gap:14px;height:64px;align-items:center}
.coin{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE6A8,#E8A84A 55%,#9C6A1E);box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 0 0 4px rgba(156,106,30,.6);position:relative;transform-style:preserve-3d}
.coin::after{content:"";position:absolute;inset:19px;border:3px solid #7A5216;border-radius:3px;background:#2B1B57}
.coin.tail{background:radial-gradient(circle at 35% 30%,#E8DAFF,#A68BDB 55%,#5B3A92);box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 0 0 4px rgba(91,58,146,.6)}
.coin.tail::after{border-color:#3B2266;background:#F3EEFC}
.coins.toss .coin{animation:toss .8s cubic-bezier(.3,.7,.4,1)}
.coins.toss .coin:nth-child(2){animation-delay:.06s}.coins.toss .coin:nth-child(3){animation-delay:.12s}
@keyframes toss{0%{transform:translateY(0) rotateX(0)}45%{transform:translateY(-70px) rotateX(900deg)}100%{transform:translateY(0) rotateX(1440deg)}}
.hex{display:flex;flex-direction:column-reverse;gap:10px;width:min(230px,70vw);min-height:184px}
.line{height:20px;display:flex;gap:18%;position:relative;animation:linein .5s ease-out}
.line i{flex:1;background:linear-gradient(90deg,#F3EEFC,#C9B8EE);border-radius:4px}
.line.yin i{flex:0 0 41%}
.line.yin{justify-content:space-between}
.line.chg::after{content:"";position:absolute;right:-26px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#E8A84A;box-shadow:0 0 12px #E8A84A}
@keyframes linein{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
.hex-name{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);margin:6px 0 2px;line-height:1.2}
.tri{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;color:#D9CCF4;font-size:14px}
.tri span b{font-size:20px;margin-right:6px;color:#F3EEFC}
.bien{margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(11,10,28,.5);border:1px solid rgba(232,168,74,.35)}

/* ---------- sách liên quan ---------- */
.o-books{margin-top:28px}
.o-note{color:var(--muted);font-size:13px;text-align:center;max-width:720px;margin:24px auto 0}

@media (max-width:760px){
  .daily,.iching{grid-template-columns:1fr;text-align:center}
  .daily .o-actions,.iching .o-actions{justify-content:center}
  .tri{justify-content:center}
  .table{height:230px}
  .fan .tcard{--w:62px;margin-left:-31px}
  .slots{gap:8px}
  .slot-card{min-height:calc(96px * 12 / 7)}
  .slot-card .tcard{--w:92px}
  .slot-txt{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.float,.deck.go .tcard,.coins.toss .coin,.line,.slot-card .tcard{animation:none!important}.tcard .in{transition:none}}
.table{transition:height .6s ease,margin .6s ease}
.table.done{height:0;margin:0;overflow:hidden}

/* ---------- luận giải chi tiết ---------- */
.reading h3{font-family:var(--display);margin:0 0 10px;font-size:20px}
.reading .q{font-style:italic;color:#D9CCF4;margin:0 0 12px}
.rd-ov{margin-bottom:14px}
.rd h4,.rd-ov h4,.rd-box h4{font-family:var(--display);font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;color:#C9B8EE}
.rd-ov p{margin:0 0 10px;line-height:1.75;font-size:15.5px}
.rd-ov .note{padding:10px 14px;border-left:3px solid #8F6FCC;background:rgba(143,111,204,.12);border-radius:0 10px 10px 0}
.rd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 14px}
.rd-box{padding:14px 16px;border-radius:14px;background:rgba(11,10,28,.45);border:1px solid rgba(201,184,238,.16)}
.rd-box ul{margin:0;padding-left:18px;line-height:1.6;font-size:14.5px}
.rd-box li{margin-bottom:5px}
.rd-box.good h4{color:#9FE0C2}.rd-box.good{border-color:rgba(127,200,169,.3)}
.rd-box.warn h4{color:#F7B9AC}.rd-box.warn{border-color:rgba(240,154,138,.3)}
.rd-box.do h4{color:#F3D58A}.rd-box.do{border-color:rgba(232,168,74,.3)}
.rd-box.dont h4{color:#C9B8EE}
.rd-life p{margin:0 0 8px;line-height:1.7;font-size:15px}
.rd-life b{color:#F3EEFC}
.rd-sub{margin-top:22px!important}
.rd-card{border:1px solid rgba(201,184,238,.18);border-radius:14px;margin-top:10px;background:rgba(11,10,28,.35)}
.rd-card summary{display:flex;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none}
.rd-card summary::-webkit-details-marker{display:none}
.rd-card summary small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.rd-card summary .num{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#F3EEFC;color:#2E1A47;font-weight:800;font-family:var(--display);font-size:13px}
.rd-card[open] summary{border-bottom:1px solid rgba(201,184,238,.14)}
.rd-card .rd{padding:14px 16px}
#dailyMore,#ichMore{margin-top:26px}
.bien2{margin-top:6px;padding:14px 16px;border-radius:14px;border:1px solid rgba(232,168,74,.35);background:rgba(11,10,28,.5)}

/* ---------- Celtic Cross ---------- */
.cc-intro{color:#D9CCF4;margin:0 0 16px;line-height:1.65}
.cc{--cw:92px;display:flex;justify-content:center;align-items:center;gap:40px;margin:8px 0 6px;flex-wrap:wrap}
.cc-cross{display:grid;grid-template-columns:repeat(3,var(--cw));grid-template-rows:repeat(3,auto);gap:14px calc(var(--cw) * .42 + 16px);position:relative}
.cc-pos{display:flex;flex-direction:column;align-items:center;gap:6px}
.cc-pos span{font-size:11.5px;color:#C9B8EE;text-align:center;line-height:1.25;max-width:calc(var(--cw) + 20px)}
.cc-card{width:var(--cw);aspect-ratio:7/12;border:1.5px dashed rgba(201,184,238,.35);border-radius:10px;display:grid;place-items:center}
.cc-card.filled{border-color:transparent}
.cc-card .tcard{--w:var(--cw);animation:arrive .6s cubic-bezier(.2,.8,.2,1)}
.cc-cross .p5{grid-column:2;grid-row:1}
.cc-cross .p4{grid-column:1;grid-row:2}
.cc-cross .p1{grid-column:2;grid-row:2}
.cc-cross .p2{grid-column:2;grid-row:2;z-index:2;justify-content:center}
.cc-cross .p2 .cc-card{transform:rotate(90deg);border-style:dotted}
.cc-cross .p2 span{position:absolute;bottom:-4px;transform:translateY(100%);white-space:nowrap}
.cc-cross .p1 span{visibility:hidden}
.cc-cross .p6{grid-column:3;grid-row:2}
.cc-cross .p3{grid-column:2;grid-row:3}
.cc-cross .p2{position:relative}
.cc-staff{display:flex;flex-direction:column-reverse;gap:10px}
.cc-staff .cc-pos{flex-direction:row;gap:10px}
.cc-staff .cc-pos span{text-align:left;width:90px}
@media (max-width:760px){
  .rd-grid{grid-template-columns:1fr}
  .cc{--cw:54px;gap:18px}
  .cc-cross{gap:10px calc(var(--cw) * .42 + 8px)}
  .cc-pos span{font-size:10px}
  .cc-staff .cc-pos span{width:70px}
}