@charset "utf-8";
/* =====================================================================
   Rent108 — หน้าแรก : การ์ดเมนูด่วนที่เด่นพิเศษ (#im .qcard.is-hot) ชวนให้ลองใช้ "จดมิเตอร์ด้วยกล้อง AI"
   ขอบทองหมุน · เส้นสแกนวิ่งผ่านรูป · ป้ายใหม่ · ประกายดาว · ปุ่ม "ลองใช้เลย"
   ตัวการ์ดใช้ transform กับ .reveal / :hover อยู่แล้ว → แอนิเมชันทั้งหมดอยู่ที่ชิ้นส่วนด้านใน
   เปิดใช้ : ใส่ค่า true เป็นช่องที่ 6 ของ $quick_menu ใน index.php · กดเข้าไปแล้ว = .is-tried (ลดเอฟเฟค)
   ===================================================================== */
@property --qhot-ang{syntax:'<angle>';inherits:false;initial-value:0deg;}

.qcard.is-hot{border:1.5px solid transparent;
	background:linear-gradient(#fffaf0,#fbf3df) padding-box,conic-gradient(from var(--qhot-ang),var(--gold-deep),var(--gold-soft),#fff,var(--gold),var(--gold-deep)) border-box;
	box-shadow:0 22px 46px -30px rgba(var(--gold-rgb),.9),inset 0 0 30px -14px rgba(var(--gold-rgb),.7);
	animation:qhot-spin 3.6s linear infinite;}
.qcard.is-hot:hover{border-color:transparent;box-shadow:0 30px 60px -28px rgba(var(--gold-rgb),1),inset 0 0 30px -14px rgba(var(--gold-rgb),.7);}
.qcard.is-hot::after{display:none;} /* ใช้ปุ่ม "ลองใช้เลย" แทนลูกศรมุมขวา */
.qcard.is-hot h3{font-weight:600;}

/* รูป + เส้นสแกน (AI กำลังอ่าน) + วงแสงทองแผ่เป็นจังหวะ */
.qhot-img{position:relative;display:block;width:76px;height:76px;margin:12px 0 10px;border-radius:16px;overflow:hidden;animation:qhot-glow 2.6s ease-out infinite,qhot-float 4s ease-in-out infinite;}
.qhot-img img{display:block;width:100%;height:100%;margin:0 !important;object-fit:contain;}
.qhot-scan{position:absolute;left:-10%;right:-10%;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold-soft),#fff,var(--gold-soft),transparent);box-shadow:0 0 12px 3px rgba(var(--gold-rgb),.75);animation:qhot-scan 2.4s ease-in-out infinite;pointer-events:none;}

/* ป้ายใหม่ */
.qhot-badge{position:absolute;top:14px;right:14px;padding:3px 10px;border-radius:12px;background:linear-gradient(135deg,#e5533d,#c0392b);color:#fff;font-size:12px;font-weight:600;line-height:1.4;box-shadow:0 6px 14px -6px rgba(192,57,43,.9);animation:qhot-badge 1.8s ease-in-out infinite;}

/* ประกายดาว */
.qhot-sparks i{position:absolute;width:10px;height:10px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:qhot-star 2.8s ease-in-out infinite;pointer-events:none;}
.qhot-sparks i:nth-child(1){left:96px;top:56px;}
.qhot-sparks i:nth-child(2){left:16px;top:120px;width:7px;height:7px;animation-delay:.8s;}
.qhot-sparks i:nth-child(3){right:26px;top:72px;animation-delay:1.5s;}
.qhot-sparks i:nth-child(4){left:84px;top:118px;width:6px;height:6px;animation-delay:2.1s;}

/* ปุ่มลองใช้เลย : แสงวิ่งผ่าน */
.qhot-cta{position:relative;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:12px;padding:6px 14px;border-radius:16px;overflow:hidden;background:var(--ink);color:var(--gold-soft);font-size:13px;font-weight:500;transition:background .3s,color .3s;}
.qhot-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:qhot-shine 2.6s 1s ease-in-out infinite;}
.qhot-cta span{transition:transform .3s;}
.qcard.is-hot:hover .qhot-cta{background:var(--gold);color:var(--ink);}
.qcard.is-hot:hover .qhot-cta span{transform:translateX(4px);}

/* กดเข้าไปลองแล้ว : เลิกเรียกร้องความสนใจ เหลือขอบทองหมุนช้าๆ */
.qcard.is-hot.is-tried{animation-duration:9s;}
.qcard.is-hot.is-tried .qhot-badge,.qcard.is-hot.is-tried .qhot-sparks{display:none;}
.qcard.is-hot.is-tried .qhot-img{animation:none;}
.qcard.is-hot.is-tried .qhot-cta::after{animation:none;}

@keyframes qhot-spin{to{--qhot-ang:360deg;}}
@keyframes qhot-glow{0%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.6);}70%,100%{box-shadow:0 0 0 14px rgba(var(--gold-rgb),0);}}
@keyframes qhot-float{0%,100%{transform:none;}50%{transform:translateY(-4px);}}
@keyframes qhot-scan{0%{transform:translateY(0);opacity:0;}10%{opacity:1;}50%{transform:translateY(73px);opacity:1;}60%,100%{transform:translateY(73px);opacity:0;}}
@keyframes qhot-badge{0%,100%{transform:none;}50%{transform:translateY(-3px) scale(1.06);}}
@keyframes qhot-star{0%,100%{opacity:0;transform:scale(.3) rotate(0);}40%{opacity:1;transform:scale(1) rotate(45deg);}70%{opacity:0;transform:scale(.4) rotate(90deg);}}
@keyframes qhot-shine{0%{left:-60%;}50%,100%{left:130%;}}

@media (max-width:620px){
	.qhot-badge{top:12px;right:10px;font-size:11px;padding:2px 8px;}
	.qhot-sparks i:nth-child(2),.qhot-sparks i:nth-child(4){display:none;}
	.qhot-cta{font-size:12px;padding:5px 12px;}
}
@media (prefers-reduced-motion:reduce){
	.qcard.is-hot,.qhot-img,.qhot-scan,.qhot-badge,.qhot-sparks i,.qhot-cta::after{animation:none !important;}
	.qhot-scan,.qhot-sparks{display:none;}
}