/* AVELQUA — Pearl White + Sakura Pink (Responsive) */
:root{
  --pearl:#fbfaf7;
  --pearl2:#f7f5f0;
  --ink:#14181d;
  --muted:#6b7280;
  --stroke:rgba(20,24,29,.10);
  --shadow:0 18px 55px rgba(20,24,29,.10);
  --shadow2:0 10px 30px rgba(20,24,29,.08);
  --sakura:#f7b6c8;
  --sakura2:#ffd3e1;
  --sakura3:#fff0f5;
  --radius:22px;
  --radius2:28px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Kanit","Noto Sans Thai",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(247,182,200,.25), transparent 55%),
    radial-gradient(900px 500px at 80% 15%, rgba(255,211,225,.22), transparent 55%),
    radial-gradient(1100px 700px at 50% 95%, rgba(255,240,245,.55), transparent 60%),
    linear-gradient(180deg, var(--pearl), var(--pearl2));
  overflow-x:hidden;
}

/* กันรูป/ไอคอนล้น (especially inline SVG จาก PHP) */
img{max-width:100%; height:auto}
svg{max-width:100%}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.glass{
  background:rgba(255,255,255,.62);
  border:1px solid var(--stroke);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
  border-radius: var(--radius2);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  padding:.78rem 1.05rem;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.75);
  box-shadow:0 10px 25px rgba(20,24,29,.08);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-weight:600;
}
.btn:hover{transform: translateY(-1px); box-shadow:0 14px 35px rgba(20,24,29,.10); background:rgba(255,255,255,.9)}
.btn.primary{
  background: linear-gradient(135deg, var(--sakura2), var(--sakura));
  border-color: rgba(247,182,200,.55);
}
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .55rem; border-radius:999px;
  background: rgba(247,182,200,.22);
  border:1px solid rgba(247,182,200,.35);
  font-size:.85rem; color:rgba(20,24,29,.75);
}
/* ✅ fix: icon('mochi') เป็น inline SVG (ค่าเริ่มต้นของเบราว์เซอร์จะใหญ่ 300x150) */
.badge svg{width:16px; height:16px; flex:0 0 auto; display:block}

nav{
  position: sticky; top:0; z-index:20;
  border-bottom:1px solid rgba(20,24,29,.06);
  background: rgba(251,250,247,.65);
  backdrop-filter: blur(14px);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:.7rem}
.brand .logo{
  width:42px; height:42px; border-radius:14px;
  background: linear-gradient(135deg, var(--sakura3), var(--sakura));
  border:1px solid rgba(247,182,200,.45);
  display:grid; place-items:center;
  box-shadow: 0 12px 28px rgba(20,24,29,.08);
}
.brand .logo svg{width:26px; height:26px}
.brand .name{font-weight:800; letter-spacing:.14em}
.brand .sub{font-size:.9rem; color:var(--muted); margin-top:-2px}
.navlinks{display:flex; gap:14px; align-items:center}
.navlinks a{font-weight:600; color:rgba(20,24,29,.78); padding:.45rem .6rem; border-radius:999px}
.navlinks a:hover{background: rgba(247,182,200,.18)}
.nav-right{display:flex; gap:10px; align-items:center}

.hero{
  position:relative;
  padding: 36px 0 22px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items:center;
}
.hero h1{
  margin:.4rem 0 0;
  font-size: clamp(2.0rem, 3.8vw, 3.3rem);
  line-height:1.1;
  letter-spacing:.03em;
}
.hero p.lead{
  color: rgba(20,24,29,.74);
  font-size:1.08rem;
  line-height:1.75;
  margin: 12px 0 16px;
}
.hero-card{
  padding: 18px;
  border-radius: var(--radius2);
  position:relative;
  overflow:hidden;
  max-width: 520px;
  justify-self: end;
}
.hero-card:before{
  content:"";
  position:absolute; inset:-60px -80px auto auto;
  width:220px; height:220px;
  background: radial-gradient(circle, rgba(247,182,200,.35), transparent 65%);
  transform: rotate(20deg);
}
.product-shot{
  width:100%;
  border-radius: 20px;
  border:1px solid rgba(20,24,29,.10);
  box-shadow: var(--shadow);
}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.kpis{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.kpi{
  padding:.65rem .85rem;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.62);
  box-shadow:0 10px 25px rgba(20,24,29,.06);
  display:flex; gap:.6rem; align-items:flex-start;
}
.kpi .ic{width:28px; height:28px; border-radius:12px; display:grid; place-items:center;
  background: rgba(247,182,200,.18); border:1px solid rgba(247,182,200,.28);
}
.kpi .ic img{width:18px; height:18px}
.kpi b{display:block}
.kpi span{display:block; color:var(--muted); font-size:.9rem; margin-top:-2px}

.section{padding: 30px 0}
.section h2{margin:0 0 10px; font-size:1.65rem; letter-spacing:.02em}
.section p{margin: 0 0 14px; color: rgba(20,24,29,.72); line-height:1.8}

.grid-3{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
}
.card{
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.64);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.card h3{margin:0 0 6px; font-size:1.15rem}
.card ul{margin:10px 0 0; padding-left:0; list-style:none; display:grid; gap:8px}
.card li{display:flex; gap:10px; align-items:flex-start}
.card li .dot{
  width:26px; height:26px; border-radius:12px; flex:0 0 26px;
  display:grid; place-items:center;
  background: rgba(247,182,200,.18);
  border:1px solid rgba(247,182,200,.30);
}
.card li .dot svg{width:18px; height:18px}

.gallery{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:14px;
}
.gallery .left img{width:100%; height:100%; object-fit:cover; border-radius: var(--radius2); border:1px solid var(--stroke); box-shadow: var(--shadow2)}
.gallery .right{display:grid; gap:14px}
.gallery .right img{width:100%; height: 100%; object-fit:cover; border-radius: var(--radius2); border:1px solid var(--stroke); box-shadow: var(--shadow2)}

.videos{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.video{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid var(--stroke);
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.55);
}
.video iframe{width:100%; height: 315px; border:0; display:block}

.reviews{
  display:grid; gap:14px;
}
.review{
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.66);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.review .top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.review .who{font-weight:700}
.review .time{color:var(--muted); font-size:.9rem}
.review .text{color: rgba(20,24,29,.76); line-height:1.85; margin-top:8px; white-space:pre-wrap}
.review .imgs{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.review .imgs a{display:block; width:140px}
.review .imgs img{width:100%; height:100px; object-fit:cover; border-radius:16px; border:1px solid var(--stroke)}

.footer{
  padding: 26px 0 40px;
  border-top:1px solid rgba(20,24,29,.08);
}
.footer-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
}
.socials{display:flex; flex-wrap:wrap; gap:10px}
.socials a{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem .9rem; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.65);
}
.socials svg{width:18px; height:18px}
.small{color:var(--muted); font-size:.92rem; line-height:1.7}

.notice{
  padding:.85rem 1rem;
  border-radius: 18px;
  background: rgba(255,211,225,.35);
  border:1px solid rgba(247,182,200,.40);
  color: rgba(20,24,29,.78);
}

.form{
  display:grid; gap:10px;
}
.input, textarea{
  width:100%;
  padding:.8rem .95rem;
  border-radius: 16px;
  border:1px solid rgba(20,24,29,.12);
  background: rgba(255,255,255,.75);
  outline:none;
}
textarea{min-height:140px; resize:vertical}
.row-2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.hint{color:var(--muted); font-size:.92rem}
.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.65);
}
.table th, .table td{
  padding: .7rem .75rem;
  border-bottom: 1px solid rgba(20,24,29,.06);
  text-align:left;
  vertical-align:top;
}
.table th{background: rgba(247,182,200,.15); font-weight:800}
.table tr:last-child td{border-bottom:0}

.toast{
  padding: .85rem 1rem;
  border-radius: 18px;
  border:1px solid rgba(20,24,29,.10);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow2);
}

/* Sakura canvas */
#sakura-canvas{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events:none;
  opacity: .95;
}
main{position:relative; z-index:1}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns: 1fr; }
  .hero-card{max-width: 560px; justify-self: stretch; margin: 0 auto; }
  .grid-3{grid-template-columns: 1fr; }
  .gallery{grid-template-columns: 1fr;}
  .videos{grid-template-columns: 1fr;}
  .video iframe{height: 260px}
  .footer-grid{grid-template-columns: 1fr;}
  .navlinks{display:none}
}

#toTop{
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(16,20,24,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 12px 26px rgba(16,20,24,.12);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: .2s ease;
}
#toTop.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ซ่อนปุ่ม toTop เฉพาะหน้า index */
body.page-index #toTop{ display:none !important; }

/* =========================
 * STARBURST SPARKLE (เหมือนดาวแฉกในรูป)
 * วางไว้ท้ายสุดของไฟล์ CSS เท่านั้น
 * ========================= */
:root{
  --sparkle-white: rgba(255,255,255,.95);
  --sparkle-glow1: rgba(255,255,255,.65);
  --sparkle-glow2: rgba(247,182,200,.65); /* sakura glow */
}

/* wrapper */
.sparkle{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border-radius: var(--radius2);
}

/* ให้ประกายเข้ากับรูปโปรดักต์มุม 20px */
.hero-card .sparkle{ border-radius: 20px !important; }

.sparkle > img{
  position: relative;
  z-index: 1;
  display:block;
  width:100%;
  height:auto;
}

/* gallery ครอปเต็มช่อง */
.gallery .sparkle > img{
  height:100%;
  object-fit: cover;
}

/* --- star SVG (data-uri) --- */
.sparkle::before,
.sparkle::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transform: translateZ(0);
  /* glow ให้เห็นบนรูปสว่าง */
  filter:
    drop-shadow(0 0 6px var(--sparkle-glow2))
    drop-shadow(0 0 10px var(--sparkle-glow1));
}

/* ดาวแฉก 1 ไฟล์ (ใช้ซ้ำหลายตำแหน่ง) */
.sparkle{
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='white' stroke-linecap='round'%3E%3Cline x1='50' y1='4' x2='50' y2='96' stroke-width='6'/%3E%3Cline x1='4' y1='50' x2='96' y2='50' stroke-width='6'/%3E%3Cline x1='18' y1='18' x2='82' y2='82' stroke-width='4' opacity='.65'/%3E%3Cline x1='82' y1='18' x2='18' y2='82' stroke-width='4' opacity='.65'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='7' fill='white'/%3E%3C/svg%3E");
}

/* กลุ่มดาวชุดที่ 1 */
.sparkle::before{
  background:
    var(--star) 10% 18%/32px 32px no-repeat,
    var(--star) 86% 22%/24px 24px no-repeat,
    var(--star) 76% 58%/36px 36px no-repeat,
    var(--star) 18% 78%/21px 21px no-repeat;
  animation: starTwinkleA 4.2s ease-in-out infinite;
}

/* กลุ่มดาวชุดที่ 2 (คนละตำแหน่ง + ดีเลย์) */
.sparkle::after{
  background:
    var(--star) 26% 30%/20px 20px no-repeat,
    var(--star) 92% 48%/18px 18px no-repeat,
    var(--star) 64% 82%/28px 28px no-repeat,
    var(--star) 8% 52%/17px 17px no-repeat;
  animation: starTwinkleB 5.6s ease-in-out infinite;
  animation-delay: .7s;
  filter:
    drop-shadow(0 0 7px var(--sparkle-glow1))
    drop-shadow(0 0 14px var(--sparkle-glow2));
}

/* กระพริบให้เห็นชัด (แต่ยังดูหรู) */
@keyframes starTwinkleA{
  0%   {opacity:0; transform:scale(1);}
  12%  {opacity:.85; transform:scale(1.02);}
  26%  {opacity:.18; transform:scale(1);}
  46%  {opacity:.92; transform:scale(1.02);}
  60%  {opacity:.22;}
  100% {opacity:0; transform:scale(1);}
}
@keyframes starTwinkleB{
  0%   {opacity:0; transform:scale(1);}
  18%  {opacity:.70; transform:scale(1.03);}
  34%  {opacity:.14;}
  66%  {opacity:.78; transform:scale(1.02);}
  80%  {opacity:.18;}
  100% {opacity:0; transform:scale(1);}
}

/* ลด motion */
@media (prefers-reduced-motion: reduce){
  .sparkle::before,.sparkle::after{
    animation:none !important;
    opacity:.18 !important;
  }
}