/* ====== Slick Slider Styles for Home2 ====== */
     
/* เมื่อใช้ Slick: ปิด flex ของ .hs-card ที่ตั้งไว้เดิม */
        .hs-slick .hs-card {
            flex: 0 0 auto !important;
            /* ยกเลิก flex-basis เดิม */
            width: auto !important;
            /* ให้ Slick จัด width เอง */
            margin: 0 8px;
            /* ระยะห่างระหว่างสไลด์ */
        }

        /* ลูกศรของ Slick (ถ้าอยากซ่อนเปลี่ยนเป็น display:none) */
        .hs-slick .slick-prev,
        .hs-slick .slick-next {
            width: 32px;
            height: 32px;
            z-index: 2;
        }

        .hs-slick .slick-prev {
            left: -6px;
        }

        .hs-slick .slick-next {
            right: -6px;
        }

        .hs-slick .slick-prev:before,
        .hs-slick .slick-next:before {
            font-size: 28px;
            opacity: 0.8;
        }

        /* ปุ่มจุด (ถ้าภายหลังเปิด dots:true) */
        .hs-slick .slick-dots {
            bottom: -26px;
        }

        .hs-slick .slick-dots li {
            margin: 0 3px;
        }

        .hs-slick .slick-dots button:before {
            font-size: 8px;
        }

        /* รูปในการ์ดสไลด์: มุมมน + ตัดส่วนเกินให้เนียน */
        .hs-slick .img-wrap {
            border-radius: 14px;
            overflow: hidden;
            /* ให้รูปถูกตัดตามมุมมน */
            display: block;
        }

        .hs-slick .img-wrap img {
            width: 100%;
            height: auto;
            display: block;
            transform: scale(1);
            /* กันภาพเด้งเวลา hover เดิม */
        }

        /* กันเหนียว: ซ่อนลูกศรทุกกรณี */
        .hs-slick .slick-arrow {
            display: none !important;
        }

        /* ปรับเค้าโครงให้เข้ากับ Slick */
        .product-slick .product-slide {
            margin: 0 8px;
        }

        /* มุมภาพให้กลมกลืน + กันเด้ง */
        .product_slick .single_product,
        .product-slick .single_product {
            border-radius: 12px;
            overflow: hidden;
        }

        /* ส่วนรูปภาพ (ด้านซ้าย) */
        .product-slick .product_thumb {
            width: 45%;
            /* รูปกินพื้นที่ 45% */
            flex: 0 0 45%;
            padding: 10px;
            /* เว้นระยะนิดหน่อย */
        }

        .product-slick .product_thumb a.primary_img,
        .product-slick .product_thumb img {
            width: 100%;
            border-radius: 12px;
            transition: transform 0.25s ease;
            object-fit: cover;
            aspect-ratio: 1/1;
            /* บังคับรูปเป็นสี่เหลี่ยมจัตุรัส */
        }

        /* ซ่อนลูกศร (กันเหนียว) */
        .product-slick .slick-arrow {
            display: none !important;
        }

  /* การ์ดสินค้า: จัดให้ปุ่มไปก้นการ์ดเสมอ */
        .product-slick .single_product {
            border-radius: 14px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .product-slick .single_product figure {
            display: flex;
            flex-direction: column;
            height: 100%;
            margin: 0;
        }


        /* ราคาเดียว ตัวใหญ่ ชัด */
        .price_big {
            font-size: 1.9rem;
            /* ↑ ปรับขนาดได้ตามใจ */
            font-weight: 800;
            color: #e05000;
            /* โทนส้มคอรัลใกล้เคียงเดิม */
            line-height: 1.1;
        }

        /* ปุ่มสั่งซื้อเต็มความกว้าง */
        .order-wrap {
            margin-top: auto;
        }

        .btn-order {
            width: 100%;
            border: 0;
            background: #005825;
            /* เขียวแบรนด์ */
            color: #fff;
            font-weight: 800;
            font-size: 1.05rem;
            padding: .7rem 1rem;
            border-radius: 999px;
            box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
            transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
            cursor: pointer;
        }

        .btn-order:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
        }

        .btn-order:active {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
        }

         /* =============================
   Slick Slide - Best Seller Section
============================= */

        /* ตัว slide แต่ละใบใน slick */
        .product-slick .product-slide {
            margin: 0 10px;
        }

        /* การ์ดสินค้า */
        .product-slick .single_product {
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid #e8e8e8;
            background: #fff;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
        }

        .product-slick .single_product:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }

        .product-slick .single_product figure {
            margin: 0;
        }

        /* กล่องรูปด้านบน */
        .product-slick .product_thumb {
            width: 100%;
            padding: 24px 24px 8px;
            box-sizing: border-box;
        }

        /* ลิงก์คลุมรูป – ทำกรอบโค้งและตัดขอบ */
        .product-slick .product_thumb a.primary_img,
        .product-slick .product_thumb a.primary_img.js-link {
            display: block;
            border-radius: 12px;
            overflow: hidden;
        }

        /* รูปสินค้า – กว้างเต็มการ์ด, สูงตามสัดส่วนรูป */
        .product-slick .product_thumb img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 12px;
            transition: transform 0.25s ease;
            object-fit: cover;
        }

        .product-slick .product_thumb img:hover {
            transform: scale(1.05);
        }

        /* ===== เนื้อหาใต้รูป ===== */

        .product-slick .product_content {
            padding: 0.9rem 1.4rem 1.4rem;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        /* ชื่อสินค้า */
        .product-slick .product_name {
            margin-bottom: .4rem;
        }

        .product-slick .product_name a {
            font-size: 1.5rem;
            font-weight: 700;
            color: #000;
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-slick .product_name a:hover {
            color: #005825;
        }

        /* ราคา */
        .price_big {
            font-size: 1.8rem;
            font-weight: 800;
            color: #e05000;
            margin: 0.3rem 0 0.9rem;
        }

        /* ปุ่มสั่งซื้อ */
        .order-wrap {
            margin-top: auto;
            width: 100%;
        }

        .btn-order {
            width: 100%;
            border: none;
            background: #3CB371;
            color: #fff;
            font-weight: 700;
            font-size: 1.2rem;
            padding: .75rem 1.5rem;
            border-radius: 999px;
            box-shadow: 0 5px 15px rgba(0, 88, 37, .25);
            transition: all .25s ease;
            cursor: pointer;
        }

        .btn-order:hover {
            background: #3CB371;
            box-shadow: 0 8px 20px rgba(0, 88, 37, .35);
            transform: translateY(-2px);
        }

        .btn-order:active {
            background: #3CB371;
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
        }

        /* ให้ slick track ยืดสูงเท่าการ์ดทุกใบ */
        #bestSellerSlider .slick-track {
            display: flex;
        }

        #bestSellerSlider .slick-slide>div {
            height: 100%;
        }

        /* ปิดลูกศรของ Slick */
        .product-slick .slick-arrow {
            display: none !important;
        }


        /* ============================
   บทความสุขภาพ - Slick Style
============================ */
        .kb-slick .kb-slide {
            margin: 0 15px;
            /* ✅ เพิ่มระยะห่างแต่ยังไม่หลวมเกินไป */
            padding-right: 15px;
        }

        .kb-card {
            display: block;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 16px;
            overflow: hidden;
            text-decoration: none;
            transition: all .3s ease;
        }

        .kb-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
        }

        .kb-thumb {
            aspect-ratio: 16/9;
            overflow: hidden;
        }

        .kb-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .3s ease;
        }

        .kb-card:hover .kb-thumb img {
            transform: scale(1.05);
        }

        /* ✅ ชื่อบทความ */
        .kb-title {
            padding: 14px 16px 18px;
            color: #222;
            font-size: 1.25rem;
            /* ขยายฟอนต์ให้ใหญ่ขึ้น */
            line-height: 1.6;
            font-weight: 600;
        }

        /* Slick arrow hidden */
        .kb-slick .slick-arrow {
            display: none !important;
        }

        /* ✅ ปรับระยะขอบสุดสไลด์ไม่ให้ชิดขอบจอ */
        .kb-slick .slick-list {
            margin: 0 -15px;
            padding: 5px 5px 20px;
        }


        /* การ์ดสินค้าโค้งมน */
        .product-slick .single_product {
            border: 1px solid #e8e8e8;
            border-radius: 16px;
            background: #fff;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .product-slick .single_product:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
        }

        /* มุมภาพโค้งมน */
        .product-slick .product_thumb a.primary_img js-link,
        .product-slick .product_thumb img {
            display: block;
            width: 100%;
            border-radius: 14px;
        }

        /* เนื้อหาการ์ด */
        .product-slick .product_content {
            display: flex;
            flex-direction: column;
            gap: .4rem;
            padding: 1rem 1rem 1.1rem;
            text-align: center;
            flex: 1 1 auto;
            padding-top: 0px;
        }

        .product_content {
            margin-top: 0px;
            text-align: center;
        }


        /* ราคาใหญ่ชัด */
        .price_big {
            font-size: 1.9rem;
            font-weight: 800;
            color: #e05000;
            line-height: 1.1;
        }

        /* ปุ่มออเดอร์โค้งมน */
        .order-wrap {
            margin-top: auto;
        }

        /* ช่องว่างรอบสไลด์ */
        .product-slick .product-slide {
            margin: 0 10px;
        }

        /* ✅ จุด (dots) แบบกลม */
        .product-slick .slick-dots {
            position: static;
            margin-top: 12px;
            display: flex !important;
            justify-content: center;
            gap: 8px;
        }

        /* ✅ ทำจุดของสไลด์สินค้าให้เป็นกลม และซ่อนตัวเลข 1,2,3... */
        .product-slick .slick-dots {
            position: static;
            margin-top: 12px;
            display: flex !important;
            justify-content: center;
            gap: 8px;
        }

        .product-slick .slick-dots li {
            margin: 0;
            /* กันระยะของ Slick เอง */
            width: 10px;
            height: 10px;
            /* ไม่จำเป็น แต่กันพลาด */
        }

        /* สไตล์ที่ "ตัวปุ่ม" โดยตรง */
        .product-slick .slick-dots li button {
            width: 10px;
            height: 10px;
            padding: 0;
            border: 0;
            background: #cfd4cf;
            /* สีจุดปกติ */
            border-radius: 50%;
            /* กลมเป๊ะ */
            text-indent: -9999px;
            /* ซ่อนตัวเลข */
            overflow: hidden;
            line-height: 0;
            /* กันเลขดันทุรังโชว์ */
        }

        /* ปิด pseudo-element ของ Slick เพื่อไม่ให้ทับ/ชน */
        .product-slick .slick-dots li button:before {
            content: none !important;
        }

        /* จุดที่ active */
        .product-slick .slick-dots li.slick-active button {
            background: #005825;
        }


        /* ✅ ทำให้การ์ดบทความสูงเท่ากัน และตัดบรรทัดชื่อ */
        .kb-slick .kb-slide {
            display: flex;
            /* ให้ลูกยืดเต็มความสูง */
            height: 100%;
        }

        .kb-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 260px;
            /* ← ปรับได้ตามดีไซน์ (ความสูงรวมของการ์ด) */
        }

        /* ส่วนภาพคงที่อยู่แล้วด้วย aspect-ratio:16/9 */

        /* ชื่อบทความ: ตัดให้เท่ากัน และกันดันความสูงไม่เท่ากัน */
        .kb-title {
            margin-top: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* ← แสดง 2 บรรทัด (เปลี่ยนเป็น 3 ได้) */
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: calc(1.25rem * 1.6 * 2);
            /* = font-size(1.25rem) * line-height(1.6) * 2 บรรทัด */
        }

        /* เผื่อกรณีอยากให้ mobile ยืดหยุ่นขึ้น */
        @media (max-width: 575.98px) {
            .kb-card {
                min-height: 260px;
            }
        }

        
        /* Promo: กรอบเทารอรูป */
        .promo-frame {
            border: 2px dashed #cfd4cf;
            background: #f7f7f7;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 280px;
            /* ปรับความสูงได้ */
            position: relative;
            overflow: hidden;
        }

        .promo-frame .placeholder-text {
            color: #8a8f8a;
            font-size: 1.15rem;
            font-weight: 700;
        }

        /* Promo: การ์ดฝั่งข้อความ */
        .promo-countdown.card {
            border-radius: 16px;
            border: 1px solid #e8e8e8;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
        }

        /* นาฬิกา */
        .timer-display {
            font-variant-numeric: tabular-nums;
            font-weight: 900;
            font-size: clamp(2rem, 2.2vw + 1rem, 3rem);
            letter-spacing: .5px;
            line-height: 1;
            padding: .35rem .65rem;
            border-radius: 12px;
            background: #f2f5f2;
            display: inline-block;
        }

         /* ===== Luxe card style (เรียบหรู) ===== */
        .promo-countdown.card.luxe {
            border: 1px solid #e9ecea;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff 0%, #fafbfa 100%);
            box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
        }

        .promo-countdown .accent {
            color: #c28b00;
            /* โกลด์โทนหรู */
            font-weight: 900;
        }

        /* ป้าย "วันนี้เท่านั้น" สไตล์พรีเมียม */
        .deal-badge {
            background: linear-gradient(135deg, #f2efe6, #fff8e1);
            color: #7a5a00;
            border: 1px solid #efe6cf;
            border-radius: 999px;
            padding: .35rem .75rem;
            font-weight: 700;
            font-size: .95rem;
        }

        /* คำอธิบายใต้หัวข้อ */
        .subtext {
            font-size: 1.05rem;
            color: #2c2c2c;
        }

        /* นาฬิกาแบบหรู เรียบ */
        .timer-display.luxe-timer {
            font-variant-numeric: tabular-nums;
            font-weight: 900;
            font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
            letter-spacing: .3px;
            line-height: 1;
            padding: .55rem .85rem;
            border-radius: 14px;
            background: radial-gradient(120% 120% at 0% 0%, #f7f8f7 0%, #eef2ee 100%);
            border: 1px solid #e5e9e5;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .7),
                0 6px 16px rgba(0, 0, 0, .05);
            color: #0f261a;
        }

        /* หมายเหตุจางๆ */
        .muted-note {
            color: #8c938c;
        }

        /* เมื่อหมดเวลา (หลังเที่ยงวันนี้) */
        .timer-ended {
            background: #f6f6f6 !important;
            color: #9aa19a !important;
            border-color: #ececec !important;
        }

        /* ===== HERO PROMO (เขียวแบรนด์) ===== */
        .promo-hero {
            position: relative;
            overflow: hidden;
            border-radius: 28px;
            padding: 58px 36px;
            color: #0f261a;
            background:
                radial-gradient(120% 120% at 100% -10%, #e7f5ed 0%, rgba(231, 245, 237, 0) 60%),
                linear-gradient(135deg, #f6fbf8 0%, #eaf6ef 100%);
            border: 1px solid #d4e8dd;
            box-shadow:
                0 14px 38px rgba(0, 0, 0, .10),
                inset 0 1px 0 rgba(255, 255, 255, .7);
            isolation: isolate;
            /* เพื่อให้ pseudo ไม่ไปทับ layer อื่น */
        }

        /* เส้นเรืองแสงบางๆ รอบกรอบ */
        .promo-hero::before {
            content: "";
            position: absolute;
            inset: -2px;
            border-radius: 30px;
            background: linear-gradient(135deg, rgba(0, 88, 37, .25), rgba(0, 0, 0, 0), rgba(0, 88, 37, .18));
            z-index: -1;
        }

        /* ลายไฮไลต์โปร่งๆ */
        .promo-hero::after {
            content: "";
            position: absolute;
            width: 360px;
            height: 360px;
            right: -80px;
            top: -80px;
            background: radial-gradient(closest-side, rgba(0, 88, 37, .18), rgba(0, 88, 37, 0));
            filter: blur(14px);
            pointer-events: none;
        }

        /* Badge */
        .promo-hero__badge {
            display: inline-block;
            padding: .55rem 1.1rem;
            border-radius: 999px;
            font-weight: 800;
            font-size: 1.05rem;
            letter-spacing: .3px;
            color: #0f6a3a;
            background: linear-gradient(135deg, #e9f6ef, #dff3ea);
            border: 1px solid #cfe8da;
            box-shadow: 0 6px 18px rgba(0, 88, 37, .08);
            margin-bottom: 1rem;
        }

        /* Title */
        .promo-hero__title {
            font-weight: 900;
            line-height: 1.05;
            font-size: clamp(2.6rem, 3.6vw + .6rem, 4.6rem);
            margin: .35rem 0 .5rem;
        }

        .promo-hero__highlight {
            color: #005825;
            text-shadow: 0 2px 6px rgba(0, 0, 0, .08);
        }

        /* Subtitle */
        .promo-hero__subtitle {
            font-size: 1.25rem;
            color: #244b39;
            margin-bottom: .9rem;
        }

        /* Timer */
        .promo-hero__timer {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            padding: 12px 28px;
            border-radius: 16px;
            background: linear-gradient(145deg, #f7fbf9, #edf6f1);
            border: 1px solid #dcebe2;
            font-weight: 900;
            font-size: clamp(2.1rem, 2.4vw + 1rem, 3.3rem);
            color: #0f261a;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 10px 22px rgba(0, 0, 0, .06);
            font-variant-numeric: tabular-nums;
            -webkit-font-feature-settings: "tnum";
            font-feature-settings: "tnum";
        }

        .promo-hero__timer .unit {
            font-size: 1rem;
            font-weight: 800;
            color: #4a695b;
            margin-left: .15rem;
            margin-right: .4rem;
        }

        /* Note */
        .promo-hero__note {
            color: #6b8a7b;
            font-size: .98rem;
            margin-top: .9rem;
        }

        /* กรอบซ้ายรอรูป (เขียวอ่อน) */
        .promo-frame {
            border: 2px dashed #cfe0d6;
            background: #f4faf6;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 320px;
        }

        .promo-frame .placeholder-text {
            color: #7aa792;
            font-weight: 700;
            font-size: 1.1rem;
        }

        /* หมดเวลา */
        .promo-hero__timer.timer-ended {
            background: #f3f3f3 !important;
            color: #9aa19a !important;
            border-color: #e9e9e9 !important;
            box-shadow: none !important;
        }

        /* ===== HERO: จัดให้สมดุลกลางจอและระยะสวย ===== */
        .hero-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* ✅ ให้อยู่กลางแนวตั้ง */
            text-align: center;
            margin: 2rem auto 1rem;
            /* เพิ่มระยะหายใจรอบหัวข้อ */
        }

        .hero-headline {
            display: flex;
            align-items: center;
            /* ✅ จัดโลโก้เสมอตัวอักษร */
            justify-content: center;
            gap: .7rem;
            font-weight: 900;
            line-height: 1.05;
            font-size: clamp(2.8rem, 3.8vw + .6rem, 5rem);
            margin: 0 auto .4rem;
            /* เว้นระยะจากด้านล่างเล็กน้อย */
        }

        .hero-headline .brandmark {
            height: clamp(50px, 6.5vw, 78px);
            /* ✅ ปรับขนาดโลโก้ให้บาลานซ์ */
            width: auto;
            transform: translateY(2px);
            /* ขยับโลโก้ลงเล็กน้อย */
        }

        .hero-subtitle {
            font-weight: 800;
            font-size: clamp(1.6rem, 2.6vw, 3rem);
            color: #005825;
            line-height: 1.25;
            margin-top: .5rem;
            font-style: italic;
            transform: skewX(-2deg);
        }

        /* ให้ break-mobile ทำงานบนมือถือ */
        .hero-subtitle .break-mobile {
            display: inline;
        }

        @media (max-width: 767.98px) {
            .hero-subtitle .break-mobile {
                display: block;
                margin-top: .2rem;
            }
        }

        /* ===== ย่อหน้าอธิบายใต้หัว ===== */
        .intro-lead {
            max-width: 900px;
            margin: 1.25rem auto 0;
            padding: 0 1rem;
            font-size: clamp(1.15rem, 1.15vw + .2rem, 1.45rem);
            line-height: 1.9;
            color: #222;
            text-align: center;
        }

        /*

*/
        /* ===== HERO: ปรับการขึ้นบรรทัดบนมือถือ + ลดช่องว่างย่อหน้า ===== */

        /* ระยะย่อหน้าใต้หัวข้อบนจอทั่วไปให้พอดีขึ้น */
        .intro-lead {
            margin: .75rem auto 0;
            /* เดิมมากไป → ลดลง */
        }

        .intro-lead b {
            color: #005825;
            font-weight: 800;
        }

        /* มือถือ */
        @media (max-width: 767.98px) {
            .hero-wrap {
                margin: 1rem auto .5rem;
                /* ลดช่องว่างบน-ล่าง */
                padding: 0 12px;
                /* กันชิดขอบจอ */
            }


            .hero-headline .brandmark {
                height: 44px;
                /* โลโก้ไม่ใหญ่เกิน */
                width: auto;
                transform: none;
                /* ยกเลิกขยับลง */
            }

            .hero-headline .brand-text {
                display: block;
                /* แยกบรรทัดจากโลโก้ */
                margin-top: .1rem;
            }

            /* รองหัวเล็กลงและชิดขึ้นเล็กน้อย */
            .hero-subtitle {
                font-size: clamp(1.15rem, 4.2vw, 1.55rem);
                line-height: 1.3;
                margin-top: .35rem;
            }

            .hero-subtitle .break-mobile {
                display: block;
                /* บังคับแตกบรรทัดบนมือถือให้สวย */
                margin-top: .15rem;
            }

            /* ลดช่องว่างของย่อหน้าคำอธิบายให้ติดหัวข้อมากขึ้น */
            .intro-lead {
                margin-top: .5rem;
                /* เดิมห่างไป → ให้ชิดขึ้น */
                padding: 0 .5rem;
                font-size: 1.05rem;
                line-height: 1.75;
            }
        }

        /* บทความ/ข้อความทั่วไป */
        .box_text_top,
        .box_text_top3 {
            font-size: clamp(1.1rem, 0.7vw + 0.9rem, 1.35rem);
            /* จาก 17px → responsive */
            line-height: 1.8;
        }

        /* ชื่อสินค้า */
        .product_name {
            font-size: clamp(1.2rem, 0.8vw + 1rem, 1.8rem);
            /* ↑ เด่นขึ้น */
        }

        /* ราคา */
        .price_big {
            font-size: clamp(1.6rem, 1.2vw + 1rem, 2.2rem);
            /* ↑ */
            font-weight: 800;
            color: #e05000;
            line-height: 1.1;
        }

        /* ปุ่มสั่งซื้อ */
        .btn-order {
            width: 100%;
            border: none;
            background: #3CB371;
            color: #fff;
            font-weight: 700;
            font-size: clamp(1.05rem, 0.6vw + .85rem, 1.25rem);
            /* ↑ */
            padding: .8rem 1.5rem;
            /* ↑ */
            border-radius: 999px;
            box-shadow: 0 5px 15px rgba(0, 88, 37, .25);
            transition: all .25s ease;
            cursor: pointer;
        }

        /* หัวข้อบทความในสไลด์ความรู้ */
        .kb-title {
            padding: 14px 16px 18px;
            color: #222;
            font-size: clamp(1.15rem, 0.9vw + .85rem, 1.45rem);
            /* ↑ */
            line-height: 1.65;
            font-weight: 600;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: calc(1.2rem * 1.65 * 2);
        }

        /* ข้อความประกอบย่อย (เช่นคำอธิบายใต้หัวโปรโมฯ) */
        .subtext {
            font-size: clamp(1.1rem, 0.6vw + .9rem, 1.3rem);
            /* ↑ */
            color: #2c2c2c;
        }

        /* ป้าย/แบดจ์เล็กให้ชัดขึ้น */
        .deal-badge {
            font-size: clamp(1.05rem, 0.6vw + .85rem, 1.2rem);
            /* ↑ */
            font-weight: 700;
        }

        /* นาฬิกาโปรโมฯ (คงความใหญ่ แต่จัดสัดส่วนให้พอดี) */
        .promo-hero__timer {
            font-size: clamp(2.2rem, 2.5vw + 1rem, 3.4rem);
        }

        .promo-hero__timer .unit {
            font-size: clamp(1rem, 0.5vw + .8rem, 1.1rem);
            font-weight: 800;
        }

        .hs-card .img-wrap {
            display: block;
            overflow: hidden;
            border-radius: 1rem;
        }

        /* ✅ เฉพาะรูปเท่านั้นที่มีกรอบและเงา */
        .hs-card img {
            width: 100%;
            height: auto;
            border-radius: 1rem;
            border: 2px solid #f2f2f2;
            /* กรอบบาง ๆ สีเทาอ่อน */
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
            /* เงาเรียบหรู */
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .hs-card:hover img {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
            /* เงาเข้มขึ้นตอน hover */
        }