/* PM Programing — ส่วนเสริมของ style.css สำหรับคอมโพเนนต์ใหม่ (MVC 2026) */

/* ---------- general ---------- */
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn-line-solid { background: #06C755 !important; color: #fff !important; border-color: #06C755 !important; }
.product-title { font-size: 1.8rem; margin: 0; line-height: 1.3; }
.product-name a { color: inherit; text-decoration: none; }
.product-name a:hover { color: var(--blue-600); }
.product-cover { display: block; height: 200px; overflow: hidden; border-radius: 12px 12px 0 0; margin: -25px -25px 20px; width: calc(100% + 50px); }
.product-cover img, .product-cover picture { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.product-card:hover .product-cover img { transform: scale(1.04); }
.product-meta { font-size: .85rem; color: var(--gray-500); }
.product-description { color: var(--gray-700); line-height: 1.8; }
.answer-summary { border-left: 4px solid var(--blue-500); padding-left: 14px; }
.plan-card-mini { padding: 16px 12px; text-align: center; }
.plan-card-mini .plan-name { font-size: .85rem; }
.plan-card-mini .plan-price { font-size: 1.3rem; }
.plan-card-mini .plan-popular-badge { font-size: .65rem; padding: 2px 10px; }
.plan-cloud-fee { margin-top: 8px; padding: 8px 12px; background: #EFF6FF; color: #1E3A5F; border-radius: 8px; font-size: .88rem; font-weight: 600; display: inline-block; }
.plan-excluded { color: var(--gray-400); }
.plan-excluded i { color: var(--gray-400) !important; }
h3.plan-name { margin: 0; }

/* ---------- gallery ---------- */
.product-gallery { background: #f8f9fa; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.gallery-hint { font-size: .55em; color: #888; font-family: sans-serif; font-weight: 400; }
.gallery-thumb { display: block; cursor: zoom-in; }
.gallery-thumb img { height: 180px; object-fit: cover; border: 1px solid #eee; }
.gallery-main img { height: 380px; }
@media (max-width: 767px) { .gallery-main img { height: 220px; } .gallery-thumb img { height: 130px; } }
.product-video-head { display: flex; align-items: center; gap: 8px; font-family: 'Prompt', sans-serif; font-weight: 600; color: var(--blue-900); }

/* ---------- FAQ (AEO) ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 16px 48px 16px 20px; font-weight: 600; color: var(--blue-900); list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--blue-600); }
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] summary { border-bottom: 1px solid var(--gray-100); }
.faq-answer { padding: 14px 20px 18px; color: var(--gray-700); line-height: 1.8; }

/* ---------- article ---------- */
.article-header-bg { background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 40px 0 50px; border-bottom: 1px solid #dee2e6; }
.article-title { font-family: 'Prompt', sans-serif; color: var(--blue-900); }
.article-summary { background: #EFF6FF; border-left: 4px solid var(--blue-600); border-radius: 12px; padding: 18px 22px; margin-bottom: 28px; color: var(--gray-700); line-height: 1.8; }
.article-summary-title { font-weight: 700; color: var(--blue-800); margin-bottom: 6px; }
.article-toc { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 18px 22px; margin-bottom: 32px; }
.article-toc-title { font-weight: 700; color: var(--blue-900); margin-bottom: 8px; }
.article-toc ol { margin: 0; padding-left: 20px; }
.article-toc li { margin: 4px 0; }
.article-toc .toc-l3 { margin-left: 18px; list-style: circle; font-size: .95em; }
.article-content { font-size: 1.06rem; line-height: 1.9; color: #1f2937; overflow-wrap: anywhere; }
.article-content h2, .article-content h3 { scroll-margin-top: 90px; margin-top: 1.8em; color: var(--blue-900); }
.article-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 20px 0; cursor: zoom-in; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.article-content td, .article-content th { border: 1px solid var(--gray-200); padding: 8px; }
.article-card-cover { display: block; height: 200px; overflow: hidden; }
.article-card-cover img, .article-card-cover picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card { border-radius: 20px; transition: transform .3s ease; }
.article-card:hover { transform: translateY(-4px); }

/* ---------- home clients ---------- */
.clients-strip { background: #fff; }
.clients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px; align-items: center; }
.client-item { display: flex; align-items: center; justify-content: center; height: 80px; padding: 10px; border: 1px solid var(--gray-100); border-radius: 12px; background: #fff; }
.client-item img { max-height: 60px; width: auto; object-fit: contain; filter: grayscale(30%); }
.client-item span { font-size: .85rem; color: var(--gray-500); text-align: center; }

/* ---------- pricing table ---------- */
.price-table-wrap { background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); padding: 6px; }
.price-table th[scope=row] a { color: var(--blue-900); text-decoration: none; }

/* ---------- portfolio ---------- */
.demo-link-card { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 14px 18px; border: 1px solid var(--gray-200); border-radius: 12px; background: #fff; }
.demo-link-card a { text-decoration: none; }
.custom-dev-box { background: var(--blue-50); border: 1px dashed var(--blue-300); }

/* ---------- about ---------- */
.about-hero { background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%); padding: 50px 0 80px; border-bottom: 1px solid var(--blue-100); }
.about-hero h1 { font-family: 'Prompt', sans-serif; color: var(--blue-900); }
.about-hero .breadcrumb { justify-content: center; }
.logo-img { max-width: 450px; width: 100%; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.05)); }
.value-card { background: #fff; border-radius: 24px; padding: 40px; border: 1px solid var(--blue-100); box-shadow: var(--shadow-lg); margin-top: -50px; position: relative; z-index: 10; }
.trust-card { height: 100%; padding: 30px; border-radius: 20px; background: #fff; border: 1px solid var(--blue-50); transition: all .3s ease; }
.trust-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.trust-icon { width: 60px; height: 60px; background: var(--blue-50); color: var(--blue-600); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; }
.highlight-text { color: var(--blue-600); font-weight: 700; }
.about-stat { background: var(--blue-50); border-radius: 16px; padding: 18px 10px; }
.about-stat-num { font-family: 'Prompt', sans-serif; font-weight: 800; font-size: 1.8rem; color: var(--blue-700); }

/* ---------- contact ---------- */
.contact-big-btn { display: flex; align-items: center; gap: 14px; border-radius: var(--radius-lg) !important; padding: 18px 24px !important; text-align: left; }
.contact-big-btn > i { font-size: 1.6rem; }
.footer-contact-list a { color: inherit; text-decoration: none; }
.footer-contact-list a:hover { color: #fff; text-decoration: underline; }
.footer-heading.h6 { font-size: 1rem; }

/* ---------- search / errors ---------- */
.search-form { display: flex; gap: 8px; max-width: 640px; }
.error-code { font-family: 'Prompt', sans-serif; font-size: 5rem; font-weight: 800; color: var(--blue-200); line-height: 1; margin-bottom: 10px; }

/* ---------- lead form ---------- */
.lead-form-msg.ok { color: #065F46; background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 10px; padding: 12px 14px; }
.lead-form-msg.err { color: #991B1B; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; padding: 12px 14px; }

/* accessibility: focus ที่มองเห็นได้ */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }