/*
Theme Name: paiyaadd
Theme URI: https://paiyaadd.com
Author: paiyaadd
Author URI: https://paiyaadd.com
Description: WordPress Theme สำหรับเว็บรีวิวสินค้า Affiliate ตลาดไทย รองรับ Shopee / Lazada / TikTok Shop | SEO-optimized | Mobile First | PDPA Ready
Version: 2.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary — สงวนสิทธิ์ทุกประการ ห้ามแจกจ่าย คัดลอก หรือนำไปขายต่อโดยไม่ได้รับอนุญาต
License URI: https://paiyaadd.com/license/
Text Domain: paiyaadd
Tags: blog, affiliate, review, thai, seo, shopee, lazada, one-column, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===========================
   CSS Custom Properties
=========================== */
:root {
  --color-primary:       #4f46e5; /* indigo-600 */
  --color-primary-dark:  #3730a3; /* indigo-800 */
  --color-primary-light: #e0e7ff; /* indigo-100 */
  --color-accent:        #10b981; /* emerald-500 */
  --color-accent-dark:   #059669; /* emerald-600 */
  --color-accent-light:  #d1fae5; /* emerald-100 */
  --color-shopee:        #f97316; /* orange-500 */
  --color-lazada:        #2563eb; /* blue-600 */
  --color-text:          #1e293b; /* slate-800 */
  --color-text-muted:    #64748b; /* slate-500 */
  --color-bg:            #f8fafc; /* slate-50 */
  --color-surface:       #ffffff;
  --color-border:        #e2e8f0; /* slate-200 */
  --font-main:           'Prompt', 'Sarabun', sans-serif;
  --radius:              12px;
  --radius-sm:           8px;
  --shadow:              0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:           0 8px 32px rgba(0,0,0,.12);
  --max-width:           1160px;
  --sidebar-width:       300px;
  --transition:          0.2s ease;
}

/* ===========================
   Reset & Base
=========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* ป้องกัน WP inject width/height ทำให้ล้น — ครอบทุก selector */
img[width], img[height] { max-width: 100% !important; height: auto !important; }
img[width="930"], img[width="1200"], img[width="768"], img[width="1024"] {
  width: 100% !important; max-width: 100% !important; height: auto !important;
}
.entry-content img,
.single-hero-img img,
img.wp-post-image,
img[class*="attachment-"],
img[class*="size-"] {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }

/* ===========================
   Typography
=========================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: .6em;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1.2em; }
ul, ol { padding-left: 1.5em; margin-bottom: 1.2em; }
li { margin-bottom: .4em; }

.entry-content { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content iframe, .entry-content video, .entry-content embed { max-width: 100%; }
.entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.entry-content h2 { border-left: 4px solid var(--color-primary); padding-left: 12px; margin-top: 2em; }
.entry-content h3 { color: var(--color-primary-dark); margin-top: 1.5em; }

/* ===========================
   Layout
=========================== */
.site-container {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.content-area {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: 32px;
  padding: 32px 0;
}

@media (max-width: 900px) {
  .content-area { grid-template-columns: 1fr; }
  .widget-area { order: 2; }
}

/* ===========================
   Header
=========================== */
.site-header {
  background: var(--color-primary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(79,70,229,.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 16px;
}

.site-logo a {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
}
.site-logo span { color: var(--color-accent); }

.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 4px;
}

.site-nav a {
  color: rgba(255,255,255,.85);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9rem;
  transition: background var(--transition), color var(--transition);
}
.site-nav a:hover,
.site-nav .current-menu-item > a {
  background: rgba(255,255,255,.15);
  color: #fff;
}

.header-cta {
  background: var(--color-accent);
  color: #fff;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .875rem;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}
.header-cta:hover { background: var(--color-accent-dark); transform: translateY(-1px); color: #fff; }

/* Mobile Nav Toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 1.5rem;
  padding: 4px;
}

@media (max-width: 768px) {
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-primary-dark); padding: 12px; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
}

/* ===========================
   Hero Banner (Homepage)
=========================== */
.hero-banner {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, #6366f1 100%);
  color: #fff;
  padding: 64px 20px;
  text-align: center;
}
.hero-banner h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); }
.hero-banner p { color: rgba(255,255,255,.85); max-width: 640px; margin: 16px auto 28px; font-size: 1.1rem; }
.hero-search { display: flex; max-width: 480px; margin: 0 auto; gap: 0; }
.hero-search input {
  flex: 1;
  padding: 14px 18px;
  border: none;
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--font-main);
  font-size: 1rem;
  outline: none;
}
.hero-search button {
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  transition: background var(--transition);
  font-family: var(--font-main);
}
.hero-search button:hover { background: var(--color-accent-dark); }

/* ===========================
   Post Cards (Archive/Home)
=========================== */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.post-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.post-card-thumb { aspect-ratio: 16/9; overflow: hidden; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-card:hover .post-card-thumb img { transform: scale(1.05); }

.post-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.post-card-cat {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.post-card-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.post-card-title a { color: var(--color-text); }
.post-card-title a:hover { color: var(--color-primary); }
.post-card-excerpt { font-size: .875rem; color: var(--color-text-muted); flex: 1; margin-bottom: 16px; }

.post-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

.star-rating { color: #f59e0b; font-size: .85rem; }

/* ===========================
   Single Post / Review Page
=========================== */
.single-post-header {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.post-meta {
  display: flex;
  gap: 16px;
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.post-meta .badge {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 2px 10px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .75rem;
}

/* Review Score Box */
.review-score-box {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 24px;
  margin: 28px 0;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.score-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex-shrink: 0;
}
.score-circle .score-num { font-size: 1.75rem; line-height: 1; }
.score-circle .score-max { font-size: .7rem; opacity: .8; }
.score-details { flex: 1; min-width: 0; overflow: hidden; }
.score-details h4 { color: var(--color-primary-dark); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-bars { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.score-bar-item { display: flex; align-items: center; gap: 8px; font-size: .8rem; min-width: 0; }
.score-bar-item span:first-child { width: 70px; min-width: 50px; color: var(--color-text-muted); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-bar-track { flex: 1; min-width: 0; height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; max-width: 100%; }
.score-bar-fill { height: 100%; background: var(--color-primary); border-radius: 4px; }

/* Pros/Cons Box */
.pros-cons-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}
@media (max-width: 600px) { .pros-cons-box { grid-template-columns: 1fr; } }

.pros-box, .cons-box {
  border-radius: var(--radius-sm);
  padding: 20px;
}
.pros-box {
  background: #f0fdf4;
  border-left: 4px solid var(--color-accent);
}
.cons-box {
  background: #f8fafc;
  border-left: 4px solid #94a3b8;
}
.pros-box h4 { color: var(--color-accent-dark); }
.cons-box h4 { color: #475569; }
.pros-box ul, .cons-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pros-box li,
.cons-box li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .9rem;
  line-height: 1.6;
  width: 100%;
}
.pros-box li::before {
  content: '💡';
  flex-shrink: 0;
  margin-top: 1px;
}
.cons-box li::before {
  content: '🔍';
  flex-shrink: 0;
  margin-top: 1px;
}

/* Comparison Table */
.compare-table-wrap { overflow-x: auto; margin: 28px 0; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  font-size: .9rem;
}
.compare-table th {
  background: var(--color-primary);
  color: #fff;
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
}
.compare-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: var(--color-bg); }
.compare-table .btn-shopee {
  background: var(--color-shopee);
  color: #fff;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .8rem;
  display: inline-block;
  transition: background var(--transition);
}
.compare-table .btn-shopee:hover { background: #ea6c00; color: #fff; }
.compare-table .btn-lazada {
  background: var(--color-lazada);
  color: #fff;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .8rem;
  display: inline-block;
  margin-left: 6px;
  transition: background var(--transition);
}
.compare-table .btn-lazada:hover { background: #1d4ed8; color: #fff; }

/* ===========================
   Affiliate CTA Buttons
=========================== */
.aff-cta-wrap {
  margin: 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.btn-cta-shopee {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-shopee);
  color: #fff;
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(249,115,22,.4);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.btn-cta-shopee:hover {
  background: #ea6c00;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249,115,22,.5);
  color: #fff;
}

.btn-cta-lazada {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-lazada);
  color: #fff;
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(37,99,235,.4);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.btn-cta-lazada:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,.5);
  color: #fff;
}

.aff-disclaimer {
  font-size: .75rem;
  color: var(--color-text-muted);
  margin-top: 10px;
}

/* In-content text link affiliate */
.aff-inline-link {
  color: var(--color-shopee);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aff-inline-link:hover { color: #ea6c00; }

/* ===========================
   Info Box (Tip / Warning / Note)
=========================== */
.info-box {
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 24px 0;
  display: flex;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}
.info-box-icon { font-size: 1.4rem; flex-shrink: 0; }
.info-box p { margin: 0; font-size: .9rem; }
.info-box.tip { background: var(--color-accent-light); border-left: 4px solid var(--color-accent); }
.info-box.warning { background: #fffbeb; border-left: 4px solid #f59e0b; }
.info-box.info { background: var(--color-primary-light); border-left: 4px solid var(--color-primary); }

/* ===========================
   Sidebar Widgets
=========================== */
.widget-area { display: flex; flex-direction: column; gap: 24px; }

.widget-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 20px;
  box-shadow: var(--shadow);
}
.widget-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Sticky Sidebar CTA Widget */
.widget-sticky-cta {
  background: linear-gradient(135deg, var(--color-primary), #6366f1);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  position: sticky;
  top: 80px;
}
.widget-sticky-cta h3 { color: #fff; font-size: 1rem; margin-bottom: 8px; }
.widget-sticky-cta p { font-size: .85rem; opacity: .9; margin-bottom: 16px; }
.widget-sticky-cta .btn-cta-shopee { font-size: .9rem; padding: 12px 24px; }
.widget-sticky-cta .aff-cta-wrap {
  flex-direction: column;
  width: 100%;
}
.widget-sticky-cta .btn-cta-shopee,
.widget-sticky-cta .btn-cta-lazada,
.widget-sticky-cta .btn-cta-tiktok {
  width: 100%;
  justify-content: center;
}

/* Recent Posts Widget */
.widget-recent-posts li { list-style: none; padding: 10px 0; border-bottom: 1px solid var(--color-border); display: flex; gap: 12px; }
.widget-recent-posts li:last-child { border-bottom: none; padding-bottom: 0; }
.widget-recent-posts img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.widget-recent-posts .post-info a { font-size: .85rem; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.widget-recent-posts .post-info a:hover { color: var(--color-primary); }
.widget-recent-posts .post-date { font-size: .75rem; color: var(--color-text-muted); margin-top: 4px; display: block; }

/* ===========================
   Breadcrumbs
=========================== */
.breadcrumb {
  padding: 12px 0;
  font-size: .8rem;
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb span { margin: 0 6px; }

/* ===========================
   Pagination
=========================== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .9rem;
  transition: background var(--transition), color var(--transition);
}
.pagination a { background: #fff; border: 1px solid var(--color-border); color: var(--color-text); }
.pagination a:hover, .pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* Prev/Next arrow buttons */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
  font-size: 1.1rem;
  font-weight: 900;
  min-width: 40px;
  padding: 0 12px;
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.pagination .prev.page-numbers:hover,
.pagination .next.page-numbers:hover {
  background: var(--color-primary-dark, #ea6a00);
  border-color: var(--color-primary-dark, #ea6a00);
}

/* ===========================
   Footer
=========================== */
.site-footer {
  background: #1e293b;
  color: rgba(255,255,255,.7);
  padding: 48px 0 24px;
  margin-top: 0;
}
.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand .site-name { font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 8px; }
.footer-brand .site-name span { color: var(--color-accent); }
.footer-brand p { font-size: .85rem; line-height: 1.6; }
.footer-heading { font-weight: 700; color: #fff; margin-bottom: 14px; font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,.65); font-size: .875rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--color-accent); }
.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 20px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  flex-wrap: wrap;
  gap: 8px;
}

/* ===========================
   Table of Contents (TOC)
=========================== */
.toc-box {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
}
.toc-box h4 { color: var(--color-primary-dark); margin-bottom: 12px; font-size: 1rem; }
.toc-box ol { margin: 0; padding-left: 1.5em; }
.toc-box li { margin-bottom: 6px; }
.toc-box a { color: var(--color-primary-dark); font-size: .875rem; }
.toc-box a:hover { text-decoration: underline; }

/* ===========================
   Comments
=========================== */
.comments-area {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 28px;
  margin-top: 28px;
  box-shadow: var(--shadow);
}
.comment-list { list-style: none; padding: 0; }
.comment-body { background: var(--color-bg); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 16px; }
.comment-author { font-weight: 700; color: var(--color-primary); }
.comment-meta { font-size: .8rem; color: var(--color-text-muted); margin-bottom: 8px; }

.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: .9rem;
  margin-bottom: 12px;
  outline: none;
  transition: border-color var(--transition);
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-primary); }

.comment-form button[type="submit"] {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  font-family: var(--font-main);
  transition: background var(--transition);
}
.comment-form button[type="submit"]:hover { background: var(--color-primary-dark); }

/* ===========================
   Utility Classes
=========================== */
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===========================
   Social Buttons
=========================== */
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--transition), transform var(--transition);
}
.social-btn:hover { opacity: .85; transform: translateY(-1px); }

.social-tiktok    { background: #010101; color: #fff !important; }
.social-facebook  { background: #1877f2; color: #fff !important; }
.social-youtube   { background: #ff0000; color: #fff !important; }
.social-instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff !important; }

/* ===========================
   TikTok Affiliate CTA Button
=========================== */
.btn-cta-tiktok {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #010101;
  color: #fff;
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.btn-cta-tiktok:hover {
  background: #2d2d2d;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  color: #fff;
}

/* TikTok badge in compare table */
.btn-tiktok {
  background: #010101;
  color: #fff;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .8rem;
  display: inline-block;
  margin-left: 6px;
  transition: background var(--transition);
}
.btn-tiktok:hover { background: #2d2d2d; color: #fff; }

/* ===========================
   Price Comparison Box
=========================== */
.price-compare-box {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 32px 0;
  box-shadow: var(--shadow-lg);
}
.price-compare-header {
  background: var(--color-primary);
  color: #fff;
  padding: 14px 20px;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-compare-icon { font-size: 1.3rem; }
.price-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0;
  background: var(--color-bg);
}
.price-compare-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  position: relative;
  gap: 10px;
  transition: background var(--transition);
}
.price-compare-card:last-child { border-right: none; }
.price-compare-card--best {
  background: var(--color-accent-light);
  border-top: 3px solid var(--color-accent);
}
.price-compare-badge {
  background: var(--color-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 50px;
  letter-spacing: .3px;
}
.price-compare-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: .875rem;
  color: var(--color-text);
}
.price-compare-price {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-accent-dark);
  line-height: 1;
}
.price-compare-price--check {
  font-size: 1rem;
  color: var(--color-primary);
}
.price-compare-note {
  text-align: center;
  font-size: .75rem;
  color: var(--color-text-muted);
  padding: 10px 16px;
  margin: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 600px) {
  .price-compare-grid { grid-template-columns: 1fr; }
  .price-compare-card { border-right: none; border-bottom: 1px solid var(--color-border); }
  .price-compare-card:last-child { border-bottom: none; }
  /* ป้องกันปุ่มใน card ล้น */
  .price-compare-card a { width: 100%; text-align: center; justify-content: center; }
}

/* ===========================
   Related Posts
=========================== */
.related-posts {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid var(--color-border);
}
.related-posts__title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--color-primary-dark);
}
.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.related-post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow);
}
.related-post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}
.related-post-card__thumb { aspect-ratio: 16/9; overflow: hidden; }
.related-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.related-post-card:hover .related-post-card__thumb img { transform: scale(1.06); }
.related-post-card__thumb--placeholder {
  aspect-ratio: 16/9;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.related-post-card__body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.related-post-card__cat {
  font-size: .7rem;
  font-weight: 700;
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 2px 8px;
  border-radius: 50px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.related-post-card__title {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-post-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  gap: 4px;
}

/* ===========================
   Full-width layout (no sidebar)
=========================== */
.content-area--full {
  overflow-x: hidden;
  grid-template-columns: 1fr !important;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════
   FRONT PAGE – HERO
════════════════════════════════════════ */
.fp-hero {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, #6366f1 100%);
  position: relative;
  overflow: hidden;
  padding: 72px 20px 80px;
  color: #fff;
}
.fp-hero__bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.fp-hero__shape {
  position: absolute;
  border-radius: 50%;
  opacity: .08;
  background: #fff;
}
.fp-hero__shape--1 { width: 420px; height: 420px; top: -120px; right: -80px; }
.fp-hero__shape--2 { width: 220px; height: 220px; bottom: -60px; left: 10%; }
.fp-hero__shape--3 { width: 120px; height: 120px; top: 30%; right: 25%; }

.fp-hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) {
  .fp-hero__inner { grid-template-columns: 1fr; }
  .fp-hero__visual { display: none; }
}

.fp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.95);
  font-size: .8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
  backdrop-filter: blur(4px);
}
.fp-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -.5px;
}
.fp-hero__accent {
  background: linear-gradient(90deg, #34d399, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fp-hero__desc {
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 28px;
}
.fp-hero__search {
  display: flex;
  max-width: 480px;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  margin-bottom: 20px;
}
.fp-hero__search-icon { display: flex; align-items: center; padding: 0 12px 0 16px; font-size: 1.1rem; }
.fp-hero__search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 0;
  font-family: var(--font-main);
  font-size: .95rem;
  color: var(--color-text);
  background: transparent;
}
.fp-hero__search button {
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 14px 22px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  font-family: var(--font-main);
  transition: background var(--transition);
  white-space: nowrap;
}
.fp-hero__search button:hover { background: var(--color-accent-dark); }

.fp-hero__platforms {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: rgba(255,255,255,.7);
}
.fp-hero__platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .78rem;
}
.fp-hero__platform--tiktok  { background: rgba(0,0,0,.35); color: #fff; }
.fp-hero__platform--shopee  { background: rgba(249,115,22,.35); color: #fff; }
.fp-hero__platform--lazada  { background: rgba(37,99,235,.35); color: #fff; }

/* Hero Visual – mock cards */
.fp-hero__card-stack { position: relative; height: 320px; }
.fp-hero__mock-card {
  position: absolute;
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  display: flex;
  gap: 12px;
  width: 240px;
}
.fp-hero__mock-card--1 { top: 20px; left: 20px; transform: rotate(-3deg); animation: floatCard1 4s ease-in-out infinite; }
.fp-hero__mock-card--2 { top: 100px; left: 120px; transform: rotate(2deg); animation: floatCard2 4s ease-in-out infinite; animation-delay: .8s; }
@keyframes floatCard1 { 0%,100%{transform:rotate(-3deg) translateY(0)} 50%{transform:rotate(-3deg) translateY(-8px)} }
@keyframes floatCard2 { 0%,100%{transform:rotate(2deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-10px)} }

.fp-hero__mock-img { width: 60px; height: 60px; border-radius: 8px; background: linear-gradient(135deg,var(--color-primary-light),var(--color-accent-light)); flex-shrink: 0; }
.fp-hero__mock-img--alt { background: linear-gradient(135deg,#fef3c7,#fde68a); }
.fp-hero__mock-body { flex: 1; }
.fp-hero__mock-title { height: 12px; background: #e2e8f0; border-radius: 4px; margin-bottom: 8px; }
.fp-hero__mock-line  { height: 8px; background: #f1f5f9; border-radius: 4px; margin-bottom: 10px; }
.fp-hero__mock-line--short { width: 70%; }
.fp-hero__mock-stars { font-size: .85rem; color: #f59e0b; }

.fp-hero__score-bubble {
  position: absolute;
  bottom: 40px;
  left: 0;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 24px rgba(16,185,129,.4);
  animation: floatBubble 3s ease-in-out infinite;
}
.fp-hero__score-num   { font-size: 1.8rem; font-weight: 900; line-height: 1; }
.fp-hero__score-label { font-size: .7rem; opacity: .9; margin-top: 2px; }
.fp-hero__price-bubble {
  position: absolute;
  top: 0;
  right: 0;
  background: #010101;
  color: #fff;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: .75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  animation: floatBubble 3.5s ease-in-out infinite;
  animation-delay: .5s;
}
.fp-hero__price-tag { font-weight: 800; font-size: .85rem; }
@keyframes floatBubble { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ════════════════════════════════════════
   STATS BAR
════════════════════════════════════════ */
.fp-stats {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.fp-stats__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.fp-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 32px;
}
.fp-stats__num   { font-size: 1.5rem; font-weight: 900; color: var(--color-primary); line-height: 1; }
.fp-stats__label { font-size: .78rem; color: var(--color-text-muted); margin-top: 4px; font-weight: 500; }
.fp-stats__divider { width: 1px; height: 36px; background: var(--color-border); }
@media (max-width: 600px) {
  .fp-stats__item { padding: 8px 16px; }
  .fp-stats__divider { display: none; }
}

/* ════════════════════════════════════════
   SECTION COMMONS
════════════════════════════════════════ */
.fp-section { padding: 56px 0; }
.fp-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 8px;
}
.fp-section__title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
}
.fp-section__more {
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.fp-section__more:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ════════════════════════════════════════
   CATEGORY CHIPS
════════════════════════════════════════ */
.fp-cats { background: var(--color-surface); padding: 40px 0; border-bottom: 1px solid var(--color-border); }
.fp-cats__grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fp-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: .875rem;
  transition: all var(--transition);
}
.fp-cat-chip:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79,70,229,.3);
}
.fp-cat-chip__icon { font-size: 1.1rem; }
.fp-cat-chip__count {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: .7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 50px;
}
.fp-cat-chip:hover .fp-cat-chip__count { background: rgba(255,255,255,.2); color: #fff; }

/* ════════════════════════════════════════
   TOP RATED
════════════════════════════════════════ */
.fp-top-rated { background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 100%); }
.fp-top-rated__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 768px) { .fp-top-rated__grid { grid-template-columns: 1fr; } }

.fp-top-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.fp-top-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fp-top-card--rank-1 { border-top: 4px solid #f59e0b; }
.fp-top-card--rank-2 { border-top: 4px solid #94a3b8; }
.fp-top-card--rank-3 { border-top: 4px solid #cd7c3c; }

.fp-top-card__rank {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
  z-index: 2;
}
.fp-top-card__thumb { aspect-ratio: 16/9; overflow: hidden; }
.fp-top-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.fp-top-card:hover .fp-top-card__thumb img { transform: scale(1.05); }
.fp-top-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.fp-top-card__title { font-size: .95rem; font-weight: 700; line-height: 1.4; margin: 0; }
.fp-top-card__title a { color: var(--color-text); }
.fp-top-card__title a:hover { color: var(--color-primary); }
.fp-top-card__score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.fp-top-card__score-num  { font-size: 1.6rem; font-weight: 900; color: var(--color-accent-dark); line-height: 1; }
.fp-top-card__score-max  { font-size: .75rem; color: var(--color-text-muted); }
.fp-top-card__stars      { color: #f59e0b; font-size: .85rem; margin-left: 4px; }
.fp-top-card__price      { font-weight: 800; color: var(--color-text-muted); font-size: .9rem; }
.fp-top-card__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #010101;
  color: #fff;
  padding: 10px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .8rem;
  text-decoration: none;
  transition: background var(--transition);
}
.fp-top-card__btn:hover { background: #333; color: #fff; }

/* ════════════════════════════════════════
   LATEST GRID – Featured first card
════════════════════════════════════════ */
.fp-latest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .fp-latest__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fp-latest__grid { grid-template-columns: 1fr; } }

.post-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  max-height: 280px;
}
.post-card--featured .post-card-thumb {
  width: 380px;
  flex-shrink: 0;
  aspect-ratio: unset;
}
.post-card--featured .post-card-title { font-size: 1.15rem; }
@media (max-width: 700px) {
  .post-card--featured { flex-direction: column; max-height: none; }
  .post-card--featured .post-card-thumb { width: 100%; aspect-ratio: 16/9; }
}

/* Platform badges on post cards */
.fp-post-platforms { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.fp-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 50px;
  text-decoration: none;
  transition: opacity var(--transition);
}
.fp-platform-badge:hover { opacity: .8; }
.fp-platform-badge--tiktok  { background: #010101; color: #fff; }
.fp-platform-badge--shopee  { background: #fff3e8; color: var(--color-shopee); border: 1px solid #f97316; }
.fp-platform-badge--lazada  { background: #eff6ff; color: var(--color-lazada); border: 1px solid #2563eb; }

.fp-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  padding: 14px 36px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  transition: all var(--transition);
}
.fp-view-all-btn:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79,70,229,.3);
}

/* ════════════════════════════════════════
   WHY TRUST US
════════════════════════════════════════ */
.fp-trust {
  background: var(--color-surface);
  padding: 56px 0;
  border-top: 1px solid var(--color-border);
}
.fp-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .fp-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fp-trust__grid { grid-template-columns: 1fr; } }

.fp-trust__card {
  text-align: center;
  padding: 28px 20px;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.fp-trust__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fp-trust__icon { font-size: 2.4rem; margin-bottom: 14px; display: block; }
.fp-trust__card h3 { font-size: .95rem; font-weight: 700; margin-bottom: 8px; color: var(--color-primary-dark); }
.fp-trust__card p  { font-size: .85rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }

/* ════════════════════════════════════════
   PLATFORM STRIP
════════════════════════════════════════ */
.fp-platform-strip {
  background: #1e293b;
  padding: 32px 0;
  text-align: center;
}
.fp-platform-strip__label {
  color: rgba(255,255,255,.6);
  font-size: .85rem;
  margin-bottom: 16px;
  font-weight: 500;
}
.fp-platform-strip__platforms {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fp-strip-platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.fp-strip-platform:hover { transform: translateY(-2px); }
.fp-strip-platform--tiktok { background: #010101; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.fp-strip-platform--tiktok:hover { background: #222; color: #fff; }
.fp-strip-platform--shopee { background: var(--color-shopee); color: #fff; box-shadow: 0 4px 16px rgba(249,115,22,.35); }
.fp-strip-platform--shopee:hover { background: #ea6c00; color: #fff; }
.fp-strip-platform--lazada { background: var(--color-lazada); color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,.35); }
.fp-strip-platform--lazada:hover { background: #1d4ed8; color: #fff; }

/* ════════════════════════════════════════
   FLOATING BUY BAR
════════════════════════════════════════ */
.fab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 10px 16px 14px;
  background: #fff;
  box-shadow: 0 -4px 24px rgba(0,0,0,.15);
  border-top: 1px solid var(--color-border);
}
.fab-bar__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.fab-bar__label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  flex-shrink: 0;
}
.fab-bar__btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.fab__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: 50px;
  font-weight: 800;
  font-size: .875rem;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.fab__btn:hover { transform: translateY(-2px); }
.fab__btn--tiktok {
  background: #010101;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.fab__btn--tiktok:hover { background: #333; color: #fff; }
.fab__btn--shopee {
  background: var(--color-shopee);
  color: #fff;
  box-shadow: 0 4px 14px rgba(249,115,22,.35);
}
.fab__btn--shopee:hover { background: #ea6c00; color: #fff; }
.fab__btn--lazada {
  background: var(--color-lazada);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,.3);
}
.fab__btn--lazada:hover { background: #1d4ed8; color: #fff; }

/* เพิ่ม padding-bottom ให้ body เมื่ออยู่ใน single post */
body.single .site-footer,
body.single footer { padding-bottom: 80px; }

@media (max-width: 480px) {
  .fab-bar__label { display: none; }
  .fab__btn { padding: 10px 16px; font-size: .8rem; }
}

/* ════════════════════════════════════════
   AdSense wrapper
════════════════════════════════════════ */
.adk-wrap {
  margin: 24px 0;
  text-align: center;
  overflow: hidden;
}
.adk-wrap::before {
  content: 'โฆษณา';
  display: block;
  font-size: .7rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  text-align: center;
  letter-spacing: .5px;
}

/* ════════════════════════════════════════
   LINE OA Widget
════════════════════════════════════════ */
.line-oa-widget {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #e8fdf0, #d1fae5);
  border: 2px solid #06C755;
  border-radius: var(--radius);
  padding: 20px;
}
.line-oa-widget--inline { margin: 32px 0; }
.line-oa-widget--sidebar { margin: 0; }

.line-oa-widget__logo { flex-shrink: 0; }

.line-oa-widget__content { flex: 1; }
.line-oa-widget__text {
  font-size: .9rem;
  font-weight: 600;
  color: #065f46;
  margin: 0 0 12px;
  line-height: 1.5;
}
.line-oa-widget__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #06C755;
  color: #fff;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 800;
  font-size: .875rem;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 4px 14px rgba(6,199,85,.35);
}
.line-oa-widget__btn:hover {
  background: #05a648;
  transform: translateY(-1px);
  color: #fff;
}
@media (max-width: 480px) {
  .line-oa-widget { flex-direction: column; text-align: center; }
}

/* ════════════════════════════════════════
   SCROLL TO TOP BUTTON
════════════════════════════════════════ */
#scroll-top-btn {
  position: fixed;
  bottom: 88px; /* เหนือ FAB bar */
  right: 20px;
  z-index: 998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(79,70,229,.4);
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
#scroll-top-btn.scroll-top-btn--show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#scroll-top-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px) scale(1.05);
}
/* ถ้าไม่มี FAB bar (หน้าที่ไม่ใช่ single) ลดตำแหน่งลง */
body:not(.single) #scroll-top-btn { bottom: 24px; }

@media (max-width: 480px) {
  #scroll-top-btn { bottom: 80px; right: 12px; width: 40px; height: 40px; }
  body:not(.single) #scroll-top-btn { bottom: 16px; }
}

/* ════════════════════════════════════════
   REVIEW CAT TAXONOMY PAGE
════════════════════════════════════════ */
.rcat-header {
  background: var(--color-primary-light);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 28px;
}
.rcat-header__title { font-size: 1.6rem; font-weight: 900; color: var(--color-primary-dark); margin: 0 0 6px; }
.rcat-header__desc  { color: var(--color-text-muted); font-size: .95rem; margin: 0 0 12px; }
.rcat-back {
  font-size: .85rem; font-weight: 700; color: var(--color-primary);
  text-decoration: none;
}
.rcat-back:hover { text-decoration: underline; }

.rcat-chips {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px;
}
.rcat-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 50px; padding: 10px 18px;
  text-decoration: none; color: var(--color-text);
  font-weight: 600; font-size: .875rem;
  transition: all var(--transition);
}
.rcat-chip:hover {
  background: var(--color-primary); border-color: var(--color-primary);
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79,70,229,.3);
}
.rcat-chip__icon { font-size: 1.1rem; }
.rcat-chip__count {
  background: var(--color-primary-light); color: var(--color-primary);
  font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 50px;
}
.rcat-chip:hover .rcat-chip__count { background: rgba(255,255,255,.2); color: #fff; }

.rcat-section { margin-bottom: 48px; }
.rcat-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 8px;
}
.rcat-section__title {
  font-size: 1.2rem; font-weight: 800; color: var(--color-text); margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.rcat-section__count {
  font-size: .75rem; font-weight: 600; color: var(--color-text-muted);
  background: var(--color-bg); border: 1px solid var(--color-border);
  padding: 2px 10px; border-radius: 50px;
}
.rcat-section__more {
  font-size: .85rem; font-weight: 700; color: var(--color-primary); text-decoration: none;
}
.rcat-section__more:hover { text-decoration: underline; }

/* ════════════════════════════════════════════
   COMPARISON PAGE
   page-comparison.php
════════════════════════════════════════════ */

.comparison-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0 16px;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 24px;
}
.comparison-header h1 { margin: 0; font-size: 1.6rem; }
.comparison-sort-form { margin-left: auto; }
.comparison-sort-form select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: .9rem;
}

/* Desktop Table */
.comparison-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 600px;
}
.comparison-table th,
.comparison-table td {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  vertical-align: top;
}
.comparison-table thead th { background: var(--color-primary); color: #fff; text-align: center; }
.comparison-label {
  background: #f8fafc;
  font-weight: 700;
  white-space: nowrap;
  min-width: 110px;
}
.comparison-product { text-align: center; min-width: 180px; }
.comparison-product img {
  width: 100%; max-width: 160px;
  height: 90px; object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.comparison-product-name {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--color-text);
  text-decoration: none;
  margin-top: 4px;
}
.comparison-product-name:hover { color: var(--color-primary); }
.comparison-best-badge {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  margin-top: 4px;
}
.comparison-table tr:nth-child(even) td:not(.comparison-label) { background: #fafbff; }
.comparison-table td.highlight { background: var(--color-accent-light) !important; font-weight: 700; }
.comparison-table th.is-best { background: var(--color-accent) !important; }
.comparison-score { font-size: 1.1rem; font-weight: 900; color: var(--color-primary); display: block; }
.badge-cheap {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  margin-top: 2px;
}
.comparison-pros { list-style: none; padding: 0; margin: 0; }
.comparison-pros li::before { content: "✅ "; }
.comparison-cons { list-style: none; padding: 0; margin: 0; }
.comparison-cons li::before { content: "❌ "; }
.comparison-cta-row td { background: var(--color-primary-light) !important; }
.comparison-cta-group { display: flex; flex-direction: column; gap: 6px; }
.btn-sm { padding: 8px 12px !important; font-size: .8rem !important; }
.btn-cta-tiktok {
  display: inline-block;
  background: #111827;
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: .9rem;
}
.btn-cta-review {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: .9rem;
  border: 1px solid var(--color-primary);
}
.comparison-empty {
  padding: 40px;
  text-align: center;
  background: #f8fafc;
  border-radius: var(--radius);
  color: var(--color-text-muted);
}

/* Mobile Cards (hidden on desktop) */
.comparison-mobile-cards { display: none; gap: 16px; flex-direction: column; }
.comparison-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
}
.comparison-card--best { border-color: var(--color-accent); border-width: 2px; }
.comparison-card-badge {
  position: absolute; top: -10px; left: 16px;
  background: var(--color-accent); color: #fff;
  font-size: .75rem; font-weight: 700;
  padding: 2px 10px; border-radius: 50px;
}
.comparison-card-img {
  width: 100%; max-height: 160px; object-fit: cover;
  border-radius: var(--radius-sm); margin-bottom: 10px;
}
.comparison-card-title { font-size: 1rem; margin: 0 0 8px; }
.comparison-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.comparison-price { font-weight: 700; font-size: 1.1rem; color: var(--color-primary); }
.comparison-price.is-cheap { color: var(--color-accent); }

@media (max-width: 640px) {
  .comparison-wrap { display: none; }
  .comparison-mobile-cards { display: flex; }
  .comparison-header { flex-direction: column; align-items: flex-start; }
  .comparison-sort-form { margin-left: 0; }
}

/* ════════════════════════════════════════════
   SOCIAL FOLLOW WIDGET
   แสดงใต้บทความ (inline) และใน Sidebar
════════════════════════════════════════════ */

/* ── Inline (ใต้บทความ) ── */
.social-follow-widget--inline {
  background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 100%);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 32px 0 8px;
}
.social-follow-widget__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.social-follow-widget__icon { color: var(--color-primary); flex-shrink: 0; }
.social-follow-widget__heading {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}

.social-follow-widget__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--btn-color, #333);
  transition: opacity .18s, transform .18s;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.social-follow-btn svg { flex-shrink: 0; }
.social-follow-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
  color: #fff;
}

/* ── Sidebar (compact icons) ── */
.social-follow-widget--sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
}
.social-follow-widget__heading-sm {
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}
.social-follow-widget__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.social-follow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--btn-color, #333);
  transition: opacity .18s, transform .18s;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.social-follow-icon:hover {
  opacity: .85;
  transform: translateY(-2px);
}

/* Responsive: inline ซ้อนแนวตั้งบนมือถือ */
@media (max-width: 480px) {
  .social-follow-widget__buttons { flex-direction: column; }
  .social-follow-btn { justify-content: center; }
}

/* ════════════════════════════════════════════
   AFFILIATE DISCLOSURE BOX
════════════════════════════════════════════ */
.affiliate-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 0 0 24px;
  font-size: .85rem;
  line-height: 1.6;
}
.affiliate-disclosure__icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.affiliate-disclosure__text { margin: 0; color: #78350f; }

/* ════════════════════════════════════════════
   FOOTER DISCLOSURE
   (แยกจาก .affiliate-disclosure ใน article)
════════════════════════════════════════════ */
.footer-disclosure {
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  margin: 0 auto 20px;
  font-size: .82rem;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  text-align: center;
  max-width: var(--max-width);
  width: calc(100% - 40px);
}
.footer-disclosure strong { color: rgba(255,255,255,.9); }

/* ════════════════════════════════════════════
   CONTACT PAGE
════════════════════════════════════════════ */
.contact-hero {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  padding: 56px 20px;
  text-align: center;
  color: #fff;
}
.contact-hero__inner { max-width: 560px; margin: 0 auto; }
.contact-hero__icon  { font-size: 3rem; margin-bottom: 14px; }
.contact-hero__title { color: #fff; font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 900; margin-bottom: 10px; }
.contact-hero__desc  { color: rgba(255,255,255,.85); font-size: 1rem; margin: 0; }

/* Layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
  padding: 48px 0;
}

/* Form Card */
.contact-form-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 36px;
  box-shadow: var(--shadow);
}
.contact-form-card__title { margin-top: 0; color: var(--color-primary-dark); font-size: 1.3rem; }
.contact-form-card__sub   { color: var(--color-text-muted); font-size: .9rem; margin-bottom: 24px; }

/* Form Elements */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form__field  { display: flex; flex-direction: column; gap: 6px; }
.contact-form__label  { font-size: .85rem; font-weight: 600; color: var(--color-text); }
.contact-form__input  {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
  background: #fff;
  color: var(--color-text);
}
.contact-form__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.contact-form__textarea { resize: vertical; min-height: 140px; }
.contact-form__submit {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  font-family: var(--font-main);
  transition: background .2s, transform .2s;
  align-self: flex-start;
  width: 100%;
}
.contact-form__submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* Success / Error */
.contact-success {
  background: var(--color-accent-light);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
}
.contact-success__icon { font-size: 2.5rem; margin-bottom: 8px; }
.contact-success h3    { color: var(--color-accent-dark); margin: 0 0 6px; }
.contact-success p     { margin: 0; color: var(--color-accent-dark); font-size: .9rem; }
.contact-error {
  background: #fef2f2;
  border: 1px solid #ef4444;
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 16px;
  color: #dc2626;
  font-size: .9rem;
}

/* Sidebar */
.contact-sidebar      { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card    {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}
.contact-info-card--primary { background: var(--color-primary-light); border-color: var(--color-primary-light); }
.contact-info-card--accent  { background: var(--color-accent-light); border-color: var(--color-accent); text-align: center; }
.contact-info-card__title   { color: var(--color-primary-dark); margin-top: 0; font-size: 1rem; }
.contact-info-card__emoji   { font-size: 1.8rem; margin-bottom: 8px; }
.contact-info-card__highlight { font-size: .9rem; color: var(--color-accent-dark); margin: 0 0 6px; font-weight: 700; }
.contact-info-card__note    { font-size: .82rem; color: var(--color-text-muted); margin: 0; }

.contact-channels { display: flex; flex-direction: column; gap: 14px; }
.contact-channel  { display: flex; gap: 12px; align-items: center; }
.contact-channel__icon  { font-size: 1.3rem; flex-shrink: 0; }
.contact-channel__label { font-size: .78rem; color: var(--color-text-muted); margin-bottom: 2px; }
.contact-channel__link  { font-weight: 700; color: var(--color-primary); font-size: .9rem; text-decoration: none; }
.contact-channel__link:hover { text-decoration: underline; }
.contact-channel__link--line { color: #06C755; }
.contact-channel__link--fb   { color: #1877f2; }

.contact-hours { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-hours li { display: flex; justify-content: space-between; font-size: .875rem; }
.contact-hours li span { color: var(--color-text-muted); }
.contact-hours li strong { color: var(--color-text); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    padding: 28px 0;
    gap: 24px;
  }
  .contact-form-card { padding: 24px 20px; }
  .contact-form__submit { width: 100%; }
}
@media (max-width: 480px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   FOOTER — Mobile Fix
════════════════════════════════════════════ */
@media (max-width: 480px) {
  .footer-disclosure {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
    text-align: center;
    font-size: .78rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .footer-disclosure {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
  }
}

/* ════════════════════════════════════════════
   PRIVACY POLICY PAGE
════════════════════════════════════════════ */
.privacy-hero {
  background: linear-gradient(135deg, #1e293b, #334155);
  padding: 48px 20px;
  text-align: center;
  color: #fff;
}
.privacy-hero__inner { max-width: 640px; margin: 0 auto; }
.privacy-hero__icon  { font-size: 3rem; margin-bottom: 14px; }
.privacy-hero__title { color: #fff; font-size: clamp(1.6rem,3.5vw,2.4rem); font-weight: 900; margin-bottom: 8px; }
.privacy-hero__date  { color: rgba(255,255,255,.6); font-size: .875rem; margin: 0; }

.privacy-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 0;
}

.privacy-intro {
  font-size: 1rem;
  line-height: 1.85;
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
  padding: 16px 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 32px;
}

/* TOC */
.privacy-toc {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 36px;
}
.privacy-toc__heading {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 10px;
}
.privacy-toc__list {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.privacy-toc__list li {
  font-size: .85rem;
  color: var(--color-primary-dark);
  font-weight: 500;
  margin-bottom: 3px;
}

/* Content */
.privacy-content {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 40px 44px;
  box-shadow: var(--shadow);
  line-height: 1.9;
  color: var(--color-text);
  font-size: .95rem;
}
.privacy-h2 {
  border-left: 4px solid var(--color-primary);
  padding-left: 14px;
  color: var(--color-primary-dark);
  margin-top: 36px;
  font-size: 1.15rem;
}
.privacy-h2:first-child { margin-top: 0; }

/* Cookie table */
.privacy-table-wrap { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch; }
.privacy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  min-width: 480px;
}
.privacy-table thead tr { background: var(--color-primary); color: #fff; }
.privacy-table th { padding: 12px 16px; text-align: left; }
.privacy-table td { padding: 10px 16px; border-bottom: 1px solid var(--color-border); }
.privacy-table tr:nth-child(even) td { background: var(--color-bg); }
.privacy-table__mono { font-family: monospace; font-size: .8rem; }

/* PDPA Rights Grid */
.privacy-rights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.privacy-right-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.privacy-right-card__head { font-size: .875rem; margin-bottom: 4px; }
.privacy-right-card p { font-size: .8rem; color: var(--color-text-muted); margin: 0; }

/* Contact box */
.privacy-contact-box {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-top: 12px;
  overflow-x: auto;
}
.privacy-contact-table { font-size: .9rem; border-collapse: collapse; width: 100%; }
.privacy-contact-table td { padding: 6px 0; vertical-align: top; }
.privacy-contact-table td:first-child { color: var(--color-text-muted); width: 110px; padding-right: 12px; white-space: nowrap; }
.privacy-cta { margin-top: 28px; text-align: center; }
.privacy-content a { color: var(--color-primary); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .privacy-wrap    { padding: 28px 0; }
  .privacy-content { padding: 24px 20px; }
  .privacy-toc     { padding: 16px 18px; }
  .privacy-toc__list { grid-template-columns: 1fr; }
  .privacy-rights-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .privacy-content { padding: 20px 16px; }
  .privacy-h2 { font-size: 1rem; }
}

/* ════════════════════════════════════════════
   MOBILE-FIRST COMPREHENSIVE FIX
   ปรับทุกหน้าสำหรับมือถือ (Mobile-First)
════════════════════════════════════════════ */

/* ── 1. Base Mobile Typography ── */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .site-container { padding: 0 16px; }

  /* Header — เพิ่มความสูงให้แตะได้ง่ายขึ้น */
  .site-header { position: sticky; top: 0; z-index: 1000; }
  .header-inner { padding: 0 16px; min-height: 56px; }
  .site-logo img { max-height: 40px; }

  /* Nav dropdown สวยขึ้น */
  .site-nav {
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .site-nav ul { gap: 0; }
  .site-nav a {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 1rem;
  }
}

/* ── 2. Single Post — Mobile ── */
@media (max-width: 768px) {
  .single-post-header { padding: 20px 16px; border-radius: var(--radius-sm); }

  /* Score box ซ้อนแนวตั้ง */
  .review-score-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 16px;
  }
  .score-circle { width: 72px; height: 72px; }
  .score-circle .score-num { font-size: 1.5rem; }
  .score-bars { min-width: unset; width: 100%; }
  .score-bar-item span:first-child { width: 60px; font-size: .75rem; }

  /* Entry content */
  .entry-content { font-size: .95rem; }
  .entry-content h2 { font-size: 1.2rem; }
  .entry-content h3 { font-size: 1.05rem; }
  .entry-content img { border-radius: var(--radius-sm); }
  .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* FAB bar ปรับขนาด */
  .fab-bar { padding: 10px 12px 12px; }
  .fab-bar__btns { gap: 6px; width: 100%; }
  .fab__btn { flex: 1; justify-content: center; padding: 10px 8px; font-size: .82rem; }
}

/* ── 3. Archive / Category ── */
@media (max-width: 768px) {
  .posts-grid { grid-template-columns: 1fr; gap: 16px; }
  .post-card-body { padding: 14px 16px; }
  .post-card-title { font-size: .95rem; }
}
/* 2 column บน tablet */
@media (min-width: 480px) and (max-width: 768px) {
  .posts-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── 4. Front Page ── */
@media (max-width: 768px) {
  /* Hero */
  .fp-hero { padding: 40px 16px 32px; }
  .fp-hero__title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .fp-hero__search { flex-direction: column; gap: 8px; }
  .fp-hero__search input { border-radius: var(--radius); }
  .fp-hero__search button { border-radius: var(--radius); width: 100%; }
  .fp-hero__platforms { flex-wrap: wrap; justify-content: center; gap: 8px; }

  /* Stats bar */
  .fp-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 20px 16px; }

  /* Section titles */
  .fp-section-header { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Top rated cards */
  .fp-top-card { min-width: 260px; }
}

/* ── 5. Info Box ── */
@media (max-width: 480px) {
  .info-box { flex-direction: column; gap: 6px; padding: 12px 14px; }
  .info-box-icon { font-size: 1.2rem; }
}

/* ── 6. Price Compare ── */
@media (max-width: 600px) {
  .price-compare-box { padding: 16px; }
  .price-compare-row { flex-direction: column; gap: 10px; align-items: stretch; }
  .price-compare-btn { text-align: center; }
}

/* ── 7. Social Follow Widget Inline ── */
@media (max-width: 480px) {
  .social-follow-widget--inline { padding: 16px; }
  .social-follow-btn { font-size: .78rem; padding: 8px 12px; }
}

/* ── 8. Sticky Mobile Bar (ปรับไม่ให้ทับ FAB) ── */
@media (max-width: 768px) {
  .sticky-bar {
    padding: 8px 12px 10px;
    gap: 8px;
  }
  .sticky-bar__btn { padding: 8px 10px; font-size: .78rem; }
  /* ซ่อน sticky bar ถ้ามี FAB bar อยู่แล้วในหน้า single */
  body.single .sticky-bar { display: none !important; }
}

/* ── 9. Related Posts Mobile ── */
@media (max-width: 600px) {
  .related-posts-grid { grid-template-columns: 1fr !important; }
  .related-post-card { flex-direction: row; max-height: 100px; }
  .related-post-card__thumb { width: 100px; min-width: 100px; aspect-ratio: unset; height: 100px; }
}

/* ── 10. Breadcrumb ── */
@media (max-width: 480px) {
  .breadcrumb { font-size: .75rem; padding: 8px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* ── 11. App-like feel สำหรับมือถือ ── */
@media (max-width: 768px) {
  /* Smooth momentum scroll */
  body { -webkit-overflow-scrolling: touch; }

  /* Tap highlight สวยขึ้น */
  a, button { -webkit-tap-highlight-color: rgba(79,70,229,.15); }

  /* ปุ่ม CTA ใหญ่ขึ้นให้แตะง่าย (min 44px) */
  .btn-cta-shopee,
  .btn-cta-lazada,
  .btn-cta-tiktok,
  .btn-cta-review { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Card shadow เบาลงบน mobile เพื่อ performance */
  .post-card,
  .single-post-header { box-shadow: 0 1px 4px rgba(0,0,0,.08); }

  /* Footer spacing ล่าง เพื่อไม่ให้ FAB ทับ content */
  body.single main { padding-bottom: 80px; }
}

/* ── 12. Scroll-to-top ซ้อนกับ sticky bar ── */
@media (max-width: 768px) {
  body.single #scroll-top-btn { bottom: 90px; }
}

/* ── 13. Search page ── */
@media (max-width: 480px) {
  .search-form { flex-direction: column; gap: 8px; }
  .search-form input  { border-radius: var(--radius-sm); }
  .search-form button { border-radius: var(--radius-sm); width: 100%; }
}

/* ── 14. Taxonomy / Category header ── */
@media (max-width: 600px) {
  .rcat-header { padding: 20px 0 12px; }
  .rcat-header__title { font-size: 1.3rem; }
  .rcat-subcats { gap: 6px; }
  .rcat-subcat-chip { font-size: .78rem; padding: 5px 12px; }
}

/* ── 15. 404 page ── */
@media (max-width: 480px) {
  .e404-hero { padding: 32px 16px; }
  .e404-emoji { font-size: 3rem; }
  .e404-title { font-size: 1.4rem; }
}

/* ════════════════════════════════════════════
   MOBILE FIX v1.4.1
════════════════════════════════════════════ */

/* ── Hero Search Box ── */
@media (max-width: 768px) {
  .fp-hero__search {
    flex-direction: column;
    border-radius: var(--radius);
    overflow: visible;
    background: transparent;
    box-shadow: none;
    gap: 8px;
    max-width: 100%;
  }
  .fp-hero__search-icon {
    display: none; /* ซ่อน icon ใน column mode */
  }
  .fp-hero__search input {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    font-size: 1rem;
    box-sizing: border-box;
  }
  .fp-hero__search button {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 800;
  }
}

/* ── Single Post Score Box ── */
@media (max-width: 600px) {
  .review-score-box {
    flex-direction: column;
    gap: 16px;
  }
  .review-score-box > div:last-child {
    width: 100%;
  }
  .score-bars { min-width: unset; width: 100%; }
  .score-bar-item span:first-child { width: 56px; font-size: .75rem; }
  .score-circle { width: 72px; height: 72px; }
  .score-circle .score-num { font-size: 1.5rem; }
}

/* ── Affiliate Disclosure (article) ── */
.affiliate-disclosure {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
@media (max-width: 480px) {
  .affiliate-disclosure { padding: 10px 14px; }
  .affiliate-disclosure__text { font-size: .8rem; }
}

/* ── Social Follow Widget inline ── */
@media (max-width: 600px) {
  .social-follow-widget--inline {
    padding: 16px;
    margin: 24px 0 8px;
  }
  .social-follow-widget__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .social-follow-btn {
    font-size: .8rem;
    padding: 9px 10px;
    justify-content: center;
    text-align: center;
  }
  /* LINE OA และ Facebook เต็มแถว */
  .social-follow-btn--line,
  .social-follow-btn--facebook {
    grid-column: span 1;
  }
}

/* ── FAB bar ใน single ── */
@media (max-width: 600px) {
  .fab-bar { padding: 8px 12px 10px; }
  .fab-bar__inner { gap: 8px; }
  .fab-bar__label { display: none; }
  .fab__btn {
    flex: 1;
    justify-content: center;
    padding: 11px 8px;
    font-size: .82rem;
    gap: 4px;
  }
  .fab__btn svg { width: 14px; height: 14px; }
}

/* ── Pros/Cons ── */
@media (max-width: 480px) {
  .pros-cons-box { grid-template-columns: 1fr; }
  .pros-list, .cons-list { padding: 14px; }
}

/* ── Single post padding ── */
@media (max-width: 600px) {
  .single-post-header { padding: 16px; }
  .entry-content { font-size: .93rem; line-height: 1.75; }
  .entry-content h2 { font-size: 1.15rem; }
  .entry-content h3 { font-size: 1.05rem; }
}

/* ── Related posts grid ── */
@media (max-width: 600px) {
  .related-posts-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .related-post-card { flex-direction: column; max-height: none; }
  .related-post-card__thumb { width: 100%; aspect-ratio: 16/9; height: auto; }
  .related-post-card__body { padding: 10px; }
  .related-post-card__title { font-size: .82rem; }
}

/* ════════════════════════════════════════════
   MOBILE FIX v1.4.2
════════════════════════════════════════════ */

/* ── CTA Buttons — Mobile full width สวยงาม ── */
@media (max-width: 600px) {
  /* reset margin-left ที่ทำให้ Lazada ล้น */
  .btn-cta-lazada { margin-left: 0; }

  .aff-cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .btn-cta-shopee,
  .btn-cta-lazada,
  .btn-cta-tiktok {
    display: flex !important;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    font-size: 1rem;
    border-radius: 12px !important; /* สี่เหลี่ยมมุมมนแทน pill */
    margin: 0 !important;
    box-sizing: border-box;
  }
  /* icon ใน CTA */
  .btn-cta-shopee img,
  .btn-cta-lazada img,
  .btn-cta-tiktok img { width: 20px; height: 20px; }
}

/* ── Breadcrumb ── */
.breadcrumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 480px) {
  .breadcrumb {
    font-size: .72rem;
    padding: 6px 0;
    /* แสดงแค่ 2 level สุดท้าย */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: horizontal;
  }
}

/* ── Social Follow Widget ── */
@media (max-width: 600px) {
  .social-follow-widget--inline {
    padding: 14px;
  }
  .social-follow-widget__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .social-follow-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: .9rem;
    border-radius: 10px;
  }
}

/* ── Single post Score Box — full width ── */
@media (max-width: 600px) {
  .review-score-box {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  .score-circle {
    align-self: center;
    width: 80px;
    height: 80px;
  }
  .score-bars {
    width: 100%;
    min-width: unset;
  }
}

/* ── PC Header: Logo ซ้าย Nav ตรงกลาง CTA ขวา ── */
@media (min-width: 769px) {
  .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    gap: 20px;
  }
  .site-logo { grid-column: 1; }
  .site-nav  { grid-column: 2; display: flex; justify-content: center; }
  .header-cta { grid-column: 3; }
  .nav-toggle { display: none !important; }
}

/* ════════════════════════════════════════════
   ADS MANAGER STYLES
════════════════════════════════════════════ */

/* ── Ad Label ── */
.ad-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.ad-label--light { color: rgba(255,255,255,.6); }

/* ── Affiliate Banner ── */
.ad-banner-wrap {
  margin: 24px 0;
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.ad-banner-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0 auto;
  transition: opacity .2s;
}
.ad-banner-wrap a:hover .ad-banner-img { opacity: .9; }

/* ── Promo Box ── */
.ad-promo-box {
  background: var(--promo-bg, #4f46e5);
  color: var(--promo-color, #fff);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
}
.ad-promo-box::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.ad-promo-box__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ad-promo-box__text { flex: 1; min-width: 0; }
.ad-promo-box__headline {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 4px;
}
.ad-promo-box__sub {
  display: block;
  font-size: .85rem;
  opacity: .85;
}
.ad-promo-box__btn {
  display: inline-flex;
  align-items: center;
  background: var(--promo-btn-bg, #10b981);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .2s, transform .2s;
}
.ad-promo-box__btn:hover { opacity: .88; transform: translateY(-1px); }

/* Mobile Promo Box */
@media (max-width: 480px) {
  .ad-promo-box { padding: 16px; }
  .ad-promo-box__content { flex-direction: column; align-items: flex-start; }
  .ad-promo-box__btn { width: 100%; justify-content: center; }
  .ad-promo-box__headline { font-size: .95rem; }
}

/* ════════════════════════════════════════════
   RESPONSIVE FIX — Score Bar Labels
   ป้องกันคำตัดกลางบรรทัด
════════════════════════════════════════════ */
.score-bar-item span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════
   RESPONSIVE FIX — Tags (ท้ายบทความ)
════════════════════════════════════════════ */
.post-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
  align-items: center;
}
.post-tag {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 3px 12px;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.post-tag:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ════════════════════════════════════════════
   RESPONSIVE FIX — Footer Social Mobile
════════════════════════════════════════════ */
@media (max-width: 480px) {
  .social-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .social-btn {
    justify-content: center;
    text-align: center;
    font-size: .82rem;
    padding: 8px 12px;
  }
}

/* ════════════════════════════════════════════
   CONTENT FEATURES
════════════════════════════════════════════ */

/* ── 1. Table of Contents ── */
.toc-box {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 0;
  margin: 28px 0;
  overflow: hidden;
}
.toc-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: left;
}
.toc-chevron { margin-left: auto; font-size: .75rem; transition: transform .2s; }
.toc-toggle[aria-expanded="false"] .toc-chevron { transform: rotate(180deg); }
.toc-list {
  margin: 0;
  padding: 0 18px 14px 16px;
  list-style: none;
  counter-reset: toc-counter;
}
.toc-item {
  margin-bottom: 6px;
  line-height: 1.5;
}
.toc-item::before {
  content: '➤ ';
  color: var(--color-primary);
  font-size: .75rem;
}
.toc-level-3 {
  padding-left: 20px;
  font-size: .88rem;
}
.toc-level-3::before {
  content: '➤';
  opacity: .5;
  font-size: .65rem;
}
.toc-link { color: var(--color-primary-dark); text-decoration: none; font-size: .9rem; }
.toc-link:hover { text-decoration: underline; color: var(--color-primary); }
@media (max-width: 480px) {
  .toc-list { padding-left: 24px; }
  .toc-link { font-size: .85rem; }
}

/* ── 2. Last Updated Date ── */
.post-date-updated {
  color: var(--color-accent-dark);
  font-weight: 600;
}

/* ── 3. FAQ Block ── */
.faq-block {
  margin: 32px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-block__title {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  margin: 0;
  padding: 14px 20px;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--color-border);
}
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 20px;
  font-family: var(--font-main);
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  gap: 12px;
}
.faq-question:hover { background: var(--color-bg); }
.faq-chevron { flex-shrink: 0; font-size: .7rem; color: var(--color-primary); transition: transform .2s; }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 20px 14px; }
.faq-answer p { margin: 0; color: var(--color-text-muted); font-size: .9rem; line-height: 1.7; }

/* ── 4. Price Alert Widget ── */
.price-alert-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.price-alert-widget__icon { font-size: 1.3rem; flex-shrink: 0; }
.price-alert-widget__text { flex: 1; min-width: 0; }
.price-alert-widget__text strong { display: block; font-size: .88rem; color: #92400e; }
.price-alert-widget__text span   { font-size: .78rem; color: #b45309; }
.price-alert-widget__links { display: flex; gap: 6px; flex-wrap: wrap; }
.price-alert-btn {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 50px;
  font-size: .78rem; font-weight: 700;
  text-decoration: none; color: #fff;
  white-space: nowrap;
}
.price-alert-btn--shopee { background: var(--color-shopee); }
.price-alert-btn--lazada { background: var(--color-lazada); }
.price-alert-btn--tiktok { background: #010101; }
@media (max-width: 600px) {
  .price-alert-widget { flex-direction: column; align-items: flex-start; }
  .price-alert-widget__links { width: 100%; flex-direction: column; }
  .price-alert-btn { width: 100%; justify-content: center; }
}

/* ── 5. Inline Compare Shortcode ── */
.inline-compare { margin: 32px 0; }
.inline-compare__title {
  font-size: 1.1rem; color: var(--color-primary-dark);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
}
.inline-compare__grid {
  display: grid;
  gap: 12px;
}
.inline-compare__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inline-compare__card--best { border-color: var(--color-accent); border-width: 2px; }
.inline-compare__badge {
  position: absolute; top: -10px; left: 12px;
  background: var(--color-accent); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: 2px 10px; border-radius: 50px;
}
.inline-compare__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); }
.inline-compare__name { font-size: .9rem; margin: 0; }
.inline-compare__name a { color: var(--color-text); text-decoration: none; }
.inline-compare__name a:hover { color: var(--color-primary); }
.inline-compare__price { font-size: 1.1rem; font-weight: 800; color: var(--color-primary); }
.inline-compare__price--best { color: var(--color-accent); }
.inline-compare__price span { font-size: .75rem; background: var(--color-accent-light); color: var(--color-accent-dark); padding: 1px 6px; border-radius: 50px; margin-left: 4px; }
.inline-compare__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.inline-compare__read { font-size: .8rem; color: var(--color-primary); text-decoration: none; margin-top: auto; }
.inline-compare__read:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .inline-compare__grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════
   ADVANCED FEATURES
════════════════════════════════════════════ */

/* ── 4. Exit Intent Popup ── */
.exit-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.7);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .25s ease;
}
.exit-popup-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.exit-popup {
  background: var(--color-surface);
  border-radius: var(--radius);
  max-width: 520px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  position: relative;
  overflow: hidden;
  animation: slideUp .3s ease;
}
@keyframes slideUp { from { transform:translateY(20px);opacity:0 } to { transform:translateY(0);opacity:1 } }

.exit-popup__close {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,.08); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: .9rem; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.exit-popup__close:hover { background: rgba(0,0,0,.15); }

.exit-popup__content {
  display: flex; gap: 0;
}
.exit-popup__img {
  width: 180px; min-height: 180px;
  object-fit: cover; flex-shrink: 0;
}
.exit-popup__body { padding: 24px; flex: 1; }
.exit-popup__eyebrow { font-size: .78rem; font-weight: 700; color: var(--color-shopee); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.exit-popup__title { font-size: 1.1rem; font-weight: 800; color: var(--color-text); margin: 0 0 10px; line-height: 1.3; }
.exit-popup__score { margin-bottom: 8px; }
.exit-popup__price { font-size: .9rem; color: var(--color-text-muted); margin: 0 0 16px; }
.exit-popup__price strong { color: var(--color-primary); font-size: 1.1rem; }
.exit-popup__btns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.exit-popup__dismiss { background: none; border: none; font-size: .75rem; color: var(--color-text-muted); cursor: pointer; text-decoration: underline; padding: 0; font-family: var(--font-main); }
.exit-popup__dismiss:hover { color: var(--color-text); }

@media (max-width: 480px) {
  .exit-popup__content { flex-direction: column; }
  .exit-popup__img { width: 100%; min-height: 160px; max-height: 200px; }
  .exit-popup__body { padding: 16px; }
}

/* ── 5. Sticky Comparison Bar ── */
.sticky-compare-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 998;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 8px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transform: translateY(-100%);
  transition: transform .3s ease;
}
.sticky-compare-bar:not([hidden]) {
  transform: translateY(0);
}
.sticky-compare-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sticky-compare-bar__thumb {
  width: 36px; height: 36px;
  border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.sticky-compare-bar__info { flex: 1; min-width: 0; }
.sticky-compare-bar__name {
  display: block; font-size: .85rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sticky-compare-bar__meta { font-size: .75rem; opacity: .8; }
.sticky-compare-bar__btns { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width: 480px) {
  .sticky-compare-bar__info .sticky-compare-bar__meta { display: none; }
  .sticky-compare-bar__btn { font-size: .75rem; padding: 6px 8px; }
}

/* ── 6. Helpful Widget ── */
.helpful-widget {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 28px 0 8px;
  text-align: center;
}
.helpful-widget__question { font-weight: 700; font-size: 1rem; margin: 0 0 6px; color: var(--color-text); }
.helpful-widget__stats { font-size: .82rem; color: var(--color-text-muted); margin: 0 0 14px; }
.helpful-widget__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.helpful-widget__thanks { color: var(--color-accent-dark); font-weight: 600; margin: 8px 0 0; }
.helpful-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 50px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  font-size: .9rem; font-weight: 600;
  cursor: pointer; font-family: var(--font-main);
  transition: all .2s;
}
.helpful-btn span { font-size: .78rem; color: var(--color-text-muted); }
.helpful-btn--yes:hover { border-color: var(--color-accent); background: var(--color-accent-light); color: var(--color-accent-dark); }
.helpful-btn--no:hover  { border-color: #fca5a5; background: #fef2f2; color: #dc2626; }

/* ── 7. Copy Link Widget ── */
.copy-link-widget {
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 20px 0 8px;
}
.copy-link-widget__label {
  font-size: .82rem; font-weight: 700;
  color: var(--color-primary-dark); margin: 0 0 10px;
}
.copy-link-widget__row { display: flex; flex-wrap: wrap; gap: 8px; }
.copy-link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 50px;
  font-size: .82rem; font-weight: 600;
  border: 1.5px solid var(--color-primary);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer; font-family: var(--font-main);
  text-decoration: none;
  transition: all .2s;
}
.copy-link-btn:hover { background: var(--color-primary); color: #fff; }
.copy-link-btn--line { border-color: #06C755; color: #06C755; }
.copy-link-btn--line:hover { background: #06C755; color: #fff; }
.copy-link-btn--fb { border-color: #1877F2; color: #1877F2; }
.copy-link-btn--fb:hover { background: #1877F2; color: #fff; }

@media (max-width: 480px) {
  .copy-link-widget__row { flex-direction: column; }
  .copy-link-btn { justify-content: center; }
}

/* ════════════════════════════════════════════
   CONVERSION BOOSTERS
════════════════════════════════════════════ */

/* ── Verdict Box — สรุปความคุ้มค่า ── */
.verdict-box {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 32px 0;
  position: relative;
  overflow: hidden;
}
.verdict-box::before {
  content: '🏆';
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 4rem;
  opacity: .15;
  pointer-events: none;
}
.verdict-box__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
  margin-bottom: 6px;
  display: block;
}
.verdict-box__title {
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0 0 10px;
  line-height: 1.3;
}
.verdict-box__text {
  font-size: .92rem;
  opacity: .9;
  line-height: 1.7;
  margin: 0 0 16px;
}
.verdict-box__score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.15);
  padding: 6px 14px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 16px;
}
.verdict-box__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.verdict-box__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px; border-radius: 50px;
  font-weight: 800; font-size: .9rem;
  text-decoration: none; white-space: nowrap;
  transition: transform .2s, opacity .2s;
}
.verdict-box__btn:hover { transform: translateY(-2px); opacity: .92; }
.verdict-box__btn--shopee { background: var(--color-shopee); color: #fff; }
.verdict-box__btn--lazada { background: var(--color-lazada); color: #fff; }
.verdict-box__btn--tiktok { background: #fff; color: #010101; }
@media (max-width: 480px) {
  .verdict-box { padding: 18px; }
  .verdict-box__btns { flex-direction: column; }
  .verdict-box__btn { justify-content: center; }
  .verdict-box::before { display: none; }
}

/* ── Who Should Buy Box ── */
.who-box {
  border: 2px solid var(--color-primary-light);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
}
.who-box__title {
  font-size: 1rem; font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0 0 14px;
}
.who-box__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.who-box__list li {
  display: flex; align-items: flex-start;
  gap: 8px; font-size: .9rem; line-height: 1.6;
}
.who-box__list li::before { content: '👤'; flex-shrink: 0; }
.who-box__list--not li::before { content: '🚫'; flex-shrink: 0; }

/* ── Urgency Banner ── */
.urgency-banner {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
  color: #fff;
  text-align: center;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .88rem;
  margin: 16px 0;
  animation: pulse-urgency 2s ease-in-out infinite;
}
@keyframes pulse-urgency {
  0%,100% { opacity: 1; }
  50% { opacity: .85; }
}

/* ── Rating Summary Bar ── */
.rating-summary {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.rating-summary__big {
  text-align: center;
  flex-shrink: 0;
}
.rating-summary__num {
  display: block;
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
}
.rating-summary__max { font-size: .8rem; color: var(--color-text-muted); }
.rating-summary__bars { flex: 1; min-width: 180px; }
.rating-summary__bar-row {
  display: flex; align-items: center;
  gap: 8px; margin-bottom: 6px; font-size: .82rem;
}
.rating-summary__bar-label { width: 64px; color: var(--color-text-muted); flex-shrink: 0; }
.rating-summary__bar-track {
  flex: 1; height: 8px;
  background: var(--color-border);
  border-radius: 4px; overflow: hidden;
}
.rating-summary__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  border-radius: 4px;
  transition: width .6s ease;
}
.rating-summary__bar-val { width: 28px; text-align: right; font-weight: 600; }
@media (max-width: 480px) {
  .rating-summary { flex-direction: column; gap: 16px; }
  .rating-summary__bars { width: 100%; }
}

/* ════════════════════════════════════════════
   REVENUE FEATURES
════════════════════════════════════════════ */

/* ── 1. Price History Graph ── */
.price-history-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 28px 0;
}
.price-history-box__header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 6px;
}
.price-history-box__title { font-weight: 700; font-size: .95rem; color: var(--color-text); }
.price-history-box__trend { font-size: .82rem; font-weight: 600; }
.price-history-svg { width: 100%; height: auto; display: block; }
.price-history-box__stats {
  display: flex; gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden; margin-top: 14px;
}
.price-history-stat {
  flex: 1; padding: 12px 14px;
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 2px;
}
.price-history-stat:last-child { border-right: none; }
.price-history-stat__label { font-size: .72rem; color: var(--color-text-muted); }
.price-history-stat__val { font-size: 1rem; font-weight: 800; color: var(--color-text); }
.price-history-stat__val--min { color: var(--color-accent); }
.price-history-stat__val--max { color: #ef4444; }
.price-history-stat__date { font-size: .72rem; color: var(--color-text-muted); }
.price-history-box__note { font-size: .72rem; color: var(--color-text-muted); margin: 10px 0 0; }
@media (max-width: 480px) {
  .price-history-box { padding: 14px; }
  .price-history-box__stats { flex-direction: column; }
  .price-history-stat { border-right: none; border-bottom: 1px solid var(--color-border); }
  .price-history-stat:last-child { border-bottom: none; }
}

/* ── 2. Also Viewed Widget ── */
.also-viewed-widget { margin: 32px 0; max-width: 100%; overflow: hidden; }
.also-viewed-widget__title {
  font-size: 1.05rem; font-weight: 800;
  color: var(--color-text); margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
}
.also-viewed-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  max-width: 100%;
  overflow: hidden;
}
.also-viewed-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.also-viewed-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.also-viewed-card__thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg); }
.also-viewed-card__thumb img { width:100%; height:100%; object-fit:cover; }
.also-viewed-card__body { padding: 10px 12px; flex:1; display:flex; flex-direction:column; gap:4px; }
.also-viewed-card__body h4 { font-size: .82rem; font-weight: 700; margin: 0; line-height: 1.4; }
.also-viewed-card__meta { display:flex; gap:6px; font-size:.75rem; color:var(--color-text-muted); }
.also-viewed-card__cta {
  margin-top: auto; font-size: .75rem; font-weight: 700;
  color: var(--color-shopee);
  display: inline-block; padding-top: 4px;
}
@media (max-width: 600px) {
  .also-viewed-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .also-viewed-grid { grid-template-columns: 1fr; }
}

/* ── 3. Seasonal Sale Banner ── */
.seasonal-banner {
  background: var(--sb-bg, #4f46e5);
  color: var(--sb-color, #fff);
  position: relative;
  z-index: 9998;
}
.seasonal-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.seasonal-banner__icon { font-size: 1.3rem; flex-shrink: 0; }
.seasonal-banner__text { flex: 1; min-width: 0; font-size: .85rem; }
.seasonal-banner__text strong { display: block; font-weight: 800; font-size: .9rem; }
.seasonal-banner__btn {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.2);
  color: var(--sb-color,#fff) !important;
  padding: 7px 16px; border-radius: 50px;
  font-weight: 700; font-size: .82rem;
  text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.3);
  transition: background .2s;
  flex-shrink: 0;
}
.seasonal-banner__btn:hover { background: rgba(255,255,255,.3); }
.seasonal-banner__close {
  background: none; border: none; color: inherit;
  opacity: .7; cursor: pointer; font-size: 1rem;
  padding: 4px; flex-shrink: 0; line-height: 1;
}
.seasonal-banner__close:hover { opacity: 1; }
@media (max-width: 480px) {
  .seasonal-banner__inner { padding: 8px 14px; gap: 8px; }
  .seasonal-banner__text strong { font-size: .82rem; }
  .seasonal-banner__text span { display: none; }
  .seasonal-banner__btn { padding: 6px 12px; font-size: .78rem; }
}

/* ════════════════════════════════════════════
   LAYOUT C: MINIMAL
════════════════════════════════════════════ */
.lmin-hero {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  padding: 80px 24px;
  text-align: center;
  color: #fff;
}
.lmin-hero__inner { max-width: 640px; margin: 0 auto; }
.lmin-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15);
  padding: 4px 14px; border-radius: 50px;
  font-size: .8rem; font-weight: 600;
  margin-bottom: 20px;
}
.lmin-hero__title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900; color: #fff;
  margin-bottom: 28px; line-height: 1.2;
}
.lmin-hero__title span { color: var(--color-accent); }
.lmin-hero__search {
  display: flex; max-width: 500px; margin: 0 auto 20px;
  background: #fff; border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.lmin-hero__search input {
  flex: 1; border: none; outline: none;
  padding: 14px 18px;
  font-family: var(--font-main); font-size: .95rem;
  color: var(--color-text);
}
.lmin-hero__search button {
  background: var(--color-accent); color: #fff;
  border: none; padding: 14px 24px;
  font-weight: 700; font-size: .95rem;
  cursor: pointer; font-family: var(--font-main);
  white-space: nowrap;
}
.lmin-hero__platforms {
  display: flex; justify-content: center; gap: 16px;
  font-size: .82rem; color: rgba(255,255,255,.7);
}

.lmin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap: 20px;
}
.lmin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.lmin-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lmin-card__thumb {
  display: block; aspect-ratio: 16/9;
  overflow: hidden; background: var(--color-bg);
  position: relative;
}
.lmin-card__thumb img { width:100%; height:100%; object-fit:cover; }
.lmin-card__no-img {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size: 2rem; background: var(--color-bg);
}
.lmin-card__score {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: .72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 50px;
}
.lmin-card__body { padding: 14px 16px; }
.lmin-card__cat {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: .7rem; font-weight: 700;
  padding: 1px 8px; border-radius: 50px;
  margin-bottom: 6px; text-transform: uppercase;
}
.lmin-card__body h3 {
  font-size: .88rem; font-weight: 700;
  line-height: 1.4; margin-bottom: 6px;
}
.lmin-card__body h3 a { color: var(--color-text); }
.lmin-card__body h3 a:hover { color: var(--color-primary); }
.lmin-card__price {
  font-size: 1rem; font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.lmin-card__btns { display: flex; gap: 6px; }
.lmin-btn {
  display: inline-flex; align-items: center;
  padding: 6px 10px; border-radius: 8px;
  font-size: .78rem; font-weight: 700;
  text-decoration: none; transition: opacity .2s;
  flex-shrink: 0;
}
.lmin-btn:hover { opacity: .85; }
.lmin-btn--shopee { background: var(--color-shopee); color: #fff; }
.lmin-btn--lazada { background: var(--color-lazada); color: #fff; }
.lmin-btn--read {
  background: var(--color-primary-light);
  color: var(--color-primary); flex: 1;
  justify-content: center;
}

@media (max-width: 768px) {
  .lmin-hero { padding: 56px 16px; }
  .lmin-hero__search { flex-direction: column; border-radius: var(--radius-sm); }
  .lmin-hero__search input,
  .lmin-hero__search button { border-radius: 0; }
  .lmin-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .lmin-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   LAYOUT B: MAGAZINE (v2 — Full Rebuild)
════════════════════════════════════════════ */

/* ── Hero ── */
.lm-hero {
  background: var(--color-bg);
  padding: 0 0 40px;
}
.lm-hero__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
  padding-top: 32px;
}

/* Featured card */
.lm-hero__featured {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--color-primary-dark);
  cursor: pointer;
  text-decoration: none;
}
.lm-hero__featured-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}
.lm-hero__featured:hover .lm-hero__featured-img { transform: scale(1.04); }
.lm-hero__no-thumb {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
.lm-hero__featured-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
}
.lm-hero__featured-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 28px;
  color: #fff;
}
.lm-hero__featured-badges { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.lm-badge {
  display: inline-block; font-size: .7rem; font-weight: 800;
  padding: 3px 10px; border-radius: 50px;
  text-transform: uppercase; letter-spacing: .04em;
}
.lm-badge--new { background: var(--color-accent); color: #fff; }
.lm-badge--cat { background: var(--color-primary); color: #fff; }
.lm-hero__featured-title {
  font-size: clamp(1.2rem,2.5vw,1.8rem);
  font-weight: 900; color: #fff;
  margin-bottom: 8px; line-height: 1.3;
}
.lm-hero__featured-excerpt {
  font-size: .875rem; color: rgba(255,255,255,.8);
  margin-bottom: 12px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.lm-hero__featured-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: .78rem; color: rgba(255,255,255,.7);
  margin-bottom: 14px;
}
.lm-hero__featured-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lm-hero__read-btn {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff; padding: 8px 16px;
  border-radius: 50px; font-size: .82rem; font-weight: 700;
}
.lm-hero__shop-btn {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 50px;
  font-size: .78rem; font-weight: 700;
  text-decoration: none; color: #fff;
}
.lm-hero__shop-btn--shopee { background: var(--color-shopee); }
.lm-hero__shop-btn--lazada { background: var(--color-lazada); }
.lm-hero__shop-btn--tiktok { background: #010101; }

/* Side list */
.lm-side-list {
  display: flex; flex-direction: column; gap: 10px;
}
.lm-side-card {
  display: grid; grid-template-columns: 88px 1fr;
  gap: 10px; align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-decoration: none; color: var(--color-text);
  transition: box-shadow .2s, border-color .2s;
}
.lm-side-card:hover { box-shadow: var(--shadow); border-color: var(--color-primary); }
.lm-side-card__thumb-wrap {
  width: 88px; height: 66px;
  border-radius: 6px; overflow: hidden;
  background: var(--color-bg); flex-shrink: 0;
}
.lm-side-card__thumb { width:100%; height:100%; object-fit:cover; display:block; }
.lm-side-card__no-thumb {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.5rem;
}
.lm-side-card__cat {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: .65rem; font-weight: 700;
  padding: 1px 7px; border-radius: 50px;
  margin-bottom: 4px;
}
.lm-side-card__body h3 {
  font-size: .82rem; font-weight: 700;
  line-height: 1.4; margin-bottom: 4px;
  color: var(--color-text);
}
.lm-side-card__meta { display:flex; gap:8px; font-size:.72rem; color:var(--color-text-muted); }

/* ── Categories bar ── */
.lm-cats { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 12px 0; }
.lm-cats__inner { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lm-cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 6px 14px; border-radius: 50px;
  font-size: .82rem; font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.lm-cat-chip:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
.lm-cat-chip__count { font-size: .68rem; color: var(--color-text-muted); }

/* ── Top Rated ── */
.lm-top-rated { padding: 40px 0; }
.lm-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.lm-section-header h2 { font-size: 1.2rem; font-weight: 800; }
.lm-see-all { font-size: .85rem; color: var(--color-primary); font-weight: 600; }
.lm-top-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.lm-top-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.lm-top-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lm-top-card__thumb {
  display: block; aspect-ratio: 16/9;
  overflow: hidden; background: var(--color-bg);
  position: relative;
}
.lm-top-card__thumb img { width:100%; height:100%; object-fit:cover; }
.lm-top-card__no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.lm-top-card__score {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 50px;
}
.lm-top-card__body { padding: 12px 14px; }
.lm-top-card__body h3 { font-size: .85rem; font-weight: 700; margin-bottom: 6px; line-height: 1.4; }
.lm-top-card__body h3 a { color: var(--color-text); }
.lm-top-card__body h3 a:hover { color: var(--color-primary); }
.lm-top-card__price { font-size: .95rem; font-weight: 800; color: var(--color-primary); margin-bottom: 8px; }
.lm-top-card__btns { display: flex; gap: 4px; flex-wrap: wrap; }
.lm-top-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 8px; border-radius: 6px;
  font-size: .75rem; font-weight: 700;
  text-decoration: none;
}
.lm-top-btn--shopee { background: var(--color-shopee); color: #fff; }
.lm-top-btn--lazada { background: var(--color-lazada); color: #fff; }
.lm-top-btn--tiktok { background: #010101; color: #fff; }
.lm-top-btn--read { background: var(--color-primary-light); color: var(--color-primary); flex: 1; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .lm-hero__inner { grid-template-columns: 1fr; }
  .lm-side-list { display: grid; grid-template-columns: 1fr 1fr; }
  .lm-top-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .lm-side-list { grid-template-columns: 1fr; }
  .lm-top-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lm-hero__featured-info { padding: 16px; }
  .lm-hero__featured-excerpt { display: none; }
}
@media (max-width: 400px) {
  .lm-top-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   SINGLE PAGE — RESPONSIVE FIX v2.1.2
════════════════════════════════════════════ */

/* Top CTA inline */
.single-top-cta { margin: 20px 0; align-items: flex-start; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.single-top-cta__links {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px;
  font-size: .9rem;
  min-width: 0; max-width: 100%;
}
.single-top-cta__links strong { margin-right: 2px; }
.single-cta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 50px;
  font-size: .82rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: opacity .2s;
  max-width: 100%; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis;
}
.single-cta-pill:hover { opacity: .85; }
.single-cta-pill--tiktok { background: #f0f0f0; color: #010101; }
.single-cta-pill--shopee { background: rgba(249,115,22,.12); color: var(--color-shopee); }
.single-cta-pill--lazada { background: rgba(37,99,235,.1); color: var(--color-lazada); }

/* Score Box Mobile */
@media (max-width: 600px) {
  .review-score-box {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 14px;
  }
  .score-circle {
    align-self: center;
    width: 80px; height: 80px;
  }
  .score-bars { width: 100%; min-width: unset; }
  .score-bar-item { font-size: .78rem; }
  .score-bar-item span:first-child { width: 56px; }
}

/* Related posts mobile */
@media (max-width: 600px) {
  .related-posts-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}
@media (max-width: 400px) {
  .related-posts-grid { grid-template-columns: 1fr !important; }
}

/* Price History mobile */
@media (max-width: 480px) {
  .price-history-box__stats { flex-direction: column; }
  .price-history-stat { border-right: none; border-bottom: 1px solid var(--color-border); }
  .price-history-stat:last-child { border-bottom: none; }
}

/* Also Viewed mobile */
@media (max-width: 600px) {
  .also-viewed-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 380px) {
  .also-viewed-grid { grid-template-columns: 1fr; }
}

/* Helpful Widget mobile */
@media (max-width: 480px) {
  .helpful-widget__btns { flex-direction: column; align-items: stretch; }
  .helpful-btn { justify-content: center; }
}

/* Copy Link Widget mobile */
@media (max-width: 480px) {
  .copy-link-widget__row { flex-direction: column; }
  .copy-link-btn { justify-content: center; }
}

/* Entry content images */
.entry-content img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: var(--radius-sm);
  display: block;
}
/* ป้องกัน iframe/video ล้น (เช่น YouTube embed จาก CSV) */
.entry-content iframe,
.entry-content video,
.entry-content embed {
  max-width: 100% !important;
  width: 100%;
}
/* ป้องกัน pre/code ล้น */
.entry-content pre {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* force break long URLs/words */
.entry-content p,
.entry-content li,
.entry-content td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}
.entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}

/* ════════════════════════════════════════════
   SINGLE PAGE — RESPONSIVE FIX v2.1.2
════════════════════════════════════════════ */

/* ── Single Post Header ── */
@media (max-width: 600px) {
  .single-post-header { padding: 16px !important; }
  .single-post-header h1 { font-size: 1.3rem; line-height: 1.3; }
  .post-meta { flex-wrap: wrap; gap: 8px; font-size: .75rem; }
}

/* ── Review Score Box — Full width stack ── */
@media (max-width: 600px) {
  .review-score-box {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    gap: 16px !important;
  }
  .review-score-box > div { width: 100%; }
  .score-circle {
    align-self: center;
    width: 72px; height: 72px;
  }
  .score-circle .score-num { font-size: 1.5rem; }
  .score-bars { width: 100%; min-width: unset !important; }
  .score-bar-item { gap: 6px; }
  .score-bar-item span:first-child { width: 56px; font-size: .75rem; white-space: nowrap; }
}

/* ── Top CTA Links ── */
@media (max-width: 600px) {
  .single-top-cta { padding: 12px 14px !important; }
  .single-top-cta__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .single-cta-pill { font-size: .85rem; padding: 8px 14px; }
}

/* ── Entry Content ── */
@media (max-width: 600px) {
  .entry-content { font-size: .92rem; line-height: 1.75; }
  .entry-content h2 { font-size: 1.1rem; }
  .entry-content h3 { font-size: 1rem; }
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
  }
}

/* ── Pros / Cons ── */
@media (max-width: 600px) {
  .pros-cons-box { grid-template-columns: 1fr !important; gap: 12px; }
  .pros-box, .cons-box { padding: 14px 16px; }
}

/* ── Related Posts ── */
@media (max-width: 600px) {
  .related-posts-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .related-post-card__body { padding: 8px 10px; }
  .related-post-card__title { font-size: .78rem; }
}
@media (max-width: 380px) {
  .related-posts-grid { grid-template-columns: 1fr !important; }
}

/* ── Tags ── */
@media (max-width: 480px) {
  .post-tags-wrap { gap: 4px; }
  .post-tag { font-size: .75rem; padding: 2px 8px; }
}

/* ── FAB Bottom Bar ── */
@media (max-width: 600px) {
  .fab-bar { padding: 8px 10px 10px; }
  .fab__btn { font-size: .78rem; padding: 10px 6px; }
}

/* ════════════════════════════════════════════
   SINGLE POST RESPONSIVE FIX v2.1.2
════════════════════════════════════════════ */

/* ── Score Box ── */
.review-score-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}
.review-score-box > div:last-child {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 520px) {
  .review-score-box {
    flex-direction: column;
    align-items: stretch;
    padding: 16px !important;
    gap: 14px !important;
  }
  .score-circle {
    align-self: center;
    width: 80px !important;
    height: 80px !important;
  }
  .score-circle .score-num { font-size: 1.6rem !important; }
  .score-bars { width: 100%; min-width: unset !important; }
  .score-bar-item { font-size: .78rem; }
  .score-bar-item span:first-child {
    width: 56px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .review-score-box > div:last-child { min-width: 0; width: 100%; }
}

/* ── Affiliate bottom buttons ── */
.aff-cta-section {
  margin: 24px 0;
}
@media (max-width: 520px) {
  .aff-cta-section { margin: 20px 0; }
  .aff-cta-section .btn-cta-shopee,
  .aff-cta-section .btn-cta-lazada,
  .aff-cta-section .btn-cta-tiktok {
    display: flex !important;
    width: 100% !important;
    justify-content: center;
    padding: 14px 20px !important;
    font-size: .95rem !important;
    border-radius: 12px !important;
    margin: 0 0 8px 0 !important;
    box-sizing: border-box;
  }
}

/* ── Single post header ── */
@media (max-width: 520px) {
  .single-post-header { padding: 14px !important; }
  .single-post-header h1 { font-size: clamp(1.2rem, 5vw, 1.6rem); }
  .post-meta { gap: 8px; }
  .post-meta .badge { font-size: .72rem; }
}

/* ── Info box top CTA ── */
@media (max-width: 520px) {
  .single-top-cta { padding: 12px 14px !important; }
  .single-top-cta__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px !important;
  }
  .single-cta-pill {
    width: 100%;
    justify-content: center;
    padding: 8px 14px !important;
    font-size: .85rem !important;
  }
}

/* ── Entry content ── */
@media (max-width: 520px) {
  .entry-content { font-size: .9rem; line-height: 1.75; }
  .entry-content h2 { font-size: 1.15rem !important; }
  .entry-content h3 { font-size: 1rem !important; }
  .entry-content img { max-width: 100%; height: auto; }
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .entry-content pre {
    overflow-x: auto;
    font-size: .8rem;
  }
}

/* ── Pros/Cons ── */
@media (max-width: 520px) {
  .pros-cons-box { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pros-box, .cons-box { padding: 14px !important; }
  .pros-box li, .cons-box li { font-size: .85rem !important; }
}

/* ── Related posts ── */
@media (max-width: 520px) {
  .related-posts-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .related-post-card__thumb { height: 90px !important; }
  .related-post-card__title { font-size: .78rem !important; }
}
@media (max-width: 360px) {
  .related-posts-grid { grid-template-columns: 1fr !important; }
}

/* ── Helpful widget ── */
@media (max-width: 400px) {
  .helpful-widget__btns { flex-direction: column; }
  .helpful-btn { width: 100%; justify-content: center; }
}

/* ── Copy link widget ── */
@media (max-width: 400px) {
  .copy-link-widget__row { flex-direction: column; }
  .copy-link-btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════
   MOBILE RESPONSIVE — FINAL CLEAN v2.1.3
   Single source of truth สำหรับ mobile styles
════════════════════════════════════════════ */

/* ── Affiliate CTA Buttons ── */
@media (max-width: 600px) {
  .aff-cta-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
    align-items: stretch;
  }
  .btn-cta-shopee,
  .btn-cta-lazada,
  .btn-cta-tiktok {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 14px 20px !important;
    font-size: .95rem !important;
    border-radius: 12px !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .btn-cta-lazada { margin-left: 0 !important; }
}

/* ── Score Box ── */
@media (max-width: 600px) {
  .review-score-box {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    gap: 14px !important;
  }
  .score-circle {
    align-self: center !important;
    width: 80px !important;
    height: 80px !important;
  }
  .score-circle .score-num { font-size: 1.5rem !important; }
  .review-score-box > div:last-child { width: 100%; min-width: 0; }
  .score-bars { width: 100% !important; min-width: unset !important; }
  .score-bar-item { font-size: .78rem; }
  .score-bar-item span:first-child {
    width: 56px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Single Post Header ── */
@media (max-width: 600px) {
  .single-post-header { padding: 14px !important; }
  .single-post-header h1 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
  .post-meta { gap: 6px; flex-wrap: wrap; }
  .post-meta .badge { font-size: .72rem; }
}

/* ── Top CTA Pills ── */
@media (max-width: 600px) {
  .single-top-cta { padding: 12px 14px !important; }
  .single-top-cta__links {
    flex-direction: column;
    align-items: stretch;
    gap: 6px !important;
  }
  .single-cta-pill {
    width: 100%;
    justify-content: center;
    padding: 9px 14px !important;
    font-size: .85rem !important;
  }
}

/* ── Entry Content ── */
@media (max-width: 600px) {
  .entry-content { font-size: .92rem; line-height: 1.75; }
  .entry-content h2 { font-size: 1.15rem !important; }
  .entry-content h3 { font-size: 1rem !important; }
  .entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
  .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  .entry-content pre  { overflow-x: auto; font-size: .8rem; }
  .entry-content blockquote { padding: 12px 16px; margin: 16px 0; }
}

/* ── Pros / Cons ── */
@media (max-width: 600px) {
  .pros-cons-box { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pros-box, .cons-box { padding: 14px !important; }
  .pros-box li, .cons-box li { font-size: .85rem !important; }
}

/* ── Related Posts ── */
@media (max-width: 600px) {
  .related-posts-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}
@media (max-width: 380px) {
  .related-posts-grid { grid-template-columns: 1fr !important; }
}

/* ── Helpful + Copy Link ── */
@media (max-width: 480px) {
  .helpful-widget__btns { flex-direction: column; }
  .helpful-btn { width: 100%; justify-content: center; }
  .copy-link-widget__row { flex-direction: column; }
  .copy-link-btn { width: 100%; justify-content: center; }
}

/* ── Posts Grid ── */
@media (max-width: 600px) {
  .posts-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}
@media (max-width: 380px) {
  .posts-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════
   CONTENT RESPONSIVE — Global Fix
   ครอบ content จาก CSV import และ manual
════════════════════════════════════════════ */

/* Force all images responsive — override inline width/height */
.entry-content img,
.site-container img:not(.site-logo img):not(.nav-img) {
  max-width: 100% !important;
  height: auto !important;
}

/* Table responsive wrapper */
.table-responsive-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
  width: 100%;
}
.table-responsive-wrap table {
  min-width: 400px;
}

/* ── Mobile: ทุก image ใน content ── */
@media (max-width: 600px) {
  .entry-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 12px auto;
    border-radius: var(--radius-sm);
  }
  /* ป้องกัน container ล้น */
  .entry-content {
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* iframe responsive (YouTube, etc.) */
  .entry-content iframe {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* ป้องกัน long text ล้น */
  .entry-content * {
    max-width: 100%;
  }
}

/* ── site-container global overflow fix ── */
.site-container {
  overflow-x: hidden;
}

/* ════════════════════════════════════════════
   CSV IMPORT CONTENT — Force Responsive
   ครอบ inline styles จาก Google Sheets/Excel
════════════════════════════════════════════ */
.entry-content *[style*="width"],
.entry-content *[style*="min-width"] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.entry-content span[style],
.entry-content p[style],
.entry-content div[style] {
  white-space: normal !important;
}
/* Google Docs export มักมี font-size ใหญ่ */
@media (max-width: 600px) {
  .entry-content span[style*="font-size"] {
    font-size: inherit !important;
  }
  .entry-content p[style*="font-size"] {
    font-size: .92rem !important;
  }
}

/* ══════════════════════════════════════════
   UNIVERSAL: 3 Affiliate Buttons — Mobile Safe
   ป้องกันปุ่ม Shopee+Lazada+TikTok ล้นทุก container
══════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ทุก wrapper ที่มีปุ่ม affiliate ให้ stack แนวตั้ง */
  .aff-cta-wrap,
  .single-top-cta__links,
  .price-alert-widget__links,
  .widget-sticky-cta .aff-cta-wrap {
    flex-direction: column !important;
    width: 100% !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  /* ทุกปุ่ม affiliate เต็มความกว้าง */
  .btn-cta-shopee,
  .btn-cta-lazada,
  .btn-cta-tiktok,
  .single-cta-pill,
  .price-alert-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  /* price compare: stack แนวตั้งเสมอบน mobile */
  .price-compare-grid {
    grid-template-columns: 1fr !important;
  }
  .price-compare-card {
    border-right: none !important;
    border-bottom: 1px solid var(--color-border) !important;
  }
  .price-compare-card:last-child {
    border-bottom: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE OVERFLOW NUCLEAR FIX
   ป้องกัน horizontal overflow ทุก element บน mobile
   ครอบ 100% ไม่มีทางล้นแนวนอนอีกแล้ว
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Root clamp — ปิดประตูหลัก */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* 2. ทุก block element ใน content ห้ามเกิน viewport */
  .site-container,
  .content-area,
  .content-area--full,
  #primary,
  .entry-content,
  .single-post-header,
  article {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 3. ทุก flex/grid container — ป้องกัน child ล้น */
  .review-score-box,
  .score-bars,
  .score-bar-item,
  .info-box,
  .single-top-cta,
  .single-top-cta__links,
  .price-alert-widget,
  .price-alert-widget__links,
  .price-compare-box,
  .price-compare-grid,
  .also-viewed-widget,
  .also-viewed-grid,
  .also-viewed-card,
  .aff-cta-wrap,
  .aff-cta-section,
  .toc-box,
  .related-posts,
  .related-posts__grid,
  .faq-section,
  .verdict-box,
  .pros-cons-box,
  .cta-bottom-section {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 4. ทุก flex child ห้ามขยายเกิน parent */
  .review-score-box > *,
  .info-box > *,
  .price-alert-widget > *,
  .single-top-cta > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 5. ทุก inline element ที่มี white-space:nowrap ให้ wrap ได้ */
  .single-cta-pill {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* 6. ปุ่ม affiliate ทุกตัว stack แนวตั้ง full-width */
  .aff-cta-wrap,
  .single-top-cta__links,
  .price-alert-widget__links {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .btn-cta-shopee,
  .btn-cta-lazada,
  .btn-cta-tiktok,
  .single-cta-pill,
  .price-alert-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 7. Also Viewed — 2 columns ไม่เกินนี้ */
  .also-viewed-grid {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }
  .also-viewed-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .also-viewed-card__body h4 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* 8. Score box — force stack เมื่อแคบ */
  .review-score-box {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
  }
  .score-circle {
    align-self: center !important;
  }
  .score-bar-track {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .score-bar-item {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* 9. ห้าม table ล้น */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* 10. ห้าม pre/code ล้น */
  pre, code {
    overflow-x: auto !important;
    max-width: 100% !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }
}

/* ── Extra tight: ≤480px ── */
@media (max-width: 480px) {
  .also-viewed-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .review-score-box {
    padding: 14px !important;
    gap: 12px !important;
  }
  .score-bar-item span:first-child {
    width: 52px !important;
    font-size: .72rem !important;
  }
}

/* ── Very small: ≤360px ── */
@media (max-width: 360px) {
  .also-viewed-grid {
    grid-template-columns: 1fr !important;
  }
  .price-compare-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── ลบช่องว่างระหว่าง content กับ footer ── */
#main-content { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.site-container { margin-bottom: 0 !important; }

/* Hide "Posts pagination" screen-reader label visually */
.pagination .nav-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.navigation.pagination h2.screen-reader-text,
.navigation.pagination .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}