/* light.css — โทนขาวพรีเมี่ยม override โทนมืดทั้งหมด (โหลดท้ายสุด)
 * พื้นหลังขาวทุกหน้า · การ์ดขาวเงานุ่ม · ทอง = ตัวเด่น · น้ำเงิน = ตัวรอง */

:root {
  --bg:          #ffffff;
  --bg2:         #f8fafc;
  --surface:     #ffffff;
  --border:      #e2e8f0;
  --border-l:    #f1f5f9;
  --dim:         #94a3b8;

  /* พลิกชุด hero-* จากมืดเป็นขาว — single.css / footer / hero ตามมาเองทั้งหมด */
  --hero-bg:     #ffffff;
  --hero-bg2:    #f8fafc;
  --hero-text:   #0f172a;
  --hero-muted:  #475569;
  --hero-border: rgba(15, 23, 42, 0.10);
  --hero-glow1:  rgba(251, 191, 36, 0.16);
  --hero-glow2:  rgba(37, 99, 235, 0.07);

  /* ทองเข้มสำหรับ "ตัวหนังสือ" บนพื้นขาว (เหลืองสดอ่านไม่ออก) */
  --gold-text:   #b45309;

  /* เงานุ่มมาตรฐานของการ์ด */
  --card-shadow:       0 10px 34px rgba(15, 23, 42, 0.07);
  --card-shadow-hover: 0 20px 48px rgba(15, 23, 42, 0.13);
}

/* ── Navigation: กระจกขาว ── */
#site-nav {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--border);
}
#site-nav.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 24px rgba(15, 23, 42, 0.08);
}
.nav-logo { filter: none; }
.nav-links a { color: var(--hero-muted); }
.nav-links a:hover { color: var(--hero-text); background: rgba(15, 23, 42, 0.05); }
.nav-links a.active { background: var(--primary); color: #111; }
#nav-toggle { color: var(--hero-text); }
#nav-mobile {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--border);
}
#nav-mobile a:hover { color: var(--hero-text); background: rgba(15, 23, 42, 0.05); }

/* เมนูย่อย (dropdown) โทนขาว */
.nav-parent { color: var(--hero-muted); }
.nav-item:hover .nav-parent,
.nav-parent:hover { color: var(--hero-text); background: rgba(15, 23, 42, 0.05); }
.nav-parent.active { background: var(--primary); color: #111; }
.nav-dropdown {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--card-shadow-hover, 0 20px 48px rgba(15,23,42,.13));
}
.nav-dropdown a { color: var(--muted); }
.nav-dropdown a:hover { background: var(--bg2); color: var(--text); }
#nav-mobile .nav-dropdown { background: rgba(15, 23, 42, 0.03); }

/* ── Hero: ขาวสว่าง แสงทองจางๆ ── */
#hero-sticky {
  background: linear-gradient(160deg, #ffffff 0%, #fffbeb 55%, #ffffff 100%);
}
.hero-particles span { opacity: 0; }
.hero-label { text-shadow: none; color: var(--yellow-d); }
/* ทองไล่เฉดเข้มขึ้นให้อ่านชัดบนพื้นขาว — แสงวิ่งเหมือนเดิม */
.hero-title .hl {
  background: linear-gradient(100deg,
    #f59e0b 0%, #d97706 30%, #92400e 50%,
    #d97706 70%, #f59e0b 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-scroll-hint { color: var(--dim); }
.hero-scroll-hint .arrow { border-color: var(--dim); }

/* ── Stacking panels: การ์ดขาว เงานุ่ม ── */
.price-card, .stack-panel .price-card,
.product-card, .stack-panel .product-card,
.post-list, .stack-panel .post-list {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--border);
  box-shadow: var(--card-shadow);
}
.price-card:hover, .stack-panel .price-card:hover,
.product-card:hover, .stack-panel .product-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--primary);
}

/* Pricing text บนการ์ดขาว */
.price-card, .stack-panel .price-card { color: var(--text2); }
.price-card .price-name, .stack-panel .price-card .price-name,
.price-card .price-tag-label, .stack-panel .price-card .price-tag-label { color: var(--text); }
.price-card .price-sub, .stack-panel .price-card .price-sub,
.price-card .price-period, .stack-panel .price-card .price-period,
.price-card .price-original, .stack-panel .price-card .price-original { color: var(--muted); }
.price-card .price-recommend, .stack-panel .price-card .price-recommend {
  background: var(--bg2);
  color: var(--text2);
}
.price-card .price-features li, .stack-panel .price-card .price-features li { color: var(--text2); }
.price-card .price-cta, .stack-panel .price-card .price-cta {
  border-color: var(--border);
  color: var(--text2);
}

/* การ์ด popular (ทอง) — ครีมทองอ่อน ไม่ใช่ดำ */
.price-card.popular, .stack-panel .price-card.popular {
  background: linear-gradient(160deg, #fffbeb 0%, #ffffff 60%);
  color: var(--text2);
  border: 2px solid var(--yellow);
  box-shadow: 0 14px 44px rgba(217, 119, 6, 0.16);
}
.price-card.popular:hover, .stack-panel .price-card.popular:hover { box-shadow: 0 20px 52px rgba(217, 119, 6, 0.22); }
.price-card.popular .price-name, .stack-panel .price-card.popular .price-name { color: var(--text); }
.price-card.popular .price-tag-label, .stack-panel .price-card.popular .price-tag-label,
.price-card.popular .price-sub, .stack-panel .price-card.popular .price-sub,
.price-card.popular .price-period, .stack-panel .price-card.popular .price-period { color: var(--muted); }
.price-card.popular .price-recommend, .stack-panel .price-card.popular .price-recommend { background: rgba(217, 119, 6, 0.08); color: var(--text2); }
.price-card.popular .price-features li, .stack-panel .price-card.popular .price-features li { color: var(--text2); }
.price-card.popular .price-number, .stack-panel .price-card.popular .price-number,
.price-card.popular .price-currency, .stack-panel .price-card.popular .price-currency { color: var(--yellow-d); }

/* promo (น้ำเงิน) — ปุ่มทึบให้เด่นเท่าการ์ดพรีเมี่ยม */
.price-card.promo, .stack-panel .price-card.promo { border-color: var(--blue-l); box-shadow: 0 12px 36px rgba(37, 99, 235, 0.10); }
.price-card.promo .price-number, .stack-panel .price-card.promo .price-number,
.price-card.promo .price-currency, .stack-panel .price-card.promo .price-currency { color: var(--blue); }
.price-card.promo .price-cta, .stack-panel .price-card.promo .price-cta {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.price-card.promo .price-cta:hover, .stack-panel .price-card.promo .price-cta:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
}

/* trial (เทา) — ปุ่มทึบเข้มขึ้น ไม่ให้ดูเป็นตัวเลือกที่ถูกลืม */
.price-card.trial, .stack-panel .price-card.trial { border-color: var(--border); }
.price-card.trial:hover, .stack-panel .price-card.trial:hover { border-color: var(--gray-l); }
.price-card.trial .price-number, .stack-panel .price-card.trial .price-number,
.price-card.trial .price-currency, .stack-panel .price-card.trial .price-currency { color: var(--gray-d); }
.price-card.trial .price-badge, .stack-panel .price-card.trial .price-badge { background: var(--border); color: var(--gray-d); }
.price-card.trial .price-cta, .stack-panel .price-card.trial .price-cta {
  background: var(--gray-d);
  border-color: var(--gray-d);
  color: #fff;
}
.price-card.trial .price-cta:hover, .stack-panel .price-card.trial .price-cta:hover {
  background: #1e293b;
  border-color: #1e293b;
}

/* ── Products ── */
.stack-panel .product-img {
  background: #ffffff;
  border-color: var(--border);
  color: var(--dim);
}
/* รูปสินค้าจาก Sheet: ขนาดพอดีกรอบ ไม่บิดสัดส่วน */
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
  background: #ffffff;
}
a.product-card { display: block; }
.product-body .product-btn { display: block; text-align: center; text-decoration: none; }

/* Dropdown กรองหมวดสินค้า */
.products-header { position: relative; }
.filter-bar { display: flex; justify-content: flex-end; }
.dropdown { position: relative; }
.dropdown-toggle {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #ffffff;
  color: var(--text2);
  cursor: pointer;
  transition: 0.15s;
}
.dropdown-toggle:hover { border-color: var(--yellow-d); color: var(--yellow-d); }
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow-hover);
  overflow: hidden;
  z-index: 50;
}
.dropdown-menu.active { display: block; }
.dropdown-item {
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: background 0.12s;
}
.dropdown-item:hover { background: var(--bg2); color: var(--yellow-d); }

/* Pagination สินค้า */
.products-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.products-pagination .page-btn {
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 700;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #ffffff;
  color: var(--text2);
  cursor: pointer;
  transition: 0.15s;
}
.products-pagination .page-btn:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: #111;
}
.products-pagination .page-btn:disabled { opacity: 0.3; cursor: default; }
.products-pagination .page-info {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--mono);
}
.stack-panel .product-name { color: var(--text); }
.stack-panel .products-see-all { color: var(--muted); border-color: var(--border); }
.stack-panel .section-label { color: var(--muted); }

/* ── Post list ── */
.stack-panel .post-list-head { background: var(--bg2); border-color: var(--border); }
.stack-panel .post-list-head span { color: var(--dim); }
.stack-panel .post-row { border-color: var(--border-l); }
.stack-panel .post-row:hover { background: var(--bg2); }
.stack-panel .post-title { color: var(--text2); }
.stack-panel .post-row:hover .post-title { color: var(--text); }
.stack-panel .post-num { color: var(--dim); }
.stack-panel .post-date { color: var(--muted); }
.stack-panel .posts-header-label { color: var(--muted); }

/* ── Category filter ── */
.stack-panel .cat-btn {
  background: #ffffff;
  border-color: var(--border);
  color: var(--muted);
}
.stack-panel .cat-btn:hover { border-color: var(--yellow-d); color: var(--yellow-d); }
.stack-panel .cat-btn.active,
.cat-btn.active { background: var(--primary); border-color: var(--primary); color: #111; }

/* ── Footer: ขาวนวล ── */
#site-footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
}
.footer-logo img { filter: none; }

/* ── หน้าบทความ (single.css วิ่งตาม hero-vars แล้ว — เก็บจุดที่ฝังค่ามืด) ── */
body.single-page {
  background: linear-gradient(160deg, #ffffff 0%, #fffbeb 60%, #ffffff 100%);
}
.art-body a { color: var(--gold-text); border-bottom-color: rgba(180, 83, 9, 0.3); }
.art-body a:hover { border-color: var(--gold-text); }
.art-body blockquote { background: rgba(15, 23, 42, 0.03); border-left-color: var(--yellow-d); }
.art-body code { background: rgba(15, 23, 42, 0.06); color: var(--gold-text); }
.art-body pre { background: #1e293b; border-color: #334155; }
.art-body pre code { color: #f8fafc; background: none; }
.art-body th { background: rgba(15, 23, 42, 0.04); }
.art-body td { border-bottom-color: rgba(15, 23, 42, 0.06); }
.art-cat-badge.cat-microsoft { background: rgba(110,193,228,0.15); color: #2980b9; }

/* ── ฝั่ง WordPress (wp-extra) ── */
/* กรอบรูปบนพื้นขาว: ขอบบาง + เงานุ่ม (พื้นขาวของรูปกลืนไปเอง) */
.art-body img {
  background: #ffffff;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}
.art-body div[style] img { border: none; box-shadow: none; }

#archive-outer .post-list {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--card-shadow);
}
#archive-outer .post-list-head { background: var(--bg2); border-color: var(--border); }
#archive-outer .post-list-head span { color: var(--dim); }
#archive-outer .post-row { border-color: var(--border-l); }
#archive-outer .post-row:hover { background: var(--bg2); }
#archive-outer .post-title { color: var(--text2); }
#archive-outer .post-row:hover .post-title { color: var(--text); }
#archive-outer .post-date { color: var(--muted); }

.ms-pagination .page-numbers { border-color: var(--border); color: var(--muted); }
.ms-pagination a.page-numbers:hover { border-color: var(--yellow-d); color: var(--yellow-d); }
.ms-pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #111; }

.art-body input[type="text"],
.art-body input[type="email"],
.art-body input[type="tel"],
.art-body input[type="password"],
.art-body input[type="search"],
.art-body input[type="number"],
.art-body select,
.art-body textarea {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}
.art-body .woocommerce-message,
.art-body .woocommerce-info,
.art-body .woocommerce-error {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text2);
}