/* =====================================================================
   theme.css — ดีไซน์ใหม่ทั้งเว็บ (ลงจริง 19 ต.ค. 2026) โหลดท้ายสุดทุกหน้าผ่าน header.php
   แนวทาง: ขาวสะอาด (ธีม A เดิม) + แผงดำ/แดงพรีเมียมเฉพาะจุดสำคัญ
   ทุก selector ขึ้นต้น :root เพื่อชนะ CSS รายหน้า (โหลดก่อน) ที่ specificity เท่ากัน
   ===================================================================== */
html{--r:16px;--sh:0 1px 2px rgba(16,16,20,.04),0 10px 30px -14px rgba(16,16,20,.18);--sh-h:0 2px 4px rgba(16,16,20,.05),0 22px 44px -18px rgba(229,0,79,.35);
  --ink2:#0b0b0e;--glow:radial-gradient(520px 340px at 10% 0%,rgba(229,0,79,.38),transparent 70%),radial-gradient(560px 380px at 95% 110%,rgba(245,167,0,.16),transparent 70%)}

/* ---------- header: กระจกฝ้า ---------- */
:root header#hd{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom-color:rgba(10,10,12,.06)}

/* ---------- ปุ่ม: มน + เงาแดง ---------- */
:root .btn{border-radius:12px;padding:13px 24px}
:root .btn-red{box-shadow:0 10px 24px -10px rgba(229,0,79,.75)}
:root .btn-red:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(229,0,79,.85)}
:root .btn-out{border-color:#d9dae0;background:#fff}
:root .btn-out:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ---------- หัวหน้า (.page-hero) → แผงดำพรีเมียม ทุกหน้าย่อย ---------- */
:root .page-hero{position:relative;overflow:hidden;background:var(--ink2);color:#fff;padding:54px 0 50px;margin-bottom:8px}
:root .page-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:var(--glow),
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px}
:root .page-hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(11,11,14,.9))}
:root .page-hero>.wrap{position:relative;z-index:1}
:root .page-hero h1{color:#fff;font-size:clamp(32px,4.6vw,52px);background:linear-gradient(100deg,#fff 35%,#ffb3c8 75%,#E5004F);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
:root .page-hero p{color:#b7b8c0;font-size:16.5px}
:root .page-hero .eyebrow{color:#ff4d7d}
:root .page-hero .crumb,:root .page-hero .crumb a{color:#8e8f98}
:root .page-hero .crumb a:hover{color:#fff}
:root .page-hero+section,:root .page-hero+.wrap,:root .page-hero+div{padding-top:40px}

/* ---------- หัว section ---------- */
:root .sec-head h2{font-weight:800;letter-spacing:-.6px}
:root .sec-head h2::after{content:'';display:block;width:44px;height:4px;border-radius:4px;background:var(--red);margin:14px auto 0}

/* ---------- การ์ดสินค้า ---------- */
:root .card{border-radius:var(--r);background:#fff;border:1px solid #eceef2;box-shadow:var(--sh);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
:root .card:hover{transform:translateY(-6px);border-color:rgba(229,0,79,.35);box-shadow:var(--sh-h)}
:root .card .iw{background:radial-gradient(ellipse at 50% 60%,#f6f7fa 0%,#fff 70%)}
:root .card .ribbon{border-radius:0 0 0 14px;font-weight:600;letter-spacing:.2px}

/* ---------- การ์ดทั่วไป (ข้อมูล/ติดต่อ/เกี่ยวกับ) ---------- */
:root .info-card,:root .feat,:root .kn-card,:root .ab-card{border-radius:var(--r);border:1px solid #eceef2;background:#fff;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s,border-color .25s}
:root .feat:hover,:root .kn-card:hover,:root .ab-card:hover{transform:translateY(-5px);border-color:rgba(229,0,79,.35);box-shadow:var(--sh-h)}
:root .feat .ic{border-radius:14px;background:linear-gradient(145deg,#ff2a63,#b8003f);box-shadow:0 10px 22px -10px rgba(229,0,79,.9)}

/* ---------- ชิป/ตัวกรอง ---------- */
:root .tchip,:root .chip{border-radius:999px}

/* ---------- แถบ CTA ท้ายหน้า (why-cta) → แผงแดง ---------- */
:root .why-cta{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(120deg,#9e0034,#E5004F 55%,#ff3b6b) !important;color:#fff;border:0}
:root .why-cta::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 85% 50%,rgba(255,255,255,.06) 0 6deg,transparent 6deg 14deg);pointer-events:none}
:root .why-cta>*{position:relative}
:root .why-cta h2,:root .why-cta h3,:root .why-cta p{color:#fff}
:root .why-cta .btn-red{background:#fff;color:var(--red)}
:root .why-cta .btn-out{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
:root .why-cta .btn-out:hover{background:#fff;color:var(--red)}

/* ---------- footer: ขอบบนแดงเรือง ---------- */
:root footer{position:relative}
:root footer::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#E5004F 30%,#ff3b6b 70%,transparent);z-index:2}


@media(max-width:560px){
  :root .page-hero{padding:34px 0 30px}
  :root .btn{border-radius:11px}
}

/* =====================================================================
   รายหน้า
   ===================================================================== */
:root .page-hero .crumb span{color:#fff}

/* ---------- แถบตัวเลข (.trust) ลอยทับขอบหัวหน้า ---------- */
:root .page-hero+.trust{position:relative;z-index:2;max-width:1132px;margin:-34px auto 0;border:1px solid #eceef2;border-radius:var(--r);box-shadow:var(--sh)}

/* ---------- products.php: ช่องค้นหา + ตัวกรองแบบเม็ดยา ---------- */
:root .find-bar input,:root .find-bar>*{border-radius:999px}
:root .find-bar{max-width:520px;border-radius:999px}
:root .filter-bar a,:root .filter-bar button{border-radius:999px;transition:.2s}
:root .filter-bar .on,:root .filter-bar .active,:root .filter-bar [aria-pressed=true]{background:var(--red) !important;border-color:var(--red) !important;color:#fff !important;box-shadow:0 8px 18px -8px rgba(229,0,79,.8)}

/* ---------- product.php: แกลเลอรีเป็นแผงนุ่ม + กล่องสเปค + หัวข้อเป็นการ์ด ---------- */
:root .top{padding-top:10px}
:root .gal{border-radius:22px;background:radial-gradient(ellipse at 50% 55%,#fff 0%,#f3f4f7 70%);box-shadow:inset 0 0 0 1px #eceef2}
:root .gal::before{color:#e6e7ec}
:root .gal .tag{border-radius:8px}
:root .thumbs>*{border-radius:12px}
:root .specs>*{border-radius:14px;overflow:hidden}
:root .sec{border-top:0;padding:28px 32px;margin:0 0 18px;background:#fff;border:1px solid #eceef2;border-radius:20px;box-shadow:var(--sh)}
:root .sec h2{font-size:24px}
:root .hl li::before{width:18px;height:18px;top:4px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
:root .hl li{padding-left:30px}
:root .sheet{border-radius:16px;border-color:#eceef2}
:root .sheet .h{background:var(--ink2);color:#fff;border-bottom:0}
:root .sheet .h b{color:#ff4d7d}
:root .sheet .row:nth-child(even){background:#fafbfc}
:root .sheet .row:hover{background:#fff1f5}

/* ---------- news.php: การ์ดตาราง 2 คอลัมน์ + ข่าวเด่นเต็มแถว ---------- */
:root .lay>div:first-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-content:start;min-width:0}
:root .lay>*{min-width:0}
:root .lay>div:first-child>.pg,:root .lay>div:first-child>.empty,:root .lay>div:first-child>div:not(.lcard){grid-column:1/-1}
:root .lcard{grid-template-columns:1fr;gap:0;padding:0;border:1px solid #eceef2;border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s,border-color .25s}
:root .lcard:hover{transform:translateY(-5px);border-color:rgba(229,0,79,.35);box-shadow:var(--sh-h)}
:root .lcard .im{height:190px;border-radius:0}
:root .lcard>div:last-child{padding:16px 18px 18px}
:root .lcard.big{grid-column:1/-1;grid-template-columns:1.25fr 1fr;background:var(--ink2);color:#fff;border:0}
:root .lcard.big .im{height:100%;min-height:300px}
:root .lcard.big>div:last-child{padding:30px 32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
:root .lcard.big h3{color:#fff;font-size:26px;line-height:1.3}
:root .lcard.big:hover h3{color:#ffb3c8}
:root .lcard.big p{color:#b7b8c0;-webkit-line-clamp:4}
:root .lcard.big .dt{color:#8e8f98}
:root .sbx{border-radius:var(--r);border-color:#eceef2;box-shadow:var(--sh)}
:root .pg a,:root .pg span.cur{border-radius:12px}

/* ---------- article.php ---------- */
:root .article .body img,:root .body img{border-radius:16px}
:root .body h2{border-left:0;padding-left:0}
:root .body h2::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--red);margin-right:10px;transform:translateY(-3px) rotate(45deg)}
:root .body ol,:root .body ul{background:#fafbfc;border:1px solid #eceef2;border-radius:14px;padding:16px 18px 16px 40px}
:root .rc{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);border:1px solid #eceef2;transition:transform .25s,box-shadow .25s}
:root .rc:hover{transform:translateY(-5px);box-shadow:var(--sh-h)}

/* ---------- contact.php: ฟอร์มการ์ด + แท็บเม็ดยา + การ์ดติดต่อสีดำ ---------- */
:root .ct-main{border-radius:22px;border-color:#eceef2;box-shadow:var(--sh);padding:30px 32px}
:root .ct-tabs{border-bottom:0;background:#f3f4f7;padding:5px;border-radius:999px;display:inline-flex;gap:4px}
:root .ct-tab{border-radius:999px;padding:9px 18px;border-bottom:0 !important}
:root .ct-tab.act{background:#fff;color:var(--red);box-shadow:0 4px 12px -6px rgba(0,0,0,.25)}
:root .ct-form{max-width:none}
:root .ct-field input[type=text],:root .ct-field input[type=tel],:root .ct-field input[type=email],
:root .ct-field select,:root .ct-field textarea{border-radius:12px;background:#fafbfc;padding:13px 15px}
:root .ct-field input:focus,:root .ct-field select:focus,:root .ct-field textarea:focus{background:#fff;box-shadow:0 0 0 4px rgba(229,0,79,.12)}
:root .ct-field .ct-drop{border-radius:14px}
:root aside.info-card{margin-top:0;align-self:start;background:var(--ink2);color:#fff;border:0;position:relative;overflow:hidden;border-radius:22px;padding:28px}
:root aside.info-card::before{content:'';position:absolute;inset:0;background:var(--glow);pointer-events:none;opacity:.8}
:root aside.info-card>*{position:relative}
:root aside.info-card h3{color:#ff4d7d}
:root aside.info-card p,:root aside.info-card a,:root aside.info-card div{color:#d6d7dd}

/* ---------- compare.php ---------- */
:root .cats .cat{border-radius:999px}
:root .hint{border-radius:999px}
:root .cmp-wrap,:root .cmp-scroll{border-radius:var(--r)}
:root .cbar{border-radius:18px 18px 0 0;box-shadow:0 -10px 30px -12px rgba(0,0,0,.35)}

/* ---------- about.php / why-zic.php ---------- */
:root .about-oil,:root .why-tech,:root .wz-tech{border-radius:24px !important;overflow:hidden}
:root .as-img img,:root .as-img{border-radius:22px}

@media(max-width:760px){
  :root .lay{grid-template-columns:minmax(0,1fr)}
  :root .lay>div:first-child{grid-template-columns:minmax(0,1fr)}
  :root .lcard.big{grid-template-columns:1fr}
  :root .lcard.big .im{min-height:200px}
  :root .lcard.big>div:last-child{padding:20px}
  :root .sec{padding:22px 18px;border-radius:16px}
  :root .ct-main{padding:20px 16px;border-radius:18px}
  :root .page-hero+.trust{margin:-24px 16px 0}
}