/* ===== MemoBill — สีและฟอนต์ ===== */
:root {
	--mb-ink: #18213f;
	--mb-muted: #4a5675;
	--mb-line: #e3e9f7;
	--mb-bg: #f5f8ff;
	--mb-blue: #2f5bd6;
	--mb-purple: #7a5cf0;
	--mb-green: #1f9d63;
	--mb-cta: #0a8a3e;
	--mb-head: 'Noto Sans Thai Looped', 'Sarabun', sans-serif;
	--mb-body: 'Sarabun', sans-serif;
}
:root:root {
	--theme-font-family: var(--mb-body);
	--theme-headings-color: var(--mb-ink);
	--theme-text-color: #2b3554;
	--theme-link-initial-color: var(--mb-blue);
	--theme-link-hover-color: #1d3f9e;
}
body { font-family: var(--mb-body); background-color: var(--mb-bg); }
h1, h2, h3, h4, .mb-head, .site-title { font-family: var(--mb-head) !important; letter-spacing: 0; }
.editor-styles-wrapper { font-family: var(--mb-body); background: var(--mb-bg); color: #2b3554; }

/* ===== ส่วนกลาง ===== */
.mb-section { padding-top: 72px; padding-bottom: 72px; }
.mb-section.mb-tight-top { padding-top: 24px; }
.mb-eyebrow { color: var(--mb-purple); font-weight: 700; font-size: 15px; margin-bottom: 6px !important; }
.mb-h2 { font-weight: 800 !important; font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.3 !important; margin-top: 0 !important; margin-bottom: 32px !important; }
.mb-center { text-align: center; }
.mb-muted { color: var(--mb-muted); }

/* ===== ปุ่ม ===== */
.wp-block-button.mb-btn-line .wp-block-button__link,
.mb-btn-line > a {
	background: var(--mb-cta) !important; color: #fff !important; border-radius: 14px !important;
	font-weight: 700; font-size: 18px; padding: 14px 26px !important; min-height: 52px;
	display: inline-flex; align-items: center; gap: 10px; border: 0;
}
.wp-block-button.mb-btn-line .wp-block-button__link:hover { background: #087133 !important; }
.wp-block-button.mb-btn-ghost .wp-block-button__link {
	background: #fff !important; color: var(--mb-ink) !important; border: 1px solid #d4ddf2 !important;
	border-radius: 14px !important; font-weight: 700; font-size: 18px; padding: 14px 24px !important; min-height: 52px;
}
.wp-block-button.mb-btn-white .wp-block-button__link {
	background: #fff !important; color: #0a6b31 !important; border-radius: 14px !important; font-weight: 800; font-size: 18px; padding: 14px 26px !important;
}

/* ===== หัวหน้า (Hero) ===== */
.mb-hero {
	padding-top: 64px; padding-bottom: 72px;
	background:
		radial-gradient(1200px 500px at 85% 10%, #e6ddff 0%, rgba(230, 221, 255, 0) 60%),
		radial-gradient(900px 500px at 0% 0%, #dbe8ff 0%, rgba(219, 232, 255, 0) 60%);
}
.mb-badge {
	display: inline-flex !important; align-items: center; gap: 8px; background: #fff; border: 1px solid #dfe6f7;
	border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; color: #3c4766;
}
.mb-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mb-green); }
.mb-hero-title { font-weight: 800 !important; font-size: clamp(36px, 5vw, 58px) !important; line-height: 1.25 !important; margin: 18px 0 16px !important; }
.mb-hero-title strong { color: var(--mb-blue); font-weight: 800; }
.mb-lead { font-size: 19px; color: #3c4766; max-width: 560px; }
.mb-checks { list-style: none; padding: 0 !important; margin: 22px 0 0 !important; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--mb-muted); }
.mb-checks li { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; }
.mb-checks li::before, .mb-ticks li::before {
	content: ""; width: 18px; height: 18px; flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d63' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mb-hero-art { position: relative; max-width: 420px; margin-left: auto; margin-right: auto; }
.mb-hero-art .mb-mascot img { border-radius: 24px; box-shadow: 0 20px 50px rgba(70, 90, 180, .18); width: 78%; }
.mb-hero-art .mb-chat { margin: -90px 0 0 auto !important; width: 62%; }
.mb-hero-art .mb-chat img { border-radius: 22px; border: 6px solid #fff; box-shadow: 0 24px 60px rgba(24, 33, 63, .25); width: 100%; }

/* ===== การ์ดจุดเด่น ===== */
.mb-cards { gap: 20px !important; }
.mb-card { background: #fff; border: 1px solid var(--mb-line); border-radius: 22px; padding: 28px !important; }
.mb-card h3 { font-size: 22px !important; margin: 18px 0 8px !important; }
.mb-card p { margin: 0; color: var(--mb-muted); }
.mb-icon { width: 52px; height: 52px; border-radius: 16px; display: block; background-position: center; background-repeat: no-repeat; background-size: 26px; margin: 0 !important; }
.mb-icon-lines { background-color: #e8efff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5bd6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h13'/%3E%3C/svg%3E"); }
.mb-icon-shop { background-color: #efe9ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5cf0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-4 7 4v13M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.mb-icon-clip { background-color: #e3f6ec; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.5l-8.5 8.5a5 5 0 0 1-7-7L14 5.5a3.5 3.5 0 0 1 5 5L10.5 19'/%3E%3C/svg%3E"); }

/* ===== ความสามารถอื่น (ตารางเล็ก) ===== */
.mb-minis { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; }
.mb-mini { background: #fff; border: 1px solid var(--mb-line); border-radius: 16px; padding: 18px 18px 18px 52px !important; position: relative; }
.mb-mini::before {
	content: ""; position: absolute; left: 18px; top: 21px; width: 22px; height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5bd6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mb-mini h3 { font-family: var(--mb-body) !important; font-size: 17px !important; font-weight: 700 !important; margin: 0 0 2px !important; }
.mb-mini p { margin: 0; font-size: 15px; color: var(--mb-muted); }

/* ===== 3 ขั้นตอน ===== */
.mb-step { border-radius: 22px; padding: 26px !important; border: 1px solid #dbe5fb; }
.mb-step-1 { background: linear-gradient(180deg, #eaf1ff, #fff); }
.mb-step-2 { background: linear-gradient(180deg, #f0eaff, #fff); border-color: #e3dbfb; }
.mb-step-3 { background: linear-gradient(180deg, #e6f7ee, #fff); border-color: #d3efdf; }
.mb-step-no { font-family: var(--mb-head); font-weight: 800; font-size: 40px; line-height: 1; margin: 0 !important; }
.mb-step-1 .mb-step-no { color: var(--mb-blue); } .mb-step-2 .mb-step-no { color: var(--mb-purple); } .mb-step-3 .mb-step-no { color: var(--mb-green); }
.mb-step h3 { font-size: 21px !important; margin: 12px 0 6px !important; }
.mb-step p { margin: 0; color: var(--mb-muted); }

/* ===== ราคา (shortcode [memobill_pricing]) ===== */
.mb-pricing-wrap { background: #fff; border-top: 1px solid var(--mb-line); border-bottom: 1px solid var(--mb-line); }

/* ===== คำถามที่พบบ่อย ===== */
.mb-faq .wp-block-details { background: #fff; border: 1px solid var(--mb-line); border-radius: 16px; padding: 18px 22px; margin: 0 0 12px !important; }
.mb-faq .wp-block-details summary { font-weight: 700; font-size: 18px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.mb-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.mb-faq .wp-block-details summary::after {
	content: ""; width: 20px; height: 20px; flex: none; margin-top: 5px; transition: transform .2s;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mb-faq .wp-block-details[open] summary::after { transform: rotate(180deg); }
.mb-faq .wp-block-details p { margin: 10px 0 0; color: var(--mb-muted); }

/* ===== บทความล่าสุด (บล็อก Latest Posts) ===== */
.mb-latest.wp-block-latest-posts { padding: 0; margin: 0; gap: 18px; }
.mb-latest.wp-block-latest-posts.is-grid li { background: #fff; border: 1px solid var(--mb-line); border-radius: 20px; overflow: hidden; margin: 0 !important; padding: 0 0 18px; }
.mb-latest .wp-block-latest-posts__featured-image { margin: 0 0 14px; }
.mb-latest .wp-block-latest-posts__featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mb-latest .wp-block-latest-posts__post-title { display: block; padding: 0 18px; font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--mb-ink); text-decoration: none; }
.mb-latest .wp-block-latest-posts__post-title:hover { color: var(--mb-blue); }
@media (max-width: 781px) { .mb-latest.wp-block-latest-posts.is-grid li { width: 100% !important; } }

/* ===== แถบปิดท้าย ===== */
.mb-cta { background: linear-gradient(120deg, #2f5bd6, #7a5cf0); color: #fff; border-radius: 28px; padding: 44px !important; }
.mb-cta h2 { color: #fff !important; font-weight: 800 !important; font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.3 !important; margin: 0 0 10px !important; }
.mb-cta p { color: #e8ecff; font-size: 18px; }
.mb-qr img { background: #fff; border-radius: 18px; padding: 10px; width: 168px; height: 168px; object-fit: contain; }
.mb-qr figcaption { color: #e8ecff !important; text-align: center; font-size: 14px; }

/* ===== มือถือ ===== */
@media (max-width: 781px) {
	.mb-section { padding-top: 48px; padding-bottom: 48px; }
	.mb-hero { padding-top: 36px; }
	.mb-hero-art { margin-top: 12px; }
	.mb-cta { padding: 28px !important; border-radius: 22px; }
}

/* ===== หน้าแรก: เอาระยะว่างของ Blocksy เหนือ/ใต้เนื้อหาออก ให้ hero ชิดหัวเว็บ ===== */
body.home [data-vertical-spacing],
body.home .ct-container-full { --theme-content-vertical-spacing: 0px; padding-top: 0 !important; padding-bottom: 0 !important; }
body.home .entry-content > .alignfull:first-child { margin-top: 0 !important; }
body.home .hero-section, body.home .page-title { display: none; }

/* ===== v1.0.2: จัดความกว้างทุกส่วนให้ตรงกัน (Blocksy ไม่ใช้ contentSize ของบล็อก Group) ===== */
.entry-content .mb-hero, .entry-content .mb-section { padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.entry-content .mb-hero > *, .entry-content .mb-section > * {
	max-width: 1160px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
}
.entry-content .mb-faq > * { max-width: 860px !important; }
.mb-section { padding-top: 56px; padding-bottom: 56px; }
.mb-hero { padding-bottom: 40px; }

/* ความสามารถอื่น: 3 คอลัมน์ (6 ข้อ = 2 แถวพอดี) */
.mb-minis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1000px) { .mb-minis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .mb-minis { grid-template-columns: 1fr !important; } }

/* คำถามที่พบบ่อย: กล่องพอดีกับคำถาม ไม่มีช่องว่างล่าง */
.mb-faq .wp-block-details { padding: 0 !important; }
.mb-faq .wp-block-details > summary { padding: 18px 22px; margin: 0 !important; line-height: 1.5; }
.mb-faq .wp-block-details > :not(summary) { margin: 0 !important; padding: 0 22px 18px; }

/* ===== v1.0.3 ===== */
/* ระยะห่างแถวของการ์ดความสามารถให้เท่ากัน (WordPress ใส่ margin บนให้ลูกตัวที่ 2 เป็นต้นไป) */
.mb-minis > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.mb-mini > :last-child { margin-bottom: 0 !important; }
/* ซ่อนส่วน "บทความ" จนกว่าจะมีบทความแรก */
#blog:not(:has(.wp-block-latest-posts li)) { display: none; }