@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//aycontento.com/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.4.1") format("woff2");
	font-display:block;
}

:root {
	--wd-text-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #777777;
	--wd-text-font-size: 14px;
	--wd-title-font: "Anuphan", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 500;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Anuphan", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-widget-title-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Anuphan", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 16px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(77,175,255);
	--wd-alternative-color: rgb(116,209,76);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(116,209,76);
	--btn-accented-bgcolor-hover: rgb(116,209,76);
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(77,175,255);
	--wd-link-color-hover: rgb(116,209,76);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url();
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(234,242,244);
	--wd-bordered-bg:rgb(234,242,244);
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #053359;
	background-image: none;
}
html .widget_product_categories .product-categories > li > a, html .widget_product_categories .product-categories > li > .children > li > a, html .widget_product_categories .product-categories li a {
	font-family: "Noto Sans Thai", Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: rgb(5,51,89);
}
.page :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1300px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1300px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(5,51,89);
}

/* ย้าย Cookie Bar ไปมุมซ้ายล่าง (แก้ไข) */
.wd-cookies-popup {
    /* เปลี่ยนจาก auto 0 0 0 (ล่าง-เต็มจอ) 
       เป็น auto auto 20px 20px (ล่าง-ซ้าย) */
    inset: auto auto 20px 20px;
    
    width: 350px; /* กำหนดความกว้าง (ปรับได้ตามชอบ) */
    max-width: 90%; /* กันล้นจอมือถือ */
    border-radius: 8px; /* ทำให้ขอบมน (ถ้าต้องการ) */
}
/* ============================================================
   AY Contento — CSS Master
   Updated: 2026-05-14
   Sections:
     1. Design Tokens (CSS Variables)
     2. Cookie Bar
     3. Product Spec Table  (.ci-table-modern)
     4. Content Grid System (.ci-grid-*)
   ============================================================ */


/* ──────────────────────────────────────────────
   1. DESIGN TOKENS
   ────────────────────────────────────────────── */
:root {
  --ci-navy:        #053359;
  --ci-blue:        #4DAFFF;
  --ci-bg-light:    #f8fbff;
  --ci-white:       #ffffff;

  /* Grid tokens */
  --ci-gap:         16px;     /* ช่องว่างระหว่าง card */
  --ci-radius:      12px;     /* ขอบมนมาตรฐาน */
  --ci-shadow:      0 4px 15px rgba(5, 51, 89, 0.08);
  --ci-border:      1px solid #e0e6ed;

  /* Card accent colors */
  --ci-green:       #16a34a;
  --ci-green-light: #f0fdf4;
  --ci-green-border:#86efac;
}


/* ──────────────────────────────────────────────
   2. COOKIE BAR
   ────────────────────────────────────────────── */
.wd-cookies-popup {
  inset: auto auto 20px 20px;
  width: 350px;
  max-width: 90%;
  border-radius: 8px;
}


/* ──────────────────────────────────────────────
   3. PRODUCT SPEC TABLE  (.ci-table-modern)
   ────────────────────────────────────────────── */
.custom-spec-table-wrapper {
  font-family: 'Sarabun', sans-serif;
  margin: 20px 0;
  width: 100%;
}

.ci-table-modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--ci-border);
  border-radius: var(--ci-radius);
  overflow: hidden;
  box-shadow: var(--ci-shadow);
  table-layout: fixed;
}

.ci-table-modern thead tr {
  background-color: var(--ci-navy) !important;
}

.ci-table-modern th {
  padding: 15px;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ci-white) !important;
}

.ci-table-modern td {
  padding: 12px 15px;
  border-bottom: 1px solid #edf2f7;
  color: #333;
  line-height: 1.4;
  font-size: 0.95rem;
  vertical-align: middle;
  word-wrap: break-word;
}

/* คอลัมน์ซ้าย (หัวข้อ) */
.ci-table-modern td:first-child {
  background-color: var(--ci-bg-light);
  font-weight: 600;
  color: var(--ci-navy);
  width: 40%;
  border-right: 1px solid #e0e6ed;
}

/* Bullet */
.ci-table-modern td:first-child::before {
  content: "•";
  color: var(--ci-blue);
  margin-right: 6px;
}

.ci-table-modern tbody tr:last-child td {
  border-bottom: none;
}

.ci-table-modern tbody tr:hover {
  background-color: #f0f7ff;
}

/* Responsive — คงรูปตารางไว้ ลดขนาด padding/font เท่านั้น */
@media screen and (max-width: 600px) {
  .ci-table-modern th,
  .ci-table-modern td {
    padding: 10px 8px;
    font-size: 0.85rem;
  }
  .ci-table-modern td:first-child {
    width: 45%;
  }
}


/* ──────────────────────────────────────────────
   4. CONTENT GRID SYSTEM  (.ci-grid-*)
   ──────────────────────────────────────────────
   ใช้สำหรับ: Feature Cards, Highlight Boxes,
   FAQ Layout, Comparison Row ฯลฯ
   ────────────────────────────────────────────── */

/* Base wrapper — ล้อมทุก grid */
.ci-grid {
  display: grid;
  gap: var(--ci-gap);
  margin: 20px 0;
}

/* ── Column presets ── */
.ci-grid-2  { grid-template-columns: repeat(2, 1fr); }
.ci-grid-3  { grid-template-columns: repeat(3, 1fr); }
.ci-grid-4  { grid-template-columns: repeat(4, 1fr); }

/* Asymmetric: sidebar layout (1:2 / 2:1) */
.ci-grid-1-2 { grid-template-columns: 1fr 2fr; }
.ci-grid-2-1 { grid-template-columns: 2fr 1fr; }

/* ── Responsive collapse ──
   ทุก column preset พับเป็น 1 คอลัมน์บนมือถือ
   ยกเว้น ci-grid-2 ที่ยังคงเป็น 2 คอลัมน์แต่เล็กลง */
@media screen and (max-width: 768px) {
  .ci-grid-3,
  .ci-grid-4,
  .ci-grid-1-2,
  .ci-grid-2-1  { grid-template-columns: 1fr; }
}
@media screen and (max-width: 480px) {
  .ci-grid-2    { grid-template-columns: 1fr; }
}

/* ── ci-card  (ใช้ใน ci-grid ทุกประเภท) ── */
.ci-card {
  background: var(--ci-white);
  border: var(--ci-border);
  border-radius: var(--ci-radius);
  padding: 20px;
  box-shadow: var(--ci-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Accent top-border variants */
.ci-card--blue   { border-top: 3px solid var(--ci-blue); }
.ci-card--navy   { border-top: 3px solid var(--ci-navy); }
.ci-card--green  { border-top: 3px solid var(--ci-green); }

/* Light-fill variants */
.ci-card--bg-blue  { background: var(--ci-bg-light);   border-top: 3px solid var(--ci-blue); }
.ci-card--bg-green { background: var(--ci-green-light); border-top: 3px solid var(--ci-green); border-color: var(--ci-green-border); }

/* ── Card sub-elements ── */
.ci-card__icon {
  font-size: 28px;
  line-height: 1;
}
.ci-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ci-navy);
  margin: 0;
}
.ci-card__body {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}
.ci-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--ci-blue);
  color: var(--ci-navy);
  align-self: flex-start;
}

/* ── Highlight / Banner strip ── */
.ci-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ci-bg-light);
  border: 1px solid var(--ci-blue);
  border-radius: var(--ci-radius);
  padding: 14px 20px;
  margin: 16px 0;
  font-family: 'Sarabun', sans-serif;
}
.ci-banner__icon {
  font-size: 32px;
  flex-shrink: 0;
}
.ci-banner__text {
  font-size: 14px;
  color: var(--ci-navy);
  margin: 0;
  line-height: 1.6;
}
.ci-banner__text a {
  color: var(--ci-navy);
  font-weight: 700;
  border-bottom: 2px solid var(--ci-blue);
  text-decoration: none;
}
.ci-banner__text a:hover {
  color: var(--ci-blue);
}

/* ── FAQ list (Grid-based) ── */
.ci-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.ci-faq-item {
  border: var(--ci-border);
  border-radius: 10px;
  overflow: hidden;
  font-family: 'Sarabun', sans-serif;
}
.ci-faq-q {
  background: var(--ci-bg-light);
  padding: 13px 18px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ci-navy);
  border-left: 4px solid var(--ci-blue);
  cursor: pointer;
}
.ci-faq-a {
  padding: 12px 18px;
  font-size: 14px;
  color: #444;
  line-height: 1.7;
  border-top: 1px solid #e8f0f9;
  background: var(--ci-white);
}
.ci-faq-a a {
  color: var(--ci-navy);
  font-weight: 600;
  border-bottom: 1px solid var(--ci-blue);
  text-decoration: none;
}

/* ── Guarantee / Document box ── */
.ci-doc-box {
  background: var(--ci-green-light);
  border: 1px solid var(--ci-green-border);
  border-left: 5px solid var(--ci-green);
  border-radius: 0 var(--ci-radius) var(--ci-radius) 0;
  padding: 16px 20px;
  margin: 16px 0;
  font-family: 'Sarabun', sans-serif;
}
.ci-doc-box__title {
  color: #15803d;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 10px;
}
.ci-doc-box__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ci-doc-box__list li {
  color: #166534;
  font-size: 14px;
  padding: 4px 0;
  line-height: 1.5;
}
.ci-doc-box__list li::before {
  content: "✅ ";
}

/* ── Compare table color helpers ── */
.ci-val-win  { color: var(--ci-green); font-weight: 700; }
.ci-val-lose { color: #dc2626; }
.ci-th-green { background-color: #0a5c38 !important; }

/* ── Step / Checklist helpers ── */
.ci-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--ci-navy);
  color: var(--ci-white);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.ci-chip {
  display: inline-block;
  background: #e8f4ff;
  color: var(--ci-navy);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.ci-urgent {
  color: #dc2626;
  font-weight: 700;
}
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ci-gap); margin: 20px 0; }
.feature-card  { border: var(--ci-border); border-radius: var(--ci-radius); padding: 16px 18px; background: var(--ci-bg-light); border-top: 3px solid var(--ci-blue); display: flex; flex-direction: column; gap: 10px; }
@media screen and (max-width: 480px) { .features-grid { grid-template-columns: 1fr; } }