/* เฮงเฮง ลอตโต้ - home page (agent CONTENT). Uses base.css tokens. */
.home main{overflow-x:clip}
.qm-wrap{padding-top:12px}
.qm{gap:0;padding:4px 0 2px}
.qm-i{width:25%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;font:500 13px/1.25 var(--head);color:var(--ink);text-align:center}
.qm-ic{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:radial-gradient(circle at 50% 35%,#fff,#eef3ff 70%);box-shadow:0 4px 14px rgba(21,70,201,.12);transition:transform .15s}
.qm-ic img{width:58px;height:58px;object-fit:contain}
.qm-i:hover .qm-ic{transform:translateY(-3px)}
@media (min-width:700px){.qm{display:grid;grid-template-columns:repeat(8,1fr);overflow:visible}.qm-i{width:auto}.qm+.dots{display:none}}

/* hero slider */
.hero-wrap{padding-top:10px}
.hero{border-radius:20px;gap:0;padding:0;box-shadow:var(--sh-2)}
.hero-slide{position:relative;width:100%;display:block;aspect-ratio:1536/640;min-height:170px;overflow:hidden;color:#fff;border-radius:20px;background:linear-gradient(110deg,#0b2a8f,#1546c9 55%,#3b7bff)}
.hero-slide.hs-1{background:linear-gradient(110deg,#0d2f8f,#2155e0 60%,#5b8cff)}
.hero-slide.hs-2{background:linear-gradient(110deg,#0b1f5c,#1546c9 60%,#ffb400)}
.hs-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.hs-img{width:100%;height:100%;object-fit:cover}
.hs-text{position:absolute;left:0;top:0;bottom:0;width:58%;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 18px;background:linear-gradient(90deg,rgba(11,31,92,.55),rgba(11,31,92,0))}
.hs-text strong{font:700 clamp(18px,4.6vw,36px)/1.2 var(--head);text-shadow:0 2px 8px rgba(0,0,0,.25)}
.hs-text>span{font-size:clamp(12px,2.2vw,17px);color:#dfe8ff;line-height:1.45}
.hs-badge{align-self:flex-start;font:600 12px var(--head);font-style:normal;background:linear-gradient(180deg,var(--red-2),var(--red));padding:3px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(232,40,58,.4)}
.hs-cta{align-self:flex-start;margin-top:6px;font:600 13px var(--head)!important;color:#4a2c00!important;background:linear-gradient(180deg,var(--gold-2),var(--gold));padding:6px 14px;border-radius:999px}
@media (max-width:520px){.hero-slide{aspect-ratio:16/8.4}.hs-text{width:64%;padding:12px 14px}.hs-text>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}

/* intro */
.intro{padding-top:18px;text-align:center}
.intro h1{font-size:clamp(20px,4vw,30px);margin-bottom:8px}
.intro-p{color:var(--ink-2);max-width:760px;margin:0 auto 12px;font-size:15px}
.intro-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sec-tight{padding-top:16px;padding-bottom:6px}

/* latest results */
.rc{width:216px;padding:12px 14px;color:var(--ink);display:flex;flex-direction:column;gap:2px;border:1px solid var(--line)}
.rc-h{display:flex;align-items:center;gap:6px;font:600 15px var(--head)} .rc-h img{border-radius:50%}
.rc small{color:var(--ink-3);font-size:12px}
.rc-n{display:flex;justify-content:space-between;margin-top:6px}
.rc-n>span{display:flex;flex-direction:column;gap:3px} .rc-n i{font-style:normal;font-size:11px;color:var(--ink-3)}
.balls{display:inline-flex;gap:3px} .balls .ball{width:28px;height:28px;font-size:15px}

/* feature cards */
.feat-row{gap:12px}
.feat{position:relative;width:150px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 10px 12px;border-radius:18px;background:linear-gradient(180deg,#fff,#f1f5ff);box-shadow:var(--sh);color:var(--ink);overflow:hidden}
.feat-art{width:112px;height:112px;display:grid;place-items:center}
.feat-art img{width:112px;height:112px;object-fit:contain;transition:transform .2s}
.feat:hover .feat-art img{transform:scale(1.06) rotate(-2deg)}
.feat strong{font:600 15px var(--head);margin-top:2px} .feat small{color:var(--ink-3);font-size:12px;line-height:1.35}
.ribbon{position:absolute;top:10px;left:-30px;transform:rotate(-40deg);width:110px;text-align:center;background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;font:600 12px/22px var(--head);box-shadow:0 2px 6px rgba(232,40,58,.35);z-index:1}
@media (min-width:900px){.feat-row{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible}.feat{width:auto}.feat-row+.dots{display:none}}

/* promo banners */
.promo-b{position:relative;width:min(320px,82vw);min-height:128px;display:flex;align-items:center;gap:6px;padding:14px 8px 14px 16px;border-radius:18px;color:#fff;overflow:hidden;box-shadow:var(--sh)}
.pb-0{background:linear-gradient(120deg,#0d2f8f,#2a63f0)} .pb-1{background:linear-gradient(120deg,#b3122a,#ff4d5e)} .pb-2{background:linear-gradient(120deg,#c67600,#ffc22e)}
.promo-b:before{content:'';position:absolute;right:-30px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12)}
.pb-text{flex:1;display:flex;flex-direction:column;gap:3px;z-index:1}
.pb-text em{align-self:flex-start;font:600 11px var(--head);font-style:normal;background:rgba(255,255,255,.22);padding:2px 9px;border-radius:999px}
.pb-text strong{font:700 17px/1.3 var(--head)} .pb-text small{opacity:.9;font-size:13px}
.pb-art{width:104px;height:104px;object-fit:contain;flex:none;z-index:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
@media (min-width:1000px){.promo-row{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}.promo-b{width:auto}.promo-row+.dots{display:none}}

/* popular lotteries */
.lot{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 12px 14px;border:1px solid var(--line);overflow:hidden}
.lot:before{content:'';position:absolute;inset:0 0 auto;height:64px;background:linear-gradient(180deg,var(--blue-3),transparent)}
.lot>*{position:relative}
.lot-ic{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(21,70,201,.18))}
.lot h3{margin:4px 0 0;font-size:17px} .lot p{font-size:13px;color:var(--ink-3);margin:0;line-height:1.45;min-height:2.9em}
.lot-rate{font:500 13px var(--head);color:var(--ink-2);margin:4px 0 8px} .lot-rate b{color:var(--red);font-size:16px}
.lot-tag{position:absolute;top:10px;right:10px;font:700 11px var(--head);color:#fff;background:linear-gradient(180deg,#ff6a3d,var(--red));padding:2px 8px;border-radius:6px;z-index:1}
.lot-tag.new{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#5a3500}
@media (max-width:860px){.lot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.lot-grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.lot p{display:none}}

/* how-to steps */
.steps-sec{background:linear-gradient(180deg,transparent,#e8efff 30%,#e8efff 70%,transparent)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{position:relative;padding:14px 12px;text-align:center}
.step a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink)}
.step-n{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--head);color:#fff;background:linear-gradient(180deg,var(--blue-2),var(--blue))}
.step-ic{width:96px;height:96px;object-fit:contain}
.step strong{font:600 16px var(--head)} .step small{color:var(--ink-3);font-size:13px;line-height:1.45}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}.step-ic{width:76px;height:76px}}

/* winners */
.win-tot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.win-tot>div{display:flex;flex-direction:column;align-items:center;padding:12px 6px;border-radius:var(--r);background:linear-gradient(160deg,var(--navy),var(--blue));color:#cfdcff;text-align:center}
.win-tot b{font:700 clamp(20px,4vw,28px) var(--head);color:#fff;line-height:1.2} .win-tot b.hl-gold{color:var(--gold-2)} .win-tot small{font-size:12px}
.win-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.win{display:flex;align-items:center;gap:10px;padding:10px 12px}
.win img{border-radius:50%;background:var(--blue-3)}
.win-b{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .win-b small{color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-amt{display:flex;flex-direction:column;align-items:flex-end;font:600 15px var(--head)} .win-amt small{font-size:11px;color:var(--ink-3)}
.win-empty{display:flex;align-items:center;gap:14px} .win-empty p{color:var(--ink-3);font-size:14px;margin:4px 0 8px}
.win-empty img{flex:none}

/* tools + posts */
.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.tool{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:var(--r);background:#fff;box-shadow:var(--sh);font:500 13px/1.3 var(--head);color:var(--ink);text-align:center}
.tool img{width:48px;height:48px;object-fit:contain}
.post{display:flex;flex-direction:column;padding:0;overflow:hidden;color:var(--ink)}
.post-cover{display:grid;place-items:center;aspect-ratio:40/21;background:linear-gradient(135deg,#e6eeff,#fff3d6)}
.post-cover img{width:auto;height:88%;max-width:100%;object-fit:contain}
.post-b{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.post-b .chip{align-self:flex-start} .post-b strong{font:600 16px/1.4 var(--head)} .post-b small{color:var(--ink-3);font-size:12px}
@media (max-width:520px){.post-grid.g4{grid-template-columns:1fr 1fr}.post-b strong{font-size:14px}.tool{font-size:11px}}

/* SEO copy + floating buttons */
.seo-copy .prose{font-size:15px}
.seo-copy .prose h2{font-size:20px;margin-top:0} .seo-copy .prose h3{font-size:17px}
.float-btns{position:fixed;right:10px;bottom:calc(var(--bn-h) + 70px);z-index:44;display:flex;flex-direction:column;gap:10px}
.fb{display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 6px 12px rgba(13,47,143,.25));animation:fbBob 3s ease-in-out infinite}
.fb-admin{animation-delay:1.5s}
.fb img{width:62px;height:62px;object-fit:contain}
.fb span{margin-top:-8px;font:600 11px var(--head);color:#fff;background:linear-gradient(180deg,var(--red-2),var(--red));padding:2px 8px;border-radius:999px;white-space:nowrap}
.fb-admin span{background:linear-gradient(180deg,var(--blue-2),var(--blue))}
@keyframes fbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.fb{animation:none}}
@media (min-width:900px){.float-btns{bottom:120px;right:18px}.fb img{width:76px;height:76px}}
.wrap.sec{padding-left:16px;padding-right:16px}
@media (max-width:520px){
  .hs-text{width:70%;background:linear-gradient(90deg,rgba(11,31,92,.85),rgba(11,31,92,.55) 70%,rgba(11,31,92,0))}
  .hs-text>span:not(.hs-cta){display:none}
  .hs-text strong{font-size:20px}
  .fb img{width:52px;height:52px}.fb span{font-size:10px}
  .float-btns{right:6px;gap:6px}
}
.lot-rate .st-open{display:block;font-size:12px}
.post-cover{position:relative;display:block;overflow:hidden}
.post-cover img{position:absolute;left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 12px);max-width:none;object-fit:contain}

/* QA round: floating mascots never cover the hero/intro on phones - hidden until the visitor scrolls past the intro (home.js adds .show) */
.float-btns{transition:opacity .25s,transform .25s,visibility .25s}
@media (max-width:700px){
  .float-btns{right:6px;bottom:calc(var(--bn-h) + 14px);gap:4px}
  .float-btns:not(.show){opacity:0;visibility:hidden;transform:translateX(30px);pointer-events:none}
  .fb img{width:44px;height:44px}
  .fb span{font-size:10px;padding:1px 6px;margin-top:-6px}
}
/* launch state: compact winners card */
.win-empty{padding:12px 14px}
.win-empty img{width:72px;height:72px}
.win-empty strong{font:600 15px/1.35 var(--head)}
.win-empty p{margin:2px 0 8px;font-size:13px}
/* member reviews on the home page */
.rv-line{display:flex;align-items:center;gap:6px;margin:-4px 0 10px;flex-wrap:wrap}
.rv-line b{font:700 18px var(--head)}
.rv-row{gap:10px}
.rv-row .rv{width:min(300px,80vw);flex:none}
.rv{display:flex;flex-direction:column;gap:6px;margin:0}
.rv-h{display:flex;align-items:center;gap:10px}
.rv-h img{border-radius:50%;background:var(--blue-3);flex:none}
.rv-h div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.rv-h small{color:var(--ink-3);font-size:12px}
.rv p{margin:0;color:var(--ink-2);font-size:14px;white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.stars{display:inline-flex;gap:1px;line-height:1}
.stars i{font-style:normal;color:#d5dbe8;font-size:16px}
.stars i.on{color:var(--gold)}
.rv-invite{display:flex;flex-direction:column;gap:2px;padding:12px 14px;color:var(--ink)}
.rv-invite span{color:var(--blue);font-size:14px}