@charset "UTF-8";
/* ==========================================================================
   modern.css — ชั้นปรับหน้าตาเว็บให้ทันสมัย (โหลดเป็นไฟล์สุดท้าย)
   คงโทนสีแบรนด์เดิม (#467F8C) แต่ปรับ typography / spacing / การ์ด / ปุ่ม
   ให้สะอาดและอ่านง่ายขึ้น  —  แก้ที่ไฟล์นี้ไฟล์เดียว ไม่แตะ theme.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* แบรนด์ (โทนเดิม) */
	--brand:        #467F8C;
	--brand-600:    #3B6E7A;
	--brand-700:    #2E5661;
	--brand-100:    #DCEAEE;
	--brand-50:     #F1F7F8;

	/* สีเน้น (โทนส้มเดิมจากเมนู) */
	--accent:       #B24B10;
	--accent-50:    #FDF3EC;

	/* กลาง ๆ */
	--ink:          #16242A;
	--ink-2:        #45585F;
	--ink-3:        #74868C;
	--line:         #E5EBED;
	--line-soft:    #EFF3F4;
	--surface:      #FFFFFF;
	--bg:           #F6F9FA;
	--bg-alt:       #EEF3F5;

	/* สถานะ */
	--ok:           #17864B;
	--danger:       #C0392B;

	/* รูปทรง */
	--r-sm:  10px;
	--r:     14px;
	--r-lg:  20px;
	--r-pill: 999px;

	/* เงา — ฟุ้งและเบา ไม่ใช่เงาแข็งแบบเดิม */
	--sh-1: 0 1px 2px rgba(22, 36, 42, .05);
	--sh-2: 0 2px 8px rgba(22, 36, 42, .06), 0 1px 2px rgba(22, 36, 42, .04);
	--sh-3: 0 10px 28px rgba(22, 36, 42, .10), 0 2px 6px rgba(22, 36, 42, .05);
	--sh-4: 0 18px 44px rgba(22, 36, 42, .14);

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. ฐาน: ตัวอักษร + จังหวะการอ่าน
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--bg);
	color: var(--ink-2);
	font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.75;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* custom.css ตั้ง p{margin:0 !important} ไว้ ทำให้ย่อหน้าติดกันหมด — คืนระยะให้ */
p {
	color: var(--ink-2) !important;
	line-height: 1.75 !important;
	margin: 0 0 1rem !important;
}
p:last-child { margin-bottom: 0 !important; }

h1, h2, h3, h4, h5, h6,
.font-1, .font-2 {
	font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ink);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.4;
}

h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.28; font-weight: 600; }
h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; }
h3 { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.45; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 16px; }

.text-size-1 { font-size: 21px; font-weight: 500; line-height: 1.4; }

strong, b { font-weight: 600; }

a {
	color: var(--brand-600);
	transition: color .2s var(--ease);
}
a:hover { color: var(--brand-700); }

/* โฟกัสที่มองเห็นได้ (คีย์บอร์ด) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid rgba(70, 127, 140, .45);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

img { max-width: 100%; }

/* สีข้อความชุดเดิม — ปรับให้ contrast ผ่านเกณฑ์ */
.text-primary { color: var(--brand-600) !important; }
.text-grey    { color: var(--ink-3) !important; }
.text-black   { color: var(--ink) !important; }
.text-footer  { color: #BFE0E4 !important; }

/* --------------------------------------------------------------------------
   3. โครงหน้า / section
   -------------------------------------------------------------------------- */
.body { background: var(--bg); }

/* พื้นหลัง section เดิมถูกกำหนดเป็น inline style สีเทาหลายเฉด — ทำให้เป็นชุดเดียว */
.main .section[style*="background"] { background: transparent !important; }

.main .section {
	border: 0 !important;
	margin: 0 !important;
}

.section.section-height-2 {
	padding-top: clamp(40px, 5vw, 72px) !important;
	padding-bottom: clamp(40px, 5vw, 72px) !important;
}

.sec-tone-plain { background: var(--surface) !important; }
.sec-tone-soft  { background: var(--bg) !important; }
.sec-tone-alt   { background: var(--bg-alt) !important; }

@media (min-width: 1400px) {
	.container { max-width: 1240px; }
}

/* หัวข้อหมวด — แทนรูป bar-1.png ด้วยเส้นคั่น CSS */
.sec-head {
	text-align: center;
	margin-bottom: clamp(28px, 3.5vw, 44px);
}
.sec-head .sec-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand);
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r-pill);
	padding: 4px 14px;
	margin-bottom: 14px;
}
.sec-head .sec-title {
	color: var(--ink);
	font-weight: 600;
	margin: 0 0 12px;
}
.sec-head .sec-sub {
	color: var(--ink-3) !important;
	max-width: 620px;
	margin: 0 auto !important;
	font-size: 16px;
}
.sec-head .sec-rule {
	display: block;
	width: 64px;
	height: 4px;
	margin: 0 auto 14px;
	border-radius: var(--r-pill);
	background: linear-gradient(90deg, var(--brand) 0%, #6FB3C0 100%);
}

/* ย่อหน้านำ (หน้าแรก) */
.lead-intro {
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.85 !important;
	color: var(--ink-2) !important;
	max-width: 62ch;
}
.lead-note {
	display: inline-flex;
	align-items: flex-start;
	gap: 9px;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r);
	color: var(--brand-700) !important;
	font-size: 15px;
	line-height: 1.7 !important;
	padding: 11px 16px;
	margin-bottom: 0 !important;
}
.lead-note i { color: var(--brand); margin-top: 5px; }

/* ซ่อนแถบตกแต่งรูปภาพเดิมทุกที่ที่ยังเหลืออยู่ */
img[src*="bar-1.png"],
img[src*="bar-2.png"] { display: none !important; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
#header .header-body {
	background: var(--surface);
	border-top: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	box-shadow: none;
}

#header.header-floating-icons .header-body,
html.sticky-header-active #header .header-body {
	box-shadow: var(--sh-2);
	border-bottom-color: transparent !important;
}

/* แถบบนสุด */
#header .header-top,
#header .header-top.header-top-default {
	background: var(--brand-700) !important;
	box-shadow: none;
	min-height: 42px;
	border: 0 !important;
}
#header .header-nav-top .nav > li,
#header .header-nav-top {
	font-size: 14px;
	font-weight: 300;
}
#header .header-nav-top .nav-link {
	font-weight: 400;
	letter-spacing: .01em;
}

/* ไอคอนโซเชียลบนแถบบน */
.header-social-icons.social-icons li {
	border: 0 !important;
	margin: 0 2px !important;
}
.header-social-icons.social-icons li a {
	background: rgba(255, 255, 255, .12);
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 13px;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.header-social-icons.social-icons li:hover a {
	background: rgba(255, 255, 255, .28);
	transform: translateY(-1px);
}

/* แถวโลโก้ — ธีมอ่านขนาดจริงของ img ไปตั้งความกว้างกล่องตอนสลับโลโก้เวลา sticky
   ถ้าโดน max-width:100% ครอบ ความกว้างจะยุบเป็น 0 และโลโก้หาย */
#header .header-logo img { max-width: none; }

#header .header-extra-info { margin: 0; }
#header .header-extra-info li { padding: 0; }
#header .header-column .header-extra-info li .header-extra-info-text label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3) !important;
	margin-bottom: 2px;
}
#header .header-extra-info-text a {
	color: var(--ink) !important;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
}
#header .header-extra-info-text a:hover { color: var(--brand-600) !important; }

/* แถบเมนู */
html .header-nav-bar.bg-primary,
html #header .bg-color-primary,
html #header .bg-primary {
	background: var(--brand-50) !important;
	border-top: 1px solid var(--line) !important;
	border-bottom: 1px solid var(--line) !important;
	box-shadow: none !important;
}

#header .header-nav-main nav > ul > li > a,
#header .header-nav.header-nav-force-light-text .header-nav-main nav > ul > li > a {
	border-radius: var(--r-pill);
	color: var(--ink-2) !important;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .01em;
	padding: 9px 18px;
	text-transform: none;
	transition: background .2s var(--ease), color .2s var(--ease);
}

#header .header-nav-main nav > ul > li > a i { opacity: .75; }

#header .header-nav-main nav > ul > li:hover > a,
#header .header-nav.header-nav-force-light-text:not(.header-nav-force-light-text-active-skin-color) .header-nav-main nav > ul > li:hover > a {
	background: var(--brand-100) !important;
	color: var(--brand-700) !important;
}

#header .header-nav-main nav > ul:not(:hover) > li > a.active,
#header .header-nav.header-nav-force-light-text:not(.header-nav-force-light-text-active-skin-color) .header-nav-main nav > ul:not(:hover) > li > a.active,
html #header .header-nav:not(.header-nav-line):not(.header-nav-links) .header-nav-main nav > ul:not(:hover) > li.dropdown-full-color.dropdown-light > a.active {
	background: var(--brand) !important;
	color: #FFF !important;
	font-weight: 400;
	box-shadow: 0 2px 10px rgba(70, 127, 140, .32);
}
#header .header-nav-main nav > ul:not(:hover) > li > a.active i { opacity: 1; }

/* --------------------------------------------------------------------------
   5. เมนูล่างบนมือถือ
   -------------------------------------------------------------------------- */
/* เดิมจุดตัด desktop/mobile กระจายอยู่ 3 ค่า (480 / 990 / 1280) ทำให้ช่วง 992–1279px
   โผล่ทั้งเมนูเดสก์ท็อปและเมนูมือถือพร้อมกัน — รวมให้เหลือจุดตัดเดียวที่ 992px */
@media (min-width: 992px) {
	.mobile-menu-bar { display: none !important; }
}
@media (max-width: 991.98px) {
	.mobile-menu-bar { display: block !important; }
	/* เมนูเดสก์ท็อปถูกซ่อนอยู่แล้วบนจอเล็ก แต่กล่องยังกินที่ว่างไว้ */
	#header .header-nav-bar .header-nav { display: none !important; }
	.mobile-menu, .mobile-menu-active { display: block !important; }
}

/* แถวเมนูบนมือถือ — เดิมใช้ margin-top ติดลบ 40px ดันขึ้นมาชนแถวบน
   ตอนนี้ย้ายมาอยู่นอก <header> จึงต้องมีพื้นหลัง/เส้นคั่นของตัวเอง
   (เดิมยืมพื้นหลังจาก .header-nav-bar) */
.mobile-menu-bar {
	padding: 10px 0 12px;
	background: var(--brand-50);
	border-bottom: 1px solid var(--line);
}
.mobile-menu-bar .row { margin-left: -5px; margin-right: -5px; }
.mobile-menu-bar [class*="col-"] { padding-left: 5px; padding-right: 5px; }

.mobile-menu,
.mobile-menu-active {
	border-radius: var(--r-sm);
	font-size: 14px;
	font-weight: 400;
	padding: 9px 4px;
	text-decoration: none !important;
	transition: all .2s var(--ease);
	white-space: nowrap;
}
.mobile-menu {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-2);
}
.mobile-menu-active {
	background: var(--brand);
	border: 1px solid var(--brand);
	color: #FFF;
	box-shadow: 0 4px 14px rgba(70, 127, 140, .3);
}
.mobile-menu i,
.mobile-menu-active i { margin-right: 5px; }

/* --------------------------------------------------------------------------
   6. Hero / แบนเนอร์
   -------------------------------------------------------------------------- */
/* แบนเนอร์เต็มความกว้างจอ ชนขอบซ้าย-ขวา ไม่มีกรอบ/มุมมน/เงา
   ความสูงไหลตามสัดส่วนภาพจริง (เดสก์ท็อป 1600x700, มือถือ 600x1067)
   จึงไม่มีการโดนตัดขอบภาพ */
.hero-wrap {
	width: 100%;
	padding: 0;
	margin: 0;
	background: var(--surface);
	overflow: hidden;
}
.bg-top {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: var(--surface);
}
.bg-top picture {
	display: block;
	width: 100%;
}
.bg-top img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;      /* ทับ img{max-width:100%} ที่ตั้งไว้ตอนต้นไฟล์ */
	border-radius: 0;
	box-shadow: none;
}

/* custom-bg.css ตั้ง .bg-top ให้เป็นภาพพื้นหลังสูง 100vh บนจอ ≤480px
   ทำให้มือถือต้องเลื่อนผ่านแบนเนอร์เต็มจอก่อนถึงจะเห็นเนื้อหา
   เปลี่ยนมาใช้ <picture> สลับไฟล์แทน แล้วปล่อยความสูงตามสัดส่วนภาพ */
@media (max-width: 480px) {
	.bg-top {
		background: var(--surface) !important;
		height: auto !important;
	}
	.bg-top img { display: block !important; }
}


/* --------------------------------------------------------------------------
   7. ปุ่ม
   -------------------------------------------------------------------------- */
.btn {
	border-radius: var(--r-sm) !important;
	font-family: 'Prompt', sans-serif;
	font-weight: 400;
	letter-spacing: .01em;
	padding: 10px 22px;
	transition: all .22s var(--ease);
}
.btn i { margin-right: 6px; }

.btn-lg {
	font-size: 16px !important;
	padding: 13px 26px;
}

html .btn-primary,
.btn-primary {
	background-color: var(--brand) !important;
	border: 0 !important;
	color: #FFF !important;
	box-shadow: 0 2px 8px rgba(70, 127, 140, .28);
}
html .btn-primary:hover,
.btn-primary:hover,
.btn-primary.hover {
	background-color: var(--brand-700) !important;
	box-shadow: 0 8px 20px rgba(70, 127, 140, .34) !important;
	color: #FFF !important;
	transform: translateY(-1px);
}

/* เลิกใช้เงาเทาแข็ง ๆ ชุดเดิมกับปุ่มอื่น */
.btn-success:hover, .btn-success.hover,
.btn-info:hover, .btn-info.hover,
.btn-danger:hover, .btn-danger.hover {
	box-shadow: var(--sh-3) !important;
	transform: translateY(-1px);
}

/* ปุ่มติดต่อ — เดิมเป็น 4 สีตัดกันรุนแรง เปลี่ยนเป็นการ์ดช่องทางติดต่อ */
.contact-actions { margin-top: 6px; }

.contact-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 12px 16px;
	text-align: left;
	text-decoration: none !important;
	box-shadow: var(--sh-1);
	transition: all .22s var(--ease);
}
.contact-btn:hover {
	border-color: var(--brand-100);
	box-shadow: var(--sh-3);
	transform: translateY(-2px);
}
.contact-btn .cb-ico {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: #FFF;
}
.contact-btn .cb-body { min-width: 0; }
.contact-btn .cb-label {
	display: block;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
	line-height: 1.4;
}
.contact-btn .cb-value {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.contact-btn:hover .cb-value { color: var(--brand-700); }

.cb-tel  .cb-ico { background: linear-gradient(135deg, #E4572E, #C63D18); }
.cb-line .cb-ico { background: linear-gradient(135deg, #2ECC71, #06B14E); }
.cb-msg  .cb-ico { background: linear-gradient(135deg, #5A8DEE, #3A6FD8); }
.cb-mail .cb-ico { background: linear-gradient(135deg, #5FA8B6, var(--brand)); }

/* --------------------------------------------------------------------------
   8. การ์ดสินค้า
   -------------------------------------------------------------------------- */
.thumb-info,
.thumb-info.thumb-info-no-borders {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r) !important;
	box-shadow: var(--sh-1);
	overflow: hidden;
	padding: 0 !important;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.thumb-info:hover {
	border-color: var(--brand-100);
	box-shadow: var(--sh-3) !important;
	transform: translateY(-4px);
}

.thumb-info .thumb-info-wrapper {
	margin: 0 !important;
	border-radius: 0 !important;
	overflow: hidden;
	position: relative;
}

/* ไม่ใช้ overlay ดำทับรูปแบบธีมเดิม */
.thumb-info .thumb-info-wrapper:after { display: none !important; }

.product-thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--bg-alt);
	background-size: cover;
	background-position: center;
	transition: transform .45s var(--ease);
}
.thumb-info:hover .product-thumb { transform: scale(1.05); }

/* ป้ายแบรนด์บนรูป */
.product-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(22, 36, 42, .78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #FFF;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 11px;
	border-radius: var(--r-pill);
}

/* ไอคอน + มุมขวาล่างของรูป */
html .thumb-info .thumb-info-action-icon {
	background-color: var(--brand) !important;
	color: #FFF !important;
	border-radius: var(--r-pill);
	width: 38px;
	height: 38px;
	line-height: 38px;
	top: auto;
	bottom: 12px;
	right: 12px;
	left: auto;
	opacity: 0;
	transform: translateY(6px);
	transition: all .25s var(--ease);
	box-shadow: var(--sh-2);
}
html .thumb-info .thumb-info-action-icon i {
	font-size: 13px;
	line-height: 38px;
	color: #FFF;
}
.thumb-info:hover .thumb-info-action-icon {
	opacity: 1;
	transform: translateY(0);
}

.product-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.product-title {
	color: var(--ink);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.1em;
	transition: color .2s var(--ease);
}
.thumb-info:hover .product-title { color: var(--brand-700); }

.product-meta {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line-soft);
	font-size: 13px;
	color: var(--ink-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.product-meta .pm-more { color: var(--brand-600); font-weight: 400; }

/* คำโปรยบทความ */
.article-excerp {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--ink-3);
	font-size: 13px;
	line-height: 1.7;
	margin-top: 8px;
}

/* การ์ดแนวนอนขนาดเล็ก (แถบข้างหน้าบทความ) */
.mini-card {
	display: flex;
	align-items: stretch;
	gap: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	text-decoration: none !important;
	box-shadow: var(--sh-1);
	transition: all .22s var(--ease);
}
.mini-card:hover {
	border-color: var(--brand-100);
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
}
.mini-card .mini-thumb {
	flex: 0 0 96px;
	background-color: var(--bg-alt);
	background-size: cover;
	background-position: center;
	min-height: 88px;
}
.mini-card .mini-body {
	display: block;
	padding: 10px 12px 10px 0;
	min-width: 0;
}
.mini-card .mini-cate {
	display: block;
	color: var(--brand-600);
	font-size: 12px;
	line-height: 1.5;
}
.mini-card .mini-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
	margin: 2px 0 4px;
}
.mini-card:hover .mini-title { color: var(--brand-700); }
.mini-card .mini-meta {
	display: block;
	color: var(--ink-3);
	font-size: 12px;
}

/* คลาส .title เดิมของธีม (กันหลุด) */
.title {
	max-height: none;
	line-height: 1.55;
	overflow: hidden;
	margin: 0;
}

/* --------------------------------------------------------------------------
   9. การ์ดหมวดสินค้า
   -------------------------------------------------------------------------- */
.category { padding-right: 12px !important; padding-left: 12px !important; }

.cate-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	padding: 22px 20px 18px;
	text-decoration: none !important;
	box-shadow: var(--sh-1);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
/* เส้นไฮไลต์บนสุด โผล่ตอน hover */
.cate-card:before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brand) 0%, #6FB3C0 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--ease);
}
.cate-card:hover {
	border-color: var(--brand-100);
	box-shadow: var(--sh-3);
	transform: translateY(-4px);
}
.cate-card:hover:before { transform: scaleX(1); }

.cate-card .cate-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r);
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	color: var(--brand);
	font-size: 21px;
	margin-bottom: 16px;
	transition: all .25s var(--ease);
}
.cate-card:hover .cate-icon {
	background: var(--brand);
	border-color: var(--brand);
	color: #FFF;
}

.cate-card .cate-name {
	display: block;
	color: var(--ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .03em;
	line-height: 1.35;
	margin-bottom: 4px;
	transition: color .2s var(--ease);
}
.cate-card:hover .cate-name { color: var(--brand-700); }

.cate-card .cate-count {
	display: block;
	color: var(--ink-3);
	font-size: 13px;
	line-height: 1.5;
}

.cate-card .cate-go {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line-soft);
	width: 100%;
	color: var(--brand-600);
	font-size: 13px;
	opacity: .85;
	transition: opacity .2s var(--ease);
}
.cate-card .cate-go i {
	margin-left: 4px;
	transition: transform .25s var(--ease);
}
.cate-card:hover .cate-go { opacity: 1; }
.cate-card:hover .cate-go i { transform: translateX(4px); }

/* ทับสไตล์ category เดิม */
.category img { border-radius: 0; }
.category img:hover { box-shadow: none; }

/* --------------------------------------------------------------------------
   10. การ์ดทั่วไป / หน้ารายละเอียด
   -------------------------------------------------------------------------- */
.card-default {
	background: var(--surface);
	border: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
	color: var(--ink-2);
	padding: clamp(20px, 3vw, 36px);
}
.card-default.shadow { box-shadow: var(--sh-2) !important; }

a .card:hover .card-title { color: var(--brand-700) !important; }

.detail-media img {
	width: 100%;
	height: auto;
	border-radius: var(--r);
	border: 1px solid var(--line);
	background: var(--bg-alt);
}

.detail-brand {
	display: inline-block;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r-pill);
	color: var(--brand-600);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 12px;
}

.detail-title {
	color: var(--ink);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	line-height: 1.4;
}

.detail-section-title {
	color: var(--ink);
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	font-size: 13px;
	color: var(--ink-3);
	margin: 10px 0 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line-soft);
}
.detail-meta i { color: var(--brand); margin-right: 5px; }

.detail-content { font-size: 16px; line-height: 1.85; color: var(--ink-2); }
.detail-content ul,
.detail-content ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.detail-content li { margin-bottom: .35rem; }

/* ตารางข้อมูลติดต่อ (หน้าติดต่อเรา) */
.contact-facts {
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}
.contact-facts .fact-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line-soft);
	background: var(--surface);
}
.contact-facts .fact-row:nth-child(even) { background: var(--brand-50); }
.contact-facts .fact-row:last-child { border-bottom: 0; }
.contact-facts .fact-key {
	flex: 0 0 180px;
	color: var(--ink-3);
	font-size: 14px;
}
.contact-facts .fact-val { color: var(--ink); font-size: 15px; }

@media (max-width: 575px) {
	.contact-facts .fact-key { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   11. Breadcrumb / หัวหน้าเพจ
   -------------------------------------------------------------------------- */
.page-header,
section.page-header.page-header-classic {
	background: var(--surface) !important;
	border-bottom: 1px solid var(--line);
	padding: 22px 0 24px;
}
.page-header.page-header-classic:after { display: none; }

.page-header .breadcrumb {
	background: transparent;
	margin: 0 0 6px;
	padding: 0;
}
.page-header .breadcrumb > li {
	font-size: 13px;
	color: var(--ink-3);
	text-transform: none;
	letter-spacing: 0;
}
.page-header .breadcrumb a,
.page-header a {
	color: var(--ink-3) !important;
	font-size: 13px;
	text-decoration: none !important;
}
.page-header .breadcrumb a:hover { color: var(--brand-600) !important; }
.page-header .breadcrumb > li.active,
.page-header .breadcrumb > li:last-child { color: var(--ink); }

.page-header h1 {
	color: var(--ink) !important;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 600;
	line-height: 1.35;
	top: 0;
}
section.page-header .page-header-title-border {
	background-color: var(--brand) !important;
	height: 4px !important;
	border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   12. Badge / tag
   -------------------------------------------------------------------------- */
.badge { font-weight: 400 !important; letter-spacing: .01em; }

html .badge-primary,
.badge-primary {
	background-color: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #D9EBEE !important;
	font-size: 13px;
	font-weight: 300;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	transition: all .2s var(--ease);
}
html .badge-primary:hover,
.badge-primary:hover {
	background-color: var(--brand) !important;
	border-color: var(--brand);
	color: #FFF !important;
}

/* ชุด tag ที่อยู่บนพื้นสว่าง (หน้าติดต่อ) */
.tag-light .badge-primary,
.tag-light html .badge-primary {
	background-color: var(--brand-50);
	border-color: var(--brand-100);
	color: var(--brand-600) !important;
}
.tag-light .badge-primary:hover {
	background-color: var(--brand) !important;
	color: #FFF !important;
}

/* --------------------------------------------------------------------------
   12b. หน้าแท็ก (SEO / AEO)
   -------------------------------------------------------------------------- */
.tag-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r-pill);
	color: var(--brand-600);
	font-size: 13px;
	padding: 4px 14px;
	margin-bottom: 14px;
}

.tag-h1 {
	color: var(--ink);
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 18px;
}

/* กล่องคำตอบสั้น — ตัวเอกของ AEO */
.answer-box {
	position: relative;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-left: 4px solid var(--brand);
	border-radius: var(--r);
	padding: 18px 22px;
}
.answer-label {
	color: var(--brand-600);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.answer-text {
	color: var(--ink) !important;
	font-size: 16px;
	line-height: 1.85 !important;
	margin: 0 !important;
}

/* ตารางข้อเท็จจริง */
.fact-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-2);
	overflow: hidden;
}
.fact-card-head {
	background: var(--brand);
	color: #FFF;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .02em;
	padding: 12px 18px;
}
/* table-layout:fixed กันตารางกว้างเกินกล่อง (.fact-card มี overflow:hidden
   ถ้าตารางล้น เนื้อหาจะถูกตัดกลางคำแทนที่จะขึ้นบรรทัดใหม่) */
.fact-table {
	width: 100%;
	table-layout: fixed;
}
.fact-table th,
.fact-table td {
	padding: 11px 18px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: top;
	font-size: 14px;
	line-height: 1.65;
	overflow-wrap: break-word;
	word-break: break-word;
}
.fact-table th {
	width: 38%;
	color: var(--ink-3);
	font-weight: 400;
	text-align: left;
}
.fact-table td { color: var(--ink); }
.fact-table tr:last-child th,
.fact-table tr:last-child td { border-bottom: 0; }
.fact-table a { color: var(--brand-600); font-weight: 500; }

@media (max-width: 480px) {
	.fact-table th { width: 40%; }
	.fact-table th, .fact-table td { padding: 10px 12px; font-size: 13px; }
}

/* FAQ */
.faq-item {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	margin-bottom: 12px;
	box-shadow: var(--sh-1);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item[open] {
	border-color: var(--brand-100);
	box-shadow: var(--sh-2);
}
.faq-q {
	position: relative;
	cursor: pointer;
	list-style: none;
	color: var(--ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	padding: 16px 52px 16px 20px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:after {
	content: "\f067";                 /* fa-plus */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: var(--r-pill);
	background: var(--brand-50);
	color: var(--brand);
	font-size: 11px;
	transition: all .2s var(--ease);
}
.faq-item[open] .faq-q:after {
	content: "\f068";                 /* fa-minus */
	background: var(--brand);
	color: #FFF;
}
.faq-q:hover { color: var(--brand-700); }
.faq-a {
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.85;
	padding: 0 20px 18px;
	border-top: 1px solid var(--line-soft);
	padding-top: 14px;
	margin-top: 2px;
}

.tag-cloud a { margin: 0 3px 8px; }

/* หน้า 404 */
.err-code {
	color: var(--brand-100);
	font-size: clamp(88px, 14vw, 150px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.03em;
}
.err-title {
	color: var(--ink);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 600;
	margin: 6px 0 14px;
}
.err-desc {
	color: var(--ink-3) !important;
	font-size: 16px;
	max-width: 480px;
	margin: 0 auto 26px !important;
}
.err-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
#footer {
	background: #16242A;
	box-shadow: none;
	border-top: 0;
	margin-top: 0;
}
/* ใช้ padding-top/bottom แยก — ถ้าใช้ shorthand จะไปล้าง padding ซ้าย-ขวา 15px
   ของ .container ทำให้ .row ล้นจอแนวนอนบนมือถือ */
#footer .footer-inner {
	padding-top: clamp(44px, 5vw, 68px);
	padding-bottom: clamp(32px, 4vw, 48px);
}

#footer .footer-heading {
	color: #FFF;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

#footer p,
#footer .text-white { color: #B9C6CA !important; font-size: 15px; }
#footer p strong { color: #E7EEF0; font-weight: 400; }
#footer a { text-decoration: none; }
#footer a:hover { color: #FFF !important; }

#footer .footer-contact-list p { margin-bottom: .5rem !important; }

#footer .counter-table { width: 100%; font-size: 14px; color: #B9C6CA; }
#footer .counter-table td { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
#footer .counter-table tr:last-child td {
	border-bottom: 0;
	color: #FFF;
	font-weight: 500;
	padding-top: 10px;
}
#footer .counter-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

#footer .footer-copyright.footer-copyright-style-2 {
	background: #101B20;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: #8FA2A8;
	font-size: 14px;
	padding: 18px 10px;
}
#footer .footer-copyright a { color: #BFE0E4 !important; }

#footer .footer-legal-links {
	margin-bottom: 8px;
	font-size: 14px;
}
#footer .footer-legal-links a {
	color: #BFE0E4 !important;
	text-decoration: none;
}
#footer .footer-legal-links a:hover { color: #FFF !important; text-decoration: underline; }
#footer .footer-legal-links .sep { color: #566B72; margin: 0 8px; }
#footer .footer-copy-line { color: #8FA2A8; }

/* --------------------------------------------------------------------------
   13b. หน้าเอกสารกฎหมาย (นโยบายต่าง ๆ)
   -------------------------------------------------------------------------- */
.legal-doc { font-size: 15px; line-height: 1.9; }
.legal-doc h2 {
	color: var(--ink);
	font-size: 21px;
	font-weight: 600;
	margin: 34px 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}
.legal-doc h2:first-of-type { margin-top: 22px; }
.legal-doc .legal-h3 {
	color: var(--ink);
	font-size: 17px;
	font-weight: 500;
	margin: 26px 0 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.legal-doc p { line-height: 1.9 !important; }
.legal-doc ul { padding-left: 1.3rem; margin-bottom: 1rem; }
.legal-doc li { margin-bottom: .5rem; }
.legal-rights li strong { color: var(--ink); font-weight: 500; }

.legal-meta {
	color: var(--ink-3) !important;
	font-size: 13px;
	border-bottom: 1px solid var(--line-soft);
	padding-bottom: 14px;
	margin-bottom: 20px !important;
}

.legal-table {
	width: 100%;
	margin: 12px 0 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 14px;
}
.legal-table thead th {
	background: var(--brand-50);
	color: var(--brand-700);
	font-weight: 500;
	font-size: 13px;
}
.legal-table th,
.legal-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: top;
	line-height: 1.7;
	text-align: left;
}
.legal-table tbody th {
	background: var(--bg);
	color: var(--ink-3);
	font-weight: 400;
	white-space: nowrap;
	width: 34%;
}
.legal-table tr:last-child th,
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table code,
.legal-doc code {
	background: var(--brand-50);
	border-radius: 4px;
	color: var(--brand-700);
	font-size: 13px;
	padding: 1px 6px;
}

.legal-todo {
	background: #FFF6E5;
	border-radius: 4px;
	color: #8A5A00;
	font-weight: 500;
	padding: 1px 7px;
}

.legal-chip {
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--ink-3);
	font-size: 12px;
	font-weight: 400;
	padding: 2px 11px;
}
.legal-chip-on {
	background: var(--brand-50);
	border-color: var(--brand-100);
	color: var(--brand-600);
}

.legal-note {
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-left: 4px solid var(--brand);
	border-radius: var(--r-sm);
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.8;
	padding: 14px 18px;
	margin: 6px 0 20px;
}

.legal-warning {
	background: #FFF8EC;
	border: 1px solid #F3DFB8;
	border-left: 4px solid #E0A63C;
	border-radius: var(--r-sm);
	color: #6B4E12;
	font-size: 14px;
	line-height: 1.8;
	padding: 15px 18px;
	margin-top: 32px;
}
.legal-warning i { color: #D8931F; margin-right: 6px; }

@media (max-width: 575px) {
	.legal-table, .legal-table thead, .legal-table tbody,
	.legal-table th, .legal-table td, .legal-table tr { display: block; width: 100%; }
	.legal-table thead { display: none; }
	.legal-table tbody th { white-space: normal; width: 100%; }
	.legal-table tr {
		border-bottom: 2px solid var(--line);
		padding: 4px 0;
	}
	.legal-table tr:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   14. เบ็ดเตล็ด
   -------------------------------------------------------------------------- */
.social-icons li { border: 0; }

.input-lg {
	font-size: 16px !important;
	line-height: 1.5 !important;
	height: 48px !important;
	padding: 0 16px !important;
	border-radius: var(--r-sm) !important;
	border: 1px solid var(--line) !important;
}

/* กล่อง Facebook ให้กลืนกับการ์ดอื่น */
.fb-embed-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-1);
	padding: 12px;
	overflow: hidden;
}
.fb-embed-card .fb-page,
.fb-embed-card .fb-page span,
.fb-embed-card .fb-page iframe { max-width: 100% !important; }

/* แกลเลอรีย่อหน้าแรก */
#gallery-1 img { border-radius: var(--r-sm); }

/* ปุ่มลอย (floating action button) */
.kc_fab_wrapper .kc_fab_main_btn { box-shadow: var(--sh-3) !important; }

/* --------------------------------------------------------------------------
   15. มือถือ
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	body { font-size: 15px; }

	#header .header-btn-collapse-nav {
		background: var(--brand) !important;
		border-radius: var(--r-sm);
		color: #FFF;
	}
	#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a,
	#header .header-nav.header-nav-force-light-text .header-nav-main nav > ul > li > a {
		color: var(--ink-2) !important;
		font-size: 15px;
	}
	#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active {
		background: var(--brand) !important;
		color: #FFF !important;
	}

	.section.section-height-2 {
		padding-top: 34px !important;
		padding-bottom: 34px !important;
	}

	/* ลดพื้นที่ว่างรอบโลโก้ ให้เห็นเนื้อหาเร็วขึ้นบนจอเล็ก */
	#header .header-container .header-row.py-3 {
		padding-top: .5rem !important;
		padding-bottom: .5rem !important;
	}

	.contact-btn { padding: 11px 14px; }
	.contact-btn .cb-ico { width: 36px; height: 36px; font-size: 15px; }
}

@media (max-width: 575px) {
	.product-body { padding: 12px 13px 14px; }
	.product-title { font-size: 14px; }
	.cate-card .cate-media { padding: 12px; }
	.cate-card .cate-foot { padding: 10px 12px; }
	.cate-card .cate-name { font-size: 13px; }
	.cate-card .cate-count { font-size: 11px; padding: 1px 8px; }
}

/* --------------------------------------------------------------------------
   15b. Cookie consent (PDPA)
   -------------------------------------------------------------------------- */
.cc-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 10500;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-4);
	padding: 20px 22px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cc-banner.is-in { opacity: 1; transform: translateY(0); }
.cc-banner[hidden] { display: none; }

.cc-banner-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}
.cc-banner-text { flex: 1 1 420px; min-width: 0; }
.cc-title {
	color: var(--ink);
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 6px;
}
.cc-title i { color: var(--brand); margin-right: 6px; }
.cc-desc {
	color: var(--ink-2) !important;
	font-size: 14px;
	line-height: 1.7 !important;
	margin: 0 !important;
}
.cc-desc a { color: var(--brand-600); text-decoration: underline; }

.cc-banner-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

.cc-btn {
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	cursor: pointer;
	font-family: 'Prompt', sans-serif;
	font-size: 14px;
	font-weight: 400;
	padding: 10px 20px;
	transition: all .2s var(--ease);
	white-space: nowrap;
}
.cc-btn-primary {
	background: var(--brand);
	color: #FFF;
	box-shadow: 0 2px 8px rgba(70, 127, 140, .3);
}
.cc-btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); }
.cc-btn-plain {
	background: var(--bg-alt);
	border-color: var(--line);
	color: var(--ink-2);
}
.cc-btn-plain:hover { background: var(--line-soft); color: var(--ink); }
.cc-btn-ghost {
	background: transparent;
	color: var(--ink-3);
	text-decoration: underline;
	padding-left: 8px;
	padding-right: 8px;
}
.cc-btn-ghost:hover { color: var(--brand-600); }

/* หน้าต่างตั้งค่า */
.cc-prefs {
	position: fixed;
	inset: 0;
	z-index: 10600;
	background: rgba(16, 27, 32, .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}
.cc-prefs[hidden] { display: none; }

.cc-prefs-box {
	background: var(--surface);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-4);
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.cc-prefs-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--line);
}
.cc-prefs-head h2 { font-size: 19px; font-weight: 600; margin: 0; }
.cc-close {
	background: var(--bg-alt);
	border: 0;
	border-radius: var(--r-pill);
	color: var(--ink-3);
	cursor: pointer;
	width: 34px;
	height: 34px;
	transition: all .2s var(--ease);
}
.cc-close:hover { background: var(--line); color: var(--ink); }

.cc-prefs-body { padding: 20px 24px; overflow-y: auto; }
.cc-prefs-intro {
	color: var(--ink-2) !important;
	font-size: 14px;
	line-height: 1.75 !important;
	margin: 0 0 18px !important;
}

.cc-group {
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 15px 17px;
	margin-bottom: 12px;
}
.cc-group-head {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 7px;
}
.cc-group-title { color: var(--ink); font-size: 15px; font-weight: 500; }
.cc-badge-always {
	margin-left: auto;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r-pill);
	color: var(--brand-600);
	font-size: 12px;
	padding: 2px 11px;
}
.cc-group-desc {
	color: var(--ink-2) !important;
	font-size: 13.5px;
	line-height: 1.7 !important;
	margin: 0 0 8px !important;
}
.cc-cookie-list {
	background: var(--bg);
	border-radius: var(--r-sm);
	color: var(--ink-3);
	font-size: 12.5px;
	line-height: 1.9;
	padding: 9px 13px;
}
.cc-cookie-list code {
	background: var(--brand-50);
	border-radius: 4px;
	color: var(--brand-700);
	font-size: 12px;
	padding: 1px 6px;
}

/* สวิตช์เปิด/ปิด */
.cc-switch { position: relative; display: inline-block; width: 46px; height: 26px; margin: 0; flex: 0 0 auto; }
.cc-switch input { opacity: 0; width: 0; height: 0; }
.cc-slider {
	position: absolute;
	inset: 0;
	background: #C7D2D6;
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: background .2s var(--ease);
}
.cc-slider:before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	left: 3px;
	top: 3px;
	background: #FFF;
	border-radius: 50%;
	box-shadow: var(--sh-1);
	transition: transform .2s var(--ease);
}
.cc-switch input:checked + .cc-slider { background: var(--brand); }
.cc-switch input:checked + .cc-slider:before { transform: translateX(20px); }
.cc-switch input:focus-visible + .cc-slider { outline: 3px solid rgba(70,127,140,.45); outline-offset: 2px; }

.cc-prefs-foot {
	color: var(--ink-3) !important;
	font-size: 13px;
	margin: 4px 0 0 !important;
}
.cc-prefs-foot a, .cc-cookie-list a { color: var(--brand-600); text-decoration: underline; }
.cc-prefs-foot-bar {
	border-top: 1px solid var(--line);
	padding: 15px 24px;
	text-align: right;
}

/* กล่องเนื้อหาที่ถูกล็อกไว้จนกว่าจะยินยอม */
.cc-locked .cc-locked-content { display: none; }
.cc-locked.cc-unlocked .cc-locked-content { display: block; }
.cc-locked.cc-unlocked .cc-locked-note { display: none; }

.cc-locked-note {
	background: var(--bg);
	border: 1px dashed var(--line);
	border-radius: var(--r-sm);
	color: var(--ink-3);
	font-size: 13px;
	line-height: 1.7;
	padding: 12px 15px;
}
.cc-locked-note i { color: var(--ink-3); margin-right: 5px; }
.cc-locked-note a {
	color: var(--brand-600);
	text-decoration: underline;
	margin-left: 8px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.cc-banner { left: 10px; right: 10px; bottom: 10px; padding: 16px 17px; }
	.cc-banner-inner { gap: 14px; }
	.cc-banner-actions { width: 100%; }
	.cc-banner-actions .cc-btn { flex: 1 1 auto; text-align: center; }
	.cc-btn-ghost { flex: 1 1 100% !important; order: 3; }
	.cc-prefs-box { max-height: 94vh; }
	.cc-prefs-body { padding: 16px 17px; }
	.cc-prefs-head, .cc-prefs-foot-bar { padding-left: 17px; padding-right: 17px; }
}

/* --------------------------------------------------------------------------
   16. AOS — กันเนื้อหาหายถ้า JavaScript ไม่ทำงาน
   aos.css ตั้ง [data-aos]{opacity:0} ไว้ ถ้าสคริปต์โหลดไม่ได้ เนื้อหาจะหายทั้งหน้า
   จึงบังคับให้แสดงผลปกติ จนกว่าสคริปต์จะติดคลาส .aos-ready ให้ <html>
   -------------------------------------------------------------------------- */
html:not(.aos-ready) [data-aos] {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	/* ปิด AOS ให้สนิท ไม่ให้ค้างที่ opacity:0 */
	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
	}
}