/* ============================================================
   หน้าสินค้า + หน้า tag  (ใช้คู่กับธีม Porto เดิม)
   สีหลักของเว็บ #0b71e1
   ============================================================ */

:root{
	--vp-primary:#0b71e1;
	--vp-primary-dark:#0959b0;
	--vp-ink:#1f2937;
	--vp-muted:#5b6675;
	--vp-line:#e5e9f0;
	--vp-bg:#f4f6f9;
	--vp-radius:14px;
}

.vp-section{ padding:48px 0; }
.vp-section--tight{ padding:32px 0; }
.vp-bg-soft{ background:var(--vp-bg); }
.vp-bg-white{ background:#fff; }

/* ---------- หัวเรื่อง ---------- */
.vp-head{ max-width:820px; margin:0 0 28px; }
.vp-eyebrow{
	display:inline-block; font-family:'Prompt',sans-serif; font-size:13px; font-weight:500;
	color:var(--vp-primary); background:rgba(11,113,225,.09);
	padding:5px 12px; border-radius:999px; margin-bottom:12px;
}
.vp-h1{
	font-family:'Prompt',sans-serif; font-weight:600; color:var(--vp-ink);
	font-size:clamp(26px,3.4vw,38px); line-height:1.25; margin:0 0 12px;
}
.vp-h2{
	font-family:'Prompt',sans-serif; font-weight:600; color:var(--vp-ink);
	font-size:clamp(20px,2.4vw,27px); line-height:1.3; margin:0 0 12px;
}
.vp-h3{
	font-family:'Prompt',sans-serif; font-weight:500; color:var(--vp-ink);
	font-size:17px; line-height:1.4; margin:0 0 8px;
}
.vp-lead{
	font-family:'Prompt',sans-serif; font-size:16px; line-height:1.85;
	color:var(--vp-muted); margin:0 0 14px;
}

/* ---------- ตารางสินค้า ---------- */
.vp-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
	gap:20px;
}
@media (max-width:575px){
	.vp-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

.vp-card{
	display:flex; flex-direction:column;
	background:#fff; border:1px solid var(--vp-line); border-radius:var(--vp-radius);
	overflow:hidden; text-decoration:none; height:100%;
	transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.vp-card:hover,
.vp-card:focus-visible{
	transform:translateY(-4px);
	box-shadow:0 14px 30px rgba(15,23,42,.13);
	border-color:rgba(11,113,225,.35);
	text-decoration:none;
}
.vp-card:focus-visible{ outline:3px solid rgba(11,113,225,.45); outline-offset:2px; }

.vp-card__media{
	position:relative; display:block; width:100%;
	aspect-ratio:4/3; background:#eef1f6; overflow:hidden;
}
/* สำรองสำหรับเบราว์เซอร์เก่าที่ไม่รู้จัก aspect-ratio */
@supports not (aspect-ratio:4/3){
	.vp-card__media{ height:0; padding-top:75%; }
	.vp-card__media img{ position:absolute; top:0; left:0; }
}
.vp-card__media img{
	width:100%; height:100%; object-fit:cover; display:block;
	transition:transform .35s ease;
}
.vp-card:hover .vp-card__media img{ transform:scale(1.05); }

.vp-card__body{
	padding:13px 14px 15px; display:flex; flex-direction:column; gap:8px; flex:1;
}
.vp-card__title{
	font-family:'Prompt',sans-serif; font-size:15px; font-weight:500; line-height:1.4;
	color:var(--vp-ink); margin:0;
}
.vp-card__cta{
	margin-top:auto; font-family:'Prompt',sans-serif; font-size:13px; font-weight:500;
	color:var(--vp-primary); display:inline-flex; align-items:center; gap:6px;
}
.vp-card__cta i{ transition:transform .22s ease; }
.vp-card:hover .vp-card__cta i{ transform:translateX(4px); }

/* ---------- แถบสรุปคำตอบ (AEO) ---------- */
.vp-answer{
	background:#fff; border:1px solid var(--vp-line); border-left:4px solid var(--vp-primary);
	border-radius:10px; padding:18px 20px; margin:0 0 26px;
}
.vp-answer p{
	font-family:'Prompt',sans-serif; font-size:16px; line-height:1.85; color:var(--vp-ink); margin:0;
}

/* ---------- รายการจุดเด่น ---------- */
.vp-points{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:16px; list-style:none; padding:0; margin:0;
}
.vp-point{
	background:#fff; border:1px solid var(--vp-line); border-radius:var(--vp-radius);
	padding:18px 18px 20px;
}
.vp-point__icon{
	width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
	background:rgba(11,113,225,.1); color:var(--vp-primary); font-size:17px; margin-bottom:12px;
}
.vp-point p{
	font-family:'Prompt',sans-serif; font-size:14.5px; line-height:1.75; color:var(--vp-muted); margin:0;
}

/* ---------- FAQ ---------- */
.vp-faq{ display:flex; flex-direction:column; gap:10px; }
.vp-faq details{
	background:#fff; border:1px solid var(--vp-line); border-radius:12px; overflow:hidden;
	transition:border-color .2s ease, box-shadow .2s ease;
}
.vp-faq details[open]{ border-color:rgba(11,113,225,.4); box-shadow:0 6px 18px rgba(15,23,42,.07); }
.vp-faq summary{
	cursor:pointer; list-style:none; padding:16px 48px 16px 18px; position:relative;
	font-family:'Prompt',sans-serif; font-size:16px; font-weight:500; color:var(--vp-ink); line-height:1.5;
}
.vp-faq summary::-webkit-details-marker{ display:none; }
.vp-faq summary::after{
	content:"\f078"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:13px;
	color:var(--vp-primary); position:absolute; right:18px; top:19px;
	transition:transform .22s ease;
}
.vp-faq details[open] summary::after{ transform:rotate(180deg); }
.vp-faq summary:focus-visible{ outline:3px solid rgba(11,113,225,.45); outline-offset:-3px; }
.vp-faq__a{
	padding:0 18px 18px; font-family:'Prompt',sans-serif;
	font-size:15px; line-height:1.85; color:var(--vp-muted);
}

/* ---------- แถบ CTA ---------- */
.vp-cta{
	background:linear-gradient(135deg,var(--vp-primary),var(--vp-primary-dark));
	border-radius:var(--vp-radius); padding:30px 26px; color:#fff;
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
.vp-cta__text{ flex:1 1 320px; }
.vp-cta__text h2{
	font-family:'Prompt',sans-serif; font-weight:600; font-size:22px; color:#fff; margin:0 0 6px;
}
.vp-cta__text p{
	font-family:'Prompt',sans-serif; font-size:15px; line-height:1.7; color:rgba(255,255,255,.9); margin:0;
}
.vp-cta__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.vp-btn{
	display:inline-flex; align-items:center; gap:8px;
	font-family:'Prompt',sans-serif; font-size:15px; font-weight:500;
	padding:12px 20px; border-radius:999px; text-decoration:none;
	transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.vp-btn:hover{ transform:translateY(-2px); text-decoration:none; }
.vp-btn--white{ background:#fff; color:var(--vp-primary-dark); }
.vp-btn--white:hover{ color:var(--vp-primary-dark); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.vp-btn--line{ background:#06C755; color:#fff; }
.vp-btn--line:hover{ color:#fff; box-shadow:0 8px 20px rgba(6,199,85,.4); }

/* ---------- ป้าย tag ---------- */
.vp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.vp-tag{
	display:inline-block; font-family:'Prompt',sans-serif; font-size:13.5px;
	padding:7px 14px; border-radius:999px; text-decoration:none;
	background:#fff; color:var(--vp-muted); border:1px solid var(--vp-line);
	transition:all .18s ease;
}
.vp-tag:hover{ background:var(--vp-primary); color:#fff; border-color:var(--vp-primary); text-decoration:none; }
.vp-tag--active{ background:var(--vp-primary); color:#fff; border-color:var(--vp-primary); }

@media (prefers-reduced-motion:reduce){
	.vp-card,.vp-card__media img,.vp-btn,.vp-faq details,.vp-card__cta i{
		transition-duration:.01ms !important;
	}
}