/* ===== หน้าแรก (page-main.php, _slider.php, widget-btn-social.php, widget-btn-contact.php) ===== */

/* แบนเนอร์ */
.hb{position:relative; overflow:hidden; background:#1f1d2b;}
.hb-track{display:grid;}
.hb-slide{grid-area:1/1; display:block; opacity:0; visibility:hidden; transition:opacity .8s ease, visibility .8s;}
.hb-slide.is-active{opacity:1; visibility:visible;}
.hb-slide img{width:100%; height:auto; display:block;}
.hb.is-multi .hb-slide.is-active img{animation:hbZoom 7s ease-out both;}
@keyframes hbZoom{from{transform:scale(1.04)} to{transform:scale(1)}}
.hb-nav{
	position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0;
	background:rgba(255,255,255,.85); color:#1f1d2b; font-size:16px; cursor:pointer; opacity:0; transition:opacity .2s ease, background .2s ease;
	box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.hb:hover .hb-nav,.hb-nav:focus-visible{opacity:1;}
.hb-nav:hover{background:#fff;}
.hb-nav.is-prev{left:18px;} .hb-nav.is-next{right:18px;}
.hb-dots{position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:8px;}
.hb-dot{width:36px; height:6px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.45); overflow:hidden; cursor:pointer;}
.hb-dot span{display:block; height:100%; width:0; background:#fff;}
.hb-dot.is-active span{animation:hbProgress var(--hb-int,5s) linear forwards;}
.hb.is-paused .hb-dot.is-active span{animation-play-state:paused;}
@keyframes hbProgress{to{width:100%}}

/* แถบผลงานเลื่อนอัตโนมัติ */
.hm-marquee{position:relative; overflow:hidden; padding:18px 0; background:#fff;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.hm-marquee-track{display:flex; gap:14px; width:max-content; animation:hmScroll 60s linear infinite;}
.hm-marquee:hover .hm-marquee-track,.hm-marquee:focus-within .hm-marquee-track{animation-play-state:paused;}
@keyframes hmScroll{to{transform:translateX(calc(-50% - 7px))}}
.hm-mq-item{position:relative; flex:0 0 auto; width:220px; aspect-ratio:4/3; border-radius:16px; overflow:hidden; display:block; background:#eceaf3; box-shadow:0 6px 16px rgba(31,29,43,.10);}
.hm-mq-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease, filter .3s ease;}
.hm-mq-item:hover img{transform:scale(1.08);}
.hm-mq-zoom{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; background:linear-gradient(120deg,rgba(100,40,234,.55),rgba(221,0,0,.45)); opacity:0; transition:opacity .25s ease;}
.hm-mq-item:hover .hm-mq-zoom,.hm-mq-item:focus-visible .hm-mq-zoom{opacity:1;}

.hm-title{text-align:center; font-size:28px; line-height:1.4; font-weight:600; color:var(--ink); margin:8px 0 18px; letter-spacing:0;}

/* ช่องทางรับชมผลงาน */
.sc-grid,.cb-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:12px;}
.sc-card,.cb-btn{
	position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:20px;
	text-decoration:none !important; color:#fff !important; isolation:isolate;
	transition:transform .25s ease, box-shadow .25s ease; transform-style:preserve-3d;
}
.sc-card{background:#fff; color:var(--ink) !important; border:1px solid var(--line); box-shadow:0 6px 20px rgba(31,29,43,.07);}
.sc-card::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s ease;}
.sc-card.is-yt::before{background:linear-gradient(120deg,#ff0000,#ff5a3c);}
.sc-card.is-tt::before{background:linear-gradient(120deg,#111,#25f4ee 140%);}
.sc-card.is-fb::before{background:linear-gradient(120deg,#1877f2,#5aa2ff);}
.sc-card:hover{color:#fff !important; box-shadow:0 18px 36px rgba(31,29,43,.18);}
.sc-card:hover::before{opacity:1;}
.sc-icon,.cb-icon{position:relative; width:52px; height:52px; flex:0 0 52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; transition:transform .3s ease, background .3s ease;}
.sc-card.is-yt .sc-icon{background:#ff0000;} .sc-card.is-tt .sc-icon{background:#111; text-shadow:2px 2px 0 #fe2c55,-2px -2px 0 #25f4ee;} .sc-card.is-fb .sc-icon{background:#1877f2;}
.sc-card:hover .sc-icon{background:rgba(255,255,255,.2); transform:rotate(-8deg) scale(1.08);}
.sc-text,.cb-text{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.35;}
.sc-text strong,.cb-text strong{font-size:18px; font-weight:600;}
.sc-text small,.cb-text small{font-size:13px; opacity:.75;}
.sc-go{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--soft); color:var(--brand); font-size:13px; transition:transform .25s ease, background .25s ease, color .25s ease;}
.sc-card:hover .sc-go{background:#fff; color:#1f1d2b; transform:translateX(4px) rotate(-45deg);}
.sc-shine{position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:1; pointer-events:none;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg);}
.sc-card:hover .sc-shine,.cb-btn:hover .sc-shine{animation:scShine .8s ease;}
@keyframes scShine{to{left:130%}}

/* ปุ่มติดต่อ */
.cb-grid{margin-top:20px;}
.cb-btn{box-shadow:0 10px 26px rgba(100,40,234,.25);}
.cb-btn.is-tel{background:var(--brand-grad);}
.cb-btn.is-line{background:linear-gradient(120deg,#06c755,#00a74a); box-shadow:0 10px 26px rgba(6,199,85,.28);}
.cb-btn:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(100,40,234,.32);}
.cb-icon{background:rgba(255,255,255,.18); border-radius:50%;}
.cb-btn.is-tel .cb-icon i{animation:cbWiggle 2.4s ease-in-out infinite;}
.cb-ring{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.7); animation:cbRing 2.4s ease-out infinite;}
@keyframes cbRing{0%{transform:scale(1); opacity:.9} 70%,100%{transform:scale(1.6); opacity:0}}
@keyframes cbWiggle{0%,60%,100%{transform:rotate(0)} 65%{transform:rotate(-16deg)} 70%{transform:rotate(14deg)} 75%{transform:rotate(-10deg)} 80%{transform:rotate(6deg)}}
.cb-text small{opacity:.85;}
.cb-text strong{font-size:20px; letter-spacing:.3px; white-space:nowrap;}

/* รุ่นและราคา */
.hm-models{padding:56px 0; background:radial-gradient(1000px 400px at 10% 0%,rgba(100,40,234,.08),transparent 60%),radial-gradient(800px 400px at 100% 100%,rgba(221,0,0,.06),transparent 60%),#fff;}
.hm-models-head{text-align:center; max-width:760px; margin:0 auto 28px;}
.hm-eyebrow{display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; background:var(--soft); color:var(--brand); font-size:14px; font-weight:500;}
.hm-models-head h2{margin:12px 0 6px; font-size:32px; line-height:1.35; font-weight:600; color:var(--ink); letter-spacing:0;}
.hm-models-head p{margin:0; font-size:17px; line-height:1.7; color:#4b5563;}
.hm-models-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px;}
.hm-model{
	position:relative; display:flex; flex-direction:column; padding:20px; border-radius:20px; background:#fff;
	border:1px solid var(--line); box-shadow:0 6px 20px rgba(31,29,43,.06); color:inherit !important; text-decoration:none !important;
	transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hm-model::after{content:""; position:absolute; left:20px; right:20px; bottom:0; height:3px; border-radius:3px; background:var(--brand-grad); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;}
.hm-model:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(100,40,234,.16); border-color:rgba(100,40,234,.25);}
.hm-model:hover::after{transform:scaleX(1);}
.hm-model-icon{width:44px; height:44px; border-radius:14px; background:var(--soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:12px; transition:transform .3s ease;}
.hm-model:hover .hm-model-icon{transform:rotate(-8deg) scale(1.1);}
.hm-model-badge{position:absolute; top:16px; right:16px; padding:3px 12px; border-radius:999px; background:var(--brand-grad); color:#fff; font-size:12.5px; font-weight:600;}
.hm-model h3{margin:0 0 4px; font-size:19px; line-height:1.4; font-weight:600; color:var(--ink); letter-spacing:0;}
.hm-model p{margin:0 0 14px; font-size:14.5px; line-height:1.6; color:var(--muted);}
.hm-model-price{margin-top:auto; padding-top:12px; border-top:1px dashed var(--line); color:var(--brand-2); line-height:1.2;}
.hm-model-price small{display:block; font-size:12px; color:var(--muted);}
.hm-model-price strong{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;}
.hm-model-price strong.is-ask{font-size:18px;}
.hm-model-price span{font-size:14px;}

/* เผยเมื่อเลื่อนถึง */
/* ซ่อนเฉพาะเมื่อ JS พร้อม (class js-reveal ใส่ใน _header.php และถอดออกเองถ้า js/home.js ไม่ทำงานภายใน 3 วิ) */
.js-reveal [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease var(--d,0ms), transform .6s ease var(--d,0ms), box-shadow .25s ease, border-color .25s ease;}
.js-reveal [data-reveal].is-in{opacity:1; transform:none;}

@media (max-width:991px){ .sc-grid,.cb-grid{grid-template-columns:1fr;} }
@media (max-width:767px){
	.hb-nav{display:none;}
	.hm-mq-item{width:160px; border-radius:12px;}
	.hm-models{padding:40px 0;}
	.hm-models-head h2{font-size:26px;}
	.hm-title{font-size:23px;}
}
@media (prefers-reduced-motion:reduce){
	.hm-marquee-track{animation:none;} .hm-marquee{overflow-x:auto;}
	.hb-slide{transition:none;} .hb.is-multi .hb-slide.is-active img{animation:none;}
	.cb-ring,.cb-btn.is-tel .cb-icon i,.sc-shine{animation:none !important;}
	.js-reveal [data-reveal]{opacity:1; transform:none; transition:none;}
}

/* ===== Footer (_footer.php) ===== */
.ft{position:relative; overflow:hidden; background:#16132a; color:rgba(255,255,255,.72); padding:0 0 calc(18px + env(safe-area-inset-bottom)); font-size:15px; line-height:1.7;}
.ft-glow{position:absolute; inset:-40% -10% auto; height:520px; pointer-events:none;
	background:radial-gradient(500px 260px at 15% 40%,rgba(100,40,234,.45),transparent 70%),radial-gradient(500px 260px at 90% 30%,rgba(221,0,0,.30),transparent 70%);}
.ft .container{position:relative;}
.ft a{color:rgba(255,255,255,.85); text-decoration:none;}
.ft a:hover{color:#fff;}
.ft-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; padding:28px 32px; margin:0 0 44px; transform:translateY(0);
	border-radius:0 0 24px 24px; background:var(--brand-grad); box-shadow:0 18px 40px rgba(0,0,0,.25);}
.ft-cta h2{margin:0 0 4px; color:#fff; font-size:24px; line-height:1.4; font-weight:600; letter-spacing:0;}
.ft-cta p{margin:0; color:rgba(255,255,255,.88); font-size:15px;}
.ft-cta-btns{display:flex; flex-wrap:wrap; gap:10px;}
.ft-btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-size:16px; font-weight:500; transition:transform .15s ease;}
.ft-btn:hover{transform:translateY(-2px);}
.ft .ft-btn.is-light{background:#fff; color:var(--brand);}
.ft .ft-btn.is-line{background:#06c755; color:#fff;}

.ft-grid{display:grid; grid-template-columns:1.3fr 1.2fr .8fr 1.1fr; gap:32px;}
.ft h3{margin:0 0 14px; color:#fff; font-size:17px; font-weight:600; line-height:1.4; letter-spacing:0;}
.ft-logo{font-size:24px; font-weight:700; line-height:1.3; margin-bottom:10px; background:linear-gradient(120deg,#b79cff,#ff7a7a); -webkit-background-clip:text; background-clip:text; color:transparent;}
.ft-brand p{margin:0 0 16px; font-size:14.5px; color:rgba(255,255,255,.65);}
.ft-social{display:flex; gap:10px;}
.ft-social a{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); font-size:17px; transition:background .2s ease, transform .2s ease;}
.ft-social a:hover{background:var(--brand-grad); transform:translateY(-3px);}
.ft-contact,.ft-links{list-style:none; margin:0; padding:0;}
.ft-contact li{display:flex; gap:10px; margin-bottom:10px; align-items:flex-start;}
.ft-contact i{width:18px; margin-top:5px; color:#b79cff; text-align:center; flex:0 0 18px;}
.ft-links li{margin-bottom:8px;}
.ft-links a{display:inline-flex; align-items:center; gap:6px; transition:transform .2s ease;}
.ft-links a::before{content:"\203A"; color:#b79cff;}
.ft-links a:hover{transform:translateX(4px);}
.ft-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.ft-stat{padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06); line-height:1.3;}
.ft-stat strong{display:block; color:#fff; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums;}
.ft-stat span{font-size:12.5px; color:rgba(255,255,255,.6);}
.ft-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);}
.tag-pill{display:inline-block; padding:4px 12px; border-radius:999px; font-size:13px; line-height:1.6; background:rgba(255,255,255,.07); color:rgba(255,255,255,.8) !important; text-decoration:none !important; transition:background .2s ease;}
.tag-pill:hover{background:rgba(100,40,234,.6); color:#fff !important;}
.ft-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); font-size:13.5px; color:rgba(255,255,255,.55);}
.ft-policy{display:flex; flex-wrap:wrap; gap:4px 18px;}
.ft-policy a{color:rgba(255,255,255,.65);}

/* ป้ายแท็กในหน้าอื่น (เช่น หน้าติดต่อเรา) */
.ct-tags .tag-pill{background:var(--soft); color:var(--brand) !important; margin:0 6px 6px 0;}
.ct-tags .tag-pill:hover{background:var(--brand); color:#fff !important;}

@media (max-width:991px){ .ft-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:575px){
	.ft-grid{grid-template-columns:1fr; gap:26px;}
	.ft-cta{padding:22px; margin-bottom:32px; border-radius:0 0 18px 18px;}
	.ft-cta-btns,.ft-btn{width:100%; justify-content:center;}
	.ft-bottom{flex-direction:column;}
}

/* แกลเลอรีหน้าแรก (ใช้สไตล์ .ct-gallery จาก pages.css) */
.hm-gallery{margin:8px 0 6px;}