/* ==========================================================================
   Wellness Solution Club - เขียนใหม่ (v2)
   เป้าหมาย: หน้าตาเหมือนของเดิมทุกอย่าง แต่ไม่พึ่ง Bootstrap / jQuery / iTopPlus
   ของเดิมโหลด CSS 1,704 KB  ไฟล์นี้ ~14 KB
   ========================================================================== */

:root {
    --red:        #d40513;   /* แดงหลักของแบรนด์ (แถบหัวข้อ / ปุ่ม) */
    --red-dark:   #e40613;   /* แดงหัวข้อย่อย */
    --red-hover:  #e90615;
    --green:      #367703;   /* เขียวหัวข้อในเนื้อหา */
    --gray-text:  #8d8d8d;   /* สีเมนู */
    --ink:        #333;
    --line:       #eee;
    --wrap:       1170px;    /* ความกว้างเนื้อหา เท่ากับ .container ของ Bootstrap */
    --pad:        15px;      /* ระยะขอบซ้าย-ขวาปกติ */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ฟอนต์: ต้องเป็น "Kanit, sans-serif" เป๊ะแบบของเดิม ห้ามใส่ Arial คั่น
   เพราะเว็บเดิมประกาศ @font-face kanit ชี้ไป css/kanit/Kanit-Regular.ttf
   ซึ่ง "ไม่มีไฟล์จริง" (404) เบราว์เซอร์จึงตกไปใช้ sans-serif ของระบบ
   ถ้าเราใส่ Arial ไว้ก่อน sans-serif ตัวอักษรไทยจะไปใช้ฟอนต์สำรองคนละตัว
   ทำให้หน้าตาต่างจากของเดิมทันที */
body {
    margin: 0;
    background: var(--red);           /* พื้นหลังแดงนอกกรอบเนื้อหา */
    color: var(--ink);
    font-family: Kanit, sans-serif;
    font-size: 14px;
    line-height: 1.42857;             /* = 20px ตรงกับของเดิม */
}

img { max-width: 100%; border: 0; vertical-align: middle; }
/* ใส่ width/height ใน HTML เพื่อจองที่กัน CLS แต่ให้ความสูงคิดจากอัตราส่วนเอง */
img[width][height] { height: auto; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* เนื้อหาหลักของเว็บเดิมกว้าง 1098px เริ่มที่ x=87 ในกล่องขาวที่เริ่ม x=66
   => เว้นขอบในกล่องขาวข้างละ 21px */
.content { max-width: none; padding-left: 21px; padding-right: 21px; }

/* กล่องขาวที่ครอบเนื้อหา
   ของเดิม: กว้าง 1140px เริ่มที่ x=66 ที่จอ 1286px
   => พื้นแดงของ body โผล่ข้างละ ~73px  ไม่ใช่ขาวเต็มจอ */
.sheet { background: #fff; max-width: 1140px; margin: 0 auto; }

/* ---------- หัวเว็บ: โลโก้ซ้าย + ติดต่อขวา (แถวเดียวกัน) ----------------
   วัดจากเว็บจริงที่ 1286px:
     header สูง 120px พื้นแดง (สีมาจาก body)
     โลโก้    x=66  y=0  กว้าง 285 สูง 120   -> ชิดซ้าย
     เบอร์โทร x=948 y=33 (22px) / LINE y=63 (18px) -> ชิดขวา เรียง 2 บรรทัด
   หมายเหตุ: ไฟล์โลโก้เป็นตัวอักษรสีขาวล้วนบนพื้นโปร่ง (ตรวจพิกเซลแล้ว)
   จึงต้องอยู่บนพื้นแดงเท่านั้น ถ้าวางบนขาวจะกลายเป็นช่องว่างเปล่า */
.header { background: var(--red); }
.header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; min-height: 120px;
}
.header .logo img { width: 285px; height: auto; display: block; }
.header .contact { text-align: left; color: #fff; }
.header .contact a, .header .contact .line-id {
    display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600;
}
.header .contact a { font-size: 22px; }
.header .contact .line-id { font-size: 18px; margin-top: 5px; }
.header .contact img { width: 20px; height: auto; flex: 0 0 auto; }

/* ---------- เมนู -------------------------------------------------------- */
.nav { background: #fff; border-bottom: 1px solid var(--line); position: relative; }
.nav-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.menu > li { position: relative; }
.menu > li > a,
.menu > li > button {
    display: block; padding: 15px 15px;
    font: inherit; font-size: 18px; color: var(--gray-text);
    background: none; border: 0; cursor: pointer;
}
.menu > li > a:hover, .menu > li > button:hover,
.menu > li.open > button { color: var(--red-hover); }

.caret { display: inline-block; margin-left: 4px; border: 4px solid transparent; border-top-color: currentColor; vertical-align: middle; }

/* เมนูย่อย */
.submenu {
    list-style: none; margin: 0; padding: 6px 0;
    position: absolute; left: 0; top: 100%; min-width: 265px;
    background: #fff; border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    display: none; z-index: 1000; text-align: left;
}
.menu > li.open > .submenu { display: block; }
.submenu a { display: block; padding: 6px 20px; font-size: 16px; color: var(--ink); }
.submenu a:hover { color: var(--red-hover); }

/* ---- เมนูชั้นที่ 2 : กดหมวดแล้วรายการสินค้ากางออกด้านข้าง ----------------
   ของเดิมเรียงสินค้า 26 รายการลงมาเป็นแถวเดียว ยาวเกินจอ
   แบบนี้ชั้นแรกเห็นแค่ 3 หมวด เลือกหมวดแล้วค่อยเห็นสินค้าในหมวดนั้น */
.submenu .grp { position: relative; list-style: none; }
.submenu .grp > button {
    display: block; width: 100%; text-align: left;
    padding: 6px 20px; font: inherit; font-size: 16px;
    color: var(--ink); background: none; border: 0; cursor: pointer;
}
.submenu .grp > button:hover,
.submenu .grp.open > button { color: var(--red-hover); }
/* ลูกศรชี้ขวา บอกว่ายังกางต่อได้อีกชั้น */
.caret-r {
    float: right; margin: 7px 0 0 8px;
    border: 4px solid transparent; border-left-color: currentColor;
}
.submenu2 {
    list-style: none; margin: 0; padding: 6px 0;
    position: absolute; left: 100%; top: -7px; min-width: 265px;
    background: #fff; border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    display: none; z-index: 1001;
    /* หมวดแรกมี 22 รายการ ยาว 781px เกินขอบล่างจอ กดรายการท้ายๆ ไม่ได้
       จำกัดความสูงแล้วให้เลื่อนในตัวมันเอง */
    max-height: min(70vh, 620px); overflow-y: auto;
}
.submenu .grp.open > .submenu2 { display: block; }
/* เปิดด้วยการชี้เมาส์ เฉพาะเครื่องที่มีเมาส์จริงและจอกว้างพอ
   ถ้าปล่อยให้ :hover ทำงานบนจอสัมผัส เมนูจะเด้งค้างเวลาแตะ */
@media (hover: hover) and (min-width: 992px) {
    .submenu .grp:hover > .submenu2 { display: block; }
    .submenu .grp:hover > button { color: var(--red-hover); }
}

/* ปุ่มไอคอนบนมือถือ */
.icons { display: none; gap: 4px; align-items: center; }
.icons a, .icons button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: 0; color: #000; cursor: pointer;
}
.icons img { width: 30px; height: auto; }
.icons img[width][height] { height: auto; }   /* กันกฎ CLS ด้านบนไม่ให้บังคับความสูง */

.burger {
    display: none; align-items: center; gap: 8px;
    background: none; border: 0; font: inherit; font-size: 18px; color: var(--ink);
    padding: 12px 15px; cursor: pointer;
}
.burger .bars { width: 22px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.burger .bars::before, .burger .bars::after {
    content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
}
.burger .bars::before { top: -7px; }
.burger .bars::after  { top: 7px; }

/* ---------- แบนเนอร์ ----------------------------------------------------
   ของเดิม: x=76 กว้าง 1120 สูง 488 (ไม่เต็มขอบจอ) และห่างจากเมนู 10px */
.banner { background: #fff; padding-top: 3px; }
.banner .wrap { padding: 0 10px; max-width: 1140px; }
.banner img { width: 100%; height: auto; display: block; }

/* ---------- แถบหัวข้อหน้า (แดง) ----------------------------------------
   ของเดิม: ตัวอักษร 24px สีขาว น้ำหนักปกติ จัดกึ่งกลาง บนแถบแดงเต็มความกว้าง */
/* ของเดิม: กล่องแดงสูง 60px padding 13px ข้อความ 24px สูง 34px
   ห่างจากปลายแบนเนอร์ 41px */
/* แถบหัวข้อหน้า และแถบ "ผลิตภัณฑ์ที่น่าสนใจ" ใช้รูปแบบเดียวกัน */
.pagetitle,
.rel-head {
    background: var(--red);
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 34px;
    padding: 13px;
}
.pagetitle { margin: 41px 0 22px; }

/* ---------- เนื้อหา ----------------------------------------------------- */
/* ระยะห่างของเดิม (วัดจากเว็บจริง):
     p  margin-bottom 10px, line-height 20px คงที่ (ไม่ใช่ 1.7)
     ul margin-bottom 10px, li ไม่มี margin เลย สูงบรรทัดละ 23px
   ตัวอักษร 16px แต่ line-height 20px จึงแน่นกว่าที่คิด */
/* บทความบางหน้ามีลิงก์แหล่งที่มายาวมาก (kn03) ถ้าไม่ยอมให้ตัดคำ
   หน้าจะกว้างเกินจอบนมือถือจนเลื่อนซ้าย-ขวาได้ทั้งหน้า */
.content { padding-bottom: 30px; overflow-wrap: break-word; }
.content p  { margin: 0 0 10px; }

/* รายการหัวข้อย่อยทั่วไป (เช่นในคอลัมน์ขวา) - วัดจากเว็บจริง:
     ul  padding-left 40px  margin-bottom 10px
     li  ตัวอักษร 16px  สูงบรรทัด 22.86px  ไม่มี margin */
.content ul { margin: 0 0 10px; padding-left: 40px; }
.content li { margin: 0; font-size: 16px; line-height: 22.86px; }

/* รายการ 15 ข้อใต้หัวข้อ "แนะนำเชคสูตรใหม่"
   ของเดิมสูงบรรทัด 27.2px (สูงกว่ารายการทั่วไป) li สูงข้อละ 27.2px
   15 ข้อ = 408px  และห่างจากเส้นใต้หัวข้อ 20px */
.content ul.list-main { margin: 20px 0 0; }   /* ต้องเจาะจงกว่า .content ul ไม่งั้นโดนทับ */
.list-main li         { line-height: 27.2px; }

/* หัวข้อแดงที่ตามหลังรายการ ("รสชาติของเรา") ห่าง 22px */
.content ul + .h-red { margin-top: 22px; }

/* ข้อความเนื้อหา 16px สูงบรรทัด 23px (วัดจากของเดิม: li สูง 23px พอดี
   และย่อหน้า 2 บรรทัดสูง 46px) */
/* ข้อความเนื้อหาทั่วไป 16px สูงบรรทัด 22.86px (วัดจากเว็บเดิม)
   ย่อหน้านำใต้แถบแดงเยื้องขวา 5px เท่ากับหัวข้อเขียวด้านบน */
/* เนื้อหาทั่วไป ขยับจาก 16px เป็น 17px ตามที่เจ้าของเว็บขอ
   ระยะบรรทัดต้องขยับตามด้วย ไม่งั้นตัวใหญ่ขึ้นแต่บรรทัดชิดเท่าเดิม จะอ่านอึดอัด
   ภาษาไทยมีสระบนล่าง ต้องการระยะบรรทัดมากกว่าอังกฤษที่ขนาดเท่ากัน */
.lead       { font-size: 16px; line-height: 22.86px; }
.lead-intro { padding-left: 5px; }
/* หัวข้อเขียว มี 2 ขนาดในเว็บเดิม
     บนสุด (ใต้แถบแดง)  20px  สูงบรรทัด 28.58px  เยื้องขวา 5px
     ในคอลัมน์ขวา       18px  สูงบรรทัด 25.72px  ไม่เยื้อง
   ทั้งคู่หนา 700 สี rgb(54,119,3) */
.h-green    { color: var(--green); font-size: 18px; font-weight: 700; margin: 0 0 10px; line-height: 25.72px; }
.h-green-lg { font-size: 20px; line-height: 28.58px; padding-left: 5px; }

/* หัวข้อแดง + เส้นกั้นใต้หัวข้อ
   วัดจากเว็บจริง: กล่องที่ครอบหัวข้อกว้าง 1098 (เท่าความกว้างเนื้อหา)
   มี border-bottom: 2px solid rgb(68,68,68)  เส้นอยู่ที่กล่อง ไม่ใช่ที่ตัวอักษร
   ตัวอักษร 24px หนา 700 สี rgb(228,6,19) สูงบรรทัด 34.28px */
.h-red {
    color: var(--red-dark);
    font-size: 24px;
    font-weight: 700;
    line-height: 34.28px;
    margin: 17px 0 0;
    padding: 0;
    border-bottom: 2px solid #444;
}
/* หัวข้อระดับส่วนในหน้าสินค้า
   ตัวอักษร 24px หนา 700 สี rgb(228,6,19) วัดจากเว็บจริง prd-shake
   เส้นคั่นสีดำใต้หัวข้อ กว้างเต็มความกว้างเนื้อหา ตามที่เจ้าของเว็บขอ
   (เว็บจริงหน้าสินค้าไม่มีเส้นนี้ แต่หน้าบทความมี — เอามาใช้กับหน้าสินค้าด้วย)
   เส้นอยู่ที่กล่อง ไม่ใช่ที่ตัวอักษร จึงยาวเต็มบรรทัดแม้ข้อความจะสั้น */
.h-sec {
    color: var(--red-dark);
    font-size: 22px;
    font-weight: 700;
    line-height: 31.4px;
    margin: 34px 0 14px;
    padding: 0 0 8px;
    border-bottom: 2px solid #444;
}
@media (max-width: 767px) {
    .h-sec {
        font-size: 20px;
        line-height: 28px;
        margin: 26px 0 12px;
        padding-bottom: 6px;
    }
}

/* คำเตือนใต้รูปสินค้า 12px สีแดงล้วน จัดกึ่งกลางคอลัมน์
   ของเดิมห่างจากขอบล่างรูป 15px */
.note-red  { color: #f00; font-size: 12px; text-align: center; margin: 15px 0 0; line-height: 14px; }

/* ---------- ระบบคอลัมน์ 12 ช่องที่ยกมาจากเนื้อหาเดิม --------------------
   เนื้อหาบางบล็อกของเดิมจัดหน้าด้วยคอลัมน์ของ Bootstrap เช่นแถว
   "ไอคอนซ้าย + ที่อยู่ขวา" ในหน้าติดต่อเรา ถ้าไม่มีกฎพวกนี้ แถวจะยุบเป็น
   บรรทัดเดียวเรียงลงมา รูปไปกองกลางหน้า (เคยพังมาแล้ว)
   ลอกพฤติกรรมของ Bootstrap 3 มาตรงๆ: ลอยซ้าย เว้นข้าง 5px กว้าง N/12 */
.c-row { margin: 0; }
.c-row::after, .c-clear { content: ""; display: table; clear: both; }
/* min-height: 1px คือกฎเดียวกับที่ Bootstrap ใช้ ห้ามตัดออก
   คอลัมน์ว่าง (ที่ของเดิมใช้เป็นตัวเว้นระยะให้รูปอยู่กลางการ์ด) สูง 0
   ถ้าไม่มีบรรทัดนี้มันจะไม่กันที่แนวนอน คอลัมน์ถัดไปเลยเลื่อนไปชิดซ้าย */
.c-col { float: left; width: 100%; min-height: 1px; padding: 0 5px; box-sizing: border-box; }
/* เรียงจากจอเล็กไปจอใหญ่แบบเดียวกับ Bootstrap: xs ใช้ตลอด แล้ว sm/md มาทับทีหลัง
   ลำดับในไฟล์สำคัญมาก ห้ามสลับ ไม่งั้นจอเล็กจะไปใช้ค่าของจอใหญ่ */
.c-xs-1  { width: 8.3333%; }   .c-xs-2  { width: 16.6667%; }
.c-xs-3  { width: 25%; }       .c-xs-4  { width: 33.3333%; }
.c-xs-5  { width: 41.6667%; }  .c-xs-6  { width: 50%; }
.c-xs-7  { width: 58.3333%; }  .c-xs-8  { width: 66.6667%; }
.c-xs-9  { width: 75%; }       .c-xs-10 { width: 83.3333%; }
.c-xs-11 { width: 91.6667%; }  .c-xs-12 { width: 100%; }
@media (min-width: 768px) {
    .c-sm-1  { width: 8.3333%; }   .c-sm-2  { width: 16.6667%; }
    .c-sm-3  { width: 25%; }       .c-sm-4  { width: 33.3333%; }
    .c-sm-5  { width: 41.6667%; }  .c-sm-6  { width: 50%; }
    .c-sm-7  { width: 58.3333%; }  .c-sm-8  { width: 66.6667%; }
    .c-sm-9  { width: 75%; }       .c-sm-10 { width: 83.3333%; }
    .c-sm-11 { width: 91.6667%; }  .c-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
    .c-md-1  { width: 8.3333%; }   .c-md-2  { width: 16.6667%; }
    .c-md-3  { width: 25%; }       .c-md-4  { width: 33.3333%; }
    .c-md-5  { width: 41.6667%; }  .c-md-6  { width: 50%; }
    .c-md-7  { width: 58.3333%; }  .c-md-8  { width: 66.6667%; }
    .c-md-9  { width: 75%; }       .c-md-10 { width: 83.3333%; }
    .c-md-11 { width: 91.6667%; }  .c-md-12 { width: 100%; }
}
/* บล็อกที่ครอบคอลัมน์ต้องกวาดของที่ลอยไว้ ไม่งั้นบล็อกถัดไปจะซ้อนทับ */
.prd-text::after, .prd-green::after, .prd-red::after, .prd-note::after,
.artbody::after, .rvbody::after { content: ""; display: table; clear: both; }

/* ---------- เนื้อหาแบบ 2 คอลัมน์ (รูปซ้าย / ข้อความขวา) ----------------
   วัดจากเว็บจริงที่ 1286px (พื้นที่เนื้อหา x=87 กว้าง 1098):
     รูปสินค้า   x=90  กว้าง 532   => คอลัมน์ซ้าย 535 มีเยื้องซ้าย 3px
     ช่องว่างกลาง 25px  (622 -> 647)
     คอลัมน์ขวา  x=647 กว้าง 538
   535 + 25 + 538 = 1098 พอดี */
.cols {
    display: grid;
    grid-template-columns: 535fr 538fr;
    gap: 25px;
    align-items: start;
    /* margin-top ยุบรวมกับ margin-bottom ของย่อหน้าด้านบน จึงต้องใส่ 24 ไม่ใช่ 14
       ส่วน padding-bottom ใช้แทน margin-bottom เพราะ padding ไม่ยุบรวม
       ของเดิมกรอบล่างของบล็อกนี้เลยคำเตือนลงมา 12px */
    margin: 24px 0 0;
    padding-bottom: 12px;
}
.cols .col-img { padding-left: 3px; text-align: center; }
.cols .col-img img { width: 100%; height: auto; }

/* ---------- เอฟเฟกต์รูปตอนเอาเมาส์ชี้ ----------------------------------
   ของเดิมใช้ figure.effect-selena:
     figure.effect-selena img       { transition: transform .35s; transform-origin: 50% 50% }
     figure.effect-selena:hover img { transform: scale3d(.95,.95,1) }
     .grid figure                   { overflow: hidden }
   คือรูป "ย่อลงเหลือ 95%" ใน 0.35 วินาที ไม่ใช่ขยาย
   ใช้กับทั้งรูปสินค้าใหญ่และรูปรสชาติ */
.col-img > a,
.flavors > a {
    display: block;
    overflow: hidden;
    background: #fff;
}
.col-img > a img,
.flavors > a img {
    transition: transform .35s;
    transform-origin: 50% 50%;
}
.col-img > a:hover img,
.col-img > a:focus-visible img,
.flavors > a:hover img,
.flavors > a:focus-visible img { transform: scale3d(.95, .95, 1); }

/* บล็อกสัญลักษณ์รักษ์หัวใจ: รูปเล็กซ้าย ข้อความขวา
   ของเดิมรูปเล็กอยู่ที่ x=652 คือเยื้องจากขอบคอลัมน์ 5px */
.media { display: flex; gap: 9px; align-items: flex-start; margin: 20px 0 0; padding-left: 5px; }
.media > img { flex: 0 0 80px; width: 80px; height: auto; }
.media p { margin: 0; }   /* ไม่งั้น margin-bottom 10px ดันปุ่มด้านล่างเลื่อนลง */

/* ---------- ปุ่ม --------------------------------------------------------
   ปุ่ม "รายละเอียดเพิ่มเติม" อยู่ในคอลัมน์ขวา จึงกว้างตามคอลัมน์
   ปุ่ม "สั่งซื้อสินค้า" อยู่เต็มความกว้าง (.btn-wide) */
.btn {
    display: block; width: 100%;
    padding: 10px 0 7px;
    background: var(--red); color: #fff;
    text-align: center; font-size: 14px;
    border: 0; cursor: pointer;
    transition: background-color .3s;
}
.btn:hover, .btn:focus { background: #262626; color: #fff; }
/* ปุ่ม "รายละเอียดเพิ่มเติม" ของเดิมกว้าง 169px จัดกึ่งกลางคอลัมน์ขวา (x=831)
   ห่างจากบล็อกรักษ์หัวใจด้านบน 24px */
/* ความกว้างปุ่มของเดิมไม่ได้ตายตัว แต่เป็น "คอลัมน์ 1 ใน 3 ของแถวที่ครอบอยู่
   ลบระยะขอบ 5px สองข้าง" แล้ววางกึ่งกลาง  ตรวจกับของจริงแล้วได้ตามนี้ทุกหน้า:
     prd-greentea แถว 725 -> 725/3-10 = 232      (ของเดิม 232)
     prd-shake    แถว 538 -> 538/3-10 = 169      (ของเดิม 169)
     สั่งซื้อสินค้า แถว 378 -> 378/3-10 = 116      (ของเดิม 116)
   ถ้าตรึงไว้ 169px หน้าที่คอลัมน์กว้างกว่าจะได้ปุ่มสั้นผิด */
.btn-narrow { width: calc(33.3333% - 10px); min-width: 116px; margin: 18px auto 0; }
/* ส่วนปุ่มที่อยู่นอกคอลัมน์ ของเดิมเป็น col-md-12 คือยาวเต็มแถว ลบขอบ 23 ซ้าย 20 ขวา
   (หน้าชุดโปรโมชั่น: เนื้อหากว้าง 1098 -> ปุ่มกว้าง 1055 เริ่มที่ x=110) */
.btn-wide { display: block; width: auto; margin: 18px 20px 0 23px; }

/* ปุ่ม "สั่งซื้อสินค้า" ของเดิม "ไม่ได้" เต็มความกว้าง
   วัดจริง: x=578 กว้าง 116 สูง 37 จัดกึ่งกลางเนื้อหา (กึ่งกลางที่ x=636)
   ห่างจากแถวรูปรสชาติด้านบน 62px */
.btn-order {
    display: block; width: 116px; height: 37px;
    margin: 62px auto 0;
    padding: 0; line-height: 37px;
    background: var(--red); color: #fff;
    text-align: center; font-size: 14px;
    border: 0; cursor: pointer;
    transition: background-color .3s;
}
.btn-order:hover, .btn-order:focus { background: #262626; color: #fff; }

/* ---------- แถวรูปรสชาติ ------------------------------------------------
   ของเดิม: รูปกว้าง 204 สูง 170 ช่องว่าง 20px เริ่มที่ x=87
   (1098 - 20*4) / 5 = 203.6 => repeat(5,1fr) gap 20 ได้พอดี
   ห่างจากเส้นใต้หัวข้อ "รสชาติของเรา" 26px */
.flavors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 26px 0 0; }
.flavors img { width: 100%; height: auto; display: block; }
/* หน้าที่มีแค่ 2 กลิ่น วางกึ่งกลางที่ขนาดจริงของรูป
   ถ้าใช้กริด 5 ช่องเหมือนหน้าเชค รูปจะเหลือ 197px และเบียดไปชิดซ้าย */
.flavors-2 { grid-template-columns: repeat(2, 291px); justify-content: center; gap: 40px; }
/* ชาเขียวมี 4 กลิ่น เต็มความกว้างพอดี ไม่ต้องกำหนดความกว้างตายตัว */
.flavors-4 { grid-template-columns: repeat(4, 1fr); }
/* ภาพรวมทุกกลิ่น วางเต็มความกว้างเหนือแถวรูป+ข้อความ */
.flavors-hero { display: block; margin: 18px 0 4px; background: #fff; }
.flavors-hero img { width: 100%; height: auto; display: block; }

/* บล็อกแยกตามขนาดบรรจุ วางคู่กัน 2 คอลัมน์
   ถ้าวางเรียงลงมาทีละแถวเต็มความกว้าง จะเหลือที่ว่างข้างขวาเยอะเกินไป */
.sizes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 30px; margin: 30px 0 38px; }
.size-card { text-align: center; }
.size-card > a:first-child { display: block; background: #fff; overflow: hidden; }
.size-card img { width: 100%; height: auto; display: block; max-width: 340px; margin: 0 auto; }
.size-card > a:first-child:hover img,
.size-card > a:first-child:focus-visible img { transform: scale3d(.95, .95, 1); }
.size-card img { transition: transform .35s; transform-origin: 50% 50%; }
.content .size-card p.h-green { margin: 12px 0 6px; }
.content .size-card p.lead { margin: 0; }
/* ต้องคงระยะบน-ล่างของ .btn ไว้ (10px บน 7px ล่าง) ไม่งั้นปุ่มจะแบนเหลือ 20px
   เพราะ .btn ได้ความสูงจาก padding ล้วนๆ ไม่ได้ตั้ง height ไว้ */
.size-card .btn-narrow { width: auto; max-width: 240px; margin: 14px auto 0; padding: 10px 20px 7px; }

/* ชื่อกลิ่น + ขนาดบรรจุ ใต้รูปแต่ละใบ
   วางไว้ใน <a> เดียวกับรูป จะได้กดตรงไหนก็เปิดรูปใหญ่ได้ */
.flavors .fl-cap {
    display: block;
    text-align: center;
    padding: 10px 4px 0;
    font-size: 16px;
    line-height: 1.35;
    color: rgb(51, 51, 51);
}
.flavors .fl-cap b {
    display: block;
    font-weight: 400;
    font-size: 14px;
    color: rgb(119, 119, 119);
}

/* ---------- แถบผลิตภัณฑ์ที่น่าสนใจ --------------------------------------
   ตามที่ขอ: ใช้รูปแบบเดียวกับแถบหัวข้อหน้า (ดูกฎ .pagetitle, .rel-head ด้านบน)
   จึงกว้างเท่าเนื้อหา 1098 เริ่ม x=87 ไม่ล้นออกไปชิดขอบกล่องขาวเหมือนของเดิม
   ห่างจากปุ่มสั่งซื้อด้านบน 90px และเว้นใต้แถบ 22px เท่าแถบหัวข้อหน้า */
.rel      { margin: 90px 0 0; }
.rel-head { margin: 0 0 22px; }
.rel-wrap { position: relative; }
.rel-track {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 4px 2px;
}
/*  ห้ามใส่ scroll-snap-type / scroll-snap-align ตรงนี้เด็ดขาด
    เคยใส่ไว้แล้วทำให้ PageSpeed Insights รายงาน NO_LCP คือวัด
    Largest Contentful Paint ไม่ได้เลย และ TBT พลอยคำนวณไม่ได้ตาม
    (คะแนน Performance ขึ้นเป็นเครื่องหมายตกใจแทนตัวเลข)

    สาเหตุ: พอมี snap target เบราว์เซอร์จะ "เลื่อนแถบเองตอนจัดหน้า"
    และ Chrome หยุดบันทึก LCP ทันทีที่หน้ามีการเลื่อน
    พิสูจน์แล้วด้วยการตัดออก -> LCP กลับมายิงที่ 244ms ทันที

    ผลที่เสียไปคือการ์ดไม่ดูดเข้าที่ตอนเลื่อนนิ้ว ซึ่งแลกกันคุ้ม  */
.rel-track::-webkit-scrollbar { display: none; }
.rel-item { flex: 0 0 auto; width: 200px; display: flex; }
.rel-item > a {
    display: flex; flex-direction: column; width: 100%;
    border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff;
    transition: box-shadow .2s, transform .2s;
}
.rel-item > a:hover,
.rel-item > a:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,.13); transform: translateY(-3px); }
/* ของเดิม: ชื่อสินค้าเปลี่ยนเป็นแดง rgb(226,5,20) ตอนชี้การ์ด */
.rel-item > a:hover .rel-name,
.rel-item > a:focus-visible .rel-name { color: #e20514; }
/* การ์ดสินค้า วัดจากเว็บเดิม:
     การ์ด 200 x 230.5  ขอบ 1px #eee  มุมโค้ง 6px  พื้นขาว
     รูปในการ์ด 170 x 136 เยื้องจากขอบการ์ด 14px (จึงเริ่มที่ x=81)
     ส่วนชื่อสินค้าสูง 64px ตัวอักษร 16px */
.rel-img {
    display: flex; align-items: center; justify-content: center;
    height: 164px; padding: 14px; background: #fafafa;
}
/* ต้องใส่ [width][height] ด้วย ไม่งั้นโดนกฎกัน CLS บรรทัดบนสุด (img[width][height]
   {height:auto}) ทับ เพราะน้ำหนัก selector สูงกว่า */
.rel-img img, .rel-img img[width][height] { width: 170px; height: 136px; object-fit: contain; }
.rel-name {
    height: 64px; padding: 10px 12px; text-align: center;
    font-size: 16px; line-height: 22px; color: var(--ink);
    transition: color .2s;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ปุ่มลูกศรเลื่อน */
.rel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.95); border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .2s, border-color .2s;
}
.rel-nav:disabled { opacity: 0; pointer-events: none; }

/* เอาเมาส์ชี้ (หรือ tab มาโฟกัสด้วยคีย์บอร์ด) = ปุ่มเป็นสีแดง ลูกศรเป็นสีขาว */
.rel-nav:hover,
.rel-nav:focus-visible { background: var(--red); border-color: var(--red); }
.rel-nav:hover::before,
.rel-nav:focus-visible::before { border-color: #fff; }

.rel-prev { left: -6px; }
.rel-next { right: -6px; }
.rel-nav::before {
    content: ''; width: 10px; height: 10px;
    border-top: 2px solid #333; border-right: 2px solid #333;
    transition: border-color .2s;
}
.rel-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.rel-next::before { transform: rotate(45deg);   margin-right: 4px; }

/* ==========================================================================
   ส่วนที่ใช้เฉพาะหน้าแรก (index.html)
   ตัวเลขทั้งหมดวัดจากเว็บจริงที่จอ 1286px
   ========================================================================== */

/* ---------- แถบหัวข้อหมวด (ผลิตภัณฑ์ / รีวิวผลิตภัณฑ์) -------------------
   ของเดิม: x=87 กว้าง 1098 สูง 63  ตัวอักษร 26px หนา 700 ขาว กึ่งกลาง
   สูงกว่าแถบหัวข้อหน้า (.pagetitle) อยู่ 3px เพราะตัวอักษรใหญ่กว่า 2px */
.sectionbar {
    background: var(--red); color: #fff; text-align: center;
    font-size: 26px; font-weight: 700; line-height: 37.14px;
    padding: 13px; margin: 55px 0 0;
}
/* แถบ "รีวิวผลิตภัณฑ์" ที่ตามหลังกริดสินค้า ห่างมากกว่าแถบแรก */
.pgrid + .sectionbar { margin-top: 76px; }

/* ---------- บล็อกแนะนำบริษัท (2 คอลัมน์) --------------------------------
   ของเดิมกินเต็มความกว้างกล่องขาว 1140 ไม่ใช่ 1098 ของเนื้อหา
   จึงต้องดึงออกนอก padding ของ .content ด้วย margin ติดลบ
   คอลัมน์ละ 570  รูปซ้าย 512 กึ่งกลางคอลัมน์ (x=94) */
.about { display: grid; grid-template-columns: 1fr 1fr; margin: 35px -21px 0; align-items: start; }
.about-img { text-align: center; padding-top: 10px; }
.about-img img { width: 512px; max-width: 100%; height: auto; }
.about-text { padding: 15px 7px 0; text-align: center; }

/* ทุกกฎของ <p> ต้องเขียนเป็น ".about-text p.xxx" ให้เจาะจงกว่า ".content p"
   ไม่งั้นโดน margin ของ .content p ทับ (เจอปัญหานี้มาแล้วหลายรอบ) */
.about-title { color: var(--red); font-size: 30px; font-weight: 700; line-height: 42.86px; margin: 0 0 15px; }
.about-text p { font-size: 16px; line-height: 22.86px; margin: 0 0 20px; }
.about-text p:first-of-type { margin-bottom: 30px; }
.about-text p.strong { font-weight: 700; color: #262626; margin-bottom: 21px; }
/* หมายเหตุตัวเล็กสีแดง ชิดซ้าย ไม่ใช่กึ่งกลางเหมือนย่อหน้าอื่น และไม่เว้นระหว่างกัน */
.about-text p.about-note { text-align: left; color: var(--red); font-size: 14px; line-height: 20px; margin: 0; }

/* ปุ่ม "อ่านเพิ่มเติม" ของเดิมกว้าง 179 สูง 37 จัดกึ่งกลางคอลัมน์ขวา */
.btn-more { width: 179px; margin: 20px auto 0; }

/* ---------- กริดสินค้า 7 รายการ ------------------------------------------
   ของเดิม: รูป 260x260 เรียง 4 คอลัมน์ ช่องว่างแนวนอน 19 แนวตั้ง 28
   (1098 - 19*3) / 4 = 260.25 พอดี */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 19px; row-gap: 30px; margin: 30px 0 0; }
.pcard img { width: 100%; height: auto; display: block; }
.content p.pcard-name { font-size: 14px; font-weight: 700; color: #bd0310; line-height: 20px; margin: 0; }
.content p.pcard-sub  { font-size: 14px; font-weight: 700; color: #262626; line-height: 20px; margin: 0; }
.pcard .btn { width: 130px; margin-top: 20px; }

/* ---------- การ์ดรีวิว 3 ใบ ---------------------------------------------
   ของเดิม: กล่องพื้นเทาเข้ม rgb(49,49,49) กว้าง 358 สูง 500 ช่องว่าง 12
   รูป 209x209 กึ่งกลาง ห่างจากขอบบน 35 */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 33px 0 0; }
/* กล่องสูง 500 ตายตัวตามของเดิม ไม่ปล่อยให้สูงตามความยาวข้อความ
   ทั้ง 3 ใบจะได้สูงเท่ากันแม้ข้อความยาวไม่เท่ากัน */
.rvcard { background: #313131; color: #fff; text-align: center; padding: 35px 25px 0; min-height: 500px; }
.rvcard > img { width: 209px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.content p.rvcard-name { font-size: 20px; font-weight: 700; line-height: 28.58px; margin: 23px 0 0; }
/* ตัดข้อความที่ 5 บรรทัดตายตัว (สูง 100px) ไม่งั้นใบที่ข้อความยาวกว่า
   จะดัน "อ่านต่อ" ลงไปคนละระดับกับใบอื่น ของเดิมตัดที่ 5 บรรทัดเท่ากันหมด */
.content p.rvcard-text {
    font-size: 14px; line-height: 20px; margin: 35px 0 0; height: 100px;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.rvcard-more { display: inline-block; color: #f00012; font-size: 14px; line-height: 20px; margin-top: 12px; }
.rvcard-more:hover, .rvcard-more:focus { text-decoration: underline; }

/* ---------- ส่วนสาระน่ารู้ (พื้นแดง) -------------------------------------
   ของเดิม: x=66 กว้าง 1140 พื้น rgb(228,25,39) เต็มความกว้างกล่องขาว
   ในนั้นมีบทความ 2 ชิ้น รูปเป็น background-image ครอบ 319x204 */
/* margin-bottom ติดลบ 30 เพื่อหักล้าง padding-bottom ของ .content
   ของเดิมส่วนนี้ชนขอบ footer พอดี ไม่มีช่องว่างขาวคั่น */
.articles { background: #e41927; color: #fff; margin: 41px -21px -30px; padding: 45px 21px 52px; }
.articles-title { font-size: 30px; font-weight: 700; line-height: 42.86px; margin: 0 0 30px; }
/* แถวบทความสูง 225 = รูป 204 + เว้นล่าง 21  ห่างกันแถวละ 16 */
.art { display: grid; grid-template-columns: 362px 1fr; padding-bottom: 21px; margin-bottom: 16px; }
.art:last-child { margin-bottom: 0; }
.art-img {
    display: block; height: 204px; margin: 0 20px 0 23px;   /* รูปกว้าง 319 ในคอลัมน์ 362 */
    background-size: cover; background-position: 50% 25%; background-repeat: no-repeat;
}
.art-text { padding-left: 23px; }
.art-title { font-size: 18px; font-weight: 700; line-height: 24px; margin: 0 0 6px; color: #fff; }
.art-excerpt {
    font-size: 16px; line-height: 22px; margin: 0; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.art:hover .art-title { text-decoration: underline; }

/* ==========================================================================
   หน้าบทความ / หน้ารีวิว  (วัดจาก kn01-overweight ของเดิมที่จอ 1286px)
   ========================================================================== */

/* หัวข้อบทความ: x=91 (เยื้องจากเนื้อหา 4px) 26px น้ำหนัก 500 สี rgb(231,6,22) */
.arttitle {
    font-size: 26px; font-weight: 500; line-height: 28.6px;
    color: #e70616; margin: 40px 4px 10px;   /* ต้องเป็น margin ไม่ใช่ padding กล่องถึงจะเยื้อง */
}

/* แถวใต้หัวข้อ: วันที่เผยแพร่ชิดซ้าย ปุ่ม Share ชิดขวา
   บางหน้าไม่มีวันที่ ปุ่มก็ยังอยู่ขวาเหมือนเดิมเพราะใช้ space-between */
/* ของเดิมมีเส้นคั่นใต้หัวข้อ+แถวแชร์ (.page-header)
   1px solid rgb(119,119,119) เว้นใต้เส้น 9px แล้วเว้นถึงเนื้อหา 30px */
.artmeta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 4px 30px; padding-bottom: 9px;
    border-bottom: 1px solid #777;
}
/* ในแถวนี้แถวไอคอนแชร์ไม่ต้องเว้นบน-ล่างอีก และชิดขวาแทนกึ่งกลาง */
.artmeta .sharerow { margin: 0; justify-content: flex-end; }
.posted { font-size: 12px; line-height: 14px; color: #666; }
.share { text-align: right; }
.share-btn {
    background: none; border: 0; padding: 5px 0;
    font: inherit; font-size: 14px; line-height: 20px; color: var(--ink);
    cursor: pointer;
}
.share-btn:hover, .share-btn:focus { color: var(--red-dark); text-decoration: underline; }
/* เมนูแชร์ (ใช้เฉพาะเบราว์เซอร์ที่ไม่รองรับเมนูแชร์ของระบบ) */
.share-menu { position: relative; display: inline-block; }
.share-list {
    position: absolute; right: 0; top: 100%; z-index: 50;
    list-style: none; margin: 4px 0 0; padding: 6px 0; min-width: 180px;
    background: #fff; border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 6px 12px rgba(0,0,0,.175); text-align: left;
}
.share-list a, .share-list button {
    display: block; width: 100%; text-align: left;
    padding: 8px 16px; font: inherit; font-size: 15px; color: var(--ink);
    background: none; border: 0; cursor: pointer;
}
.share-list a:hover, .share-list button:hover { background: #f6f6f6; color: var(--red-dark); }

/* รูปประกอบบทความ จัดกึ่งกลาง ของเดิมมีกรอบขาวขอบเทาแบบ img-thumbnail */
.artfig { text-align: center; margin: 41px 0 0; }
.artfig img {
    max-width: 100%; height: auto;
    padding: 4px; border: 1px solid #ddd; border-radius: 4px; background: #fff;
}

/* เนื้อความบทความ
   ของเดิมกำหนดขนาดตัวอักษรเป็น em อิงฐาน 14px (1.286em = 18px, 1.571em = 22px)
   จึงต้องตั้งฐานเป็น 14px ตรงนี้ ขนาดที่ฝังมากับเนื้อหาเดิมถึงจะออกมาตรงเป๊ะ */
.artbody { font-size: 14px; line-height: 1.42857; padding: 0 20px; margin-top: 14px; }
.artbody p { margin: 0 0 10px; }
.artbody img { max-width: 100%; height: auto; }
.artbody a { color: var(--red-dark); text-decoration: underline; }
.artbody + .sectionbar { margin-top: 48px; }

/* บทความแนะนำท้ายหน้า: 2 คอลัมน์กว้างคอลัมน์ละ 560 (x=81 และ x=641)
   ในแต่ละชิ้น: รูปย่อ 183x117 เว้น 23 แล้วข้อความกว้าง 324
   ระยะห่างระหว่างแถว 112px ซึ่ง "น้อยกว่า" ความสูงรูปย่อ จึงใช้ min-height ไม่ใช่ row-gap */
.relart { display: grid; grid-template-columns: 560px 1fr; column-gap: 0; row-gap: 0; grid-auto-rows: 112px; margin: 16px -6px 0; }
.relart-item { display: grid; grid-template-columns: 183px 324px; column-gap: 23px; align-items: start; align-content: start; }
.relart-img {
    display: block; height: 117px;
    background-size: cover; background-position: 50% 25%; background-repeat: no-repeat;
}
.relart-text { display: block; }
.relart-title {
    display: block; font-size: 18px; font-weight: 700; line-height: 27px; color: var(--ink);
}
.relart-excerpt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 16px; line-height: 24px; color: var(--ink); text-align: justify; margin-top: 4px;
}
.relart-item:hover .relart-title { color: var(--red-dark); text-decoration: underline; }

/* บทความบางหน้า (kn08-kn10, kn13, kn14) ท้ายหน้าเป็นคนละแบบ:
   หัวข้อเป็นตัวอักษรเทาเล็กแทนแถบแดง และรูปย่อเล็กกว่าเล็กน้อย
   ของเดิม: หัวข้อ x=103 15.75px น้ำหนัก 500 / รูปย่อ 180x115 x=92 / ข้อความ x=294 */
/* หัวข้อแบบป้ายสีแดง: ตัวป้ายคลุมเฉพาะข้อความ แล้วลากเส้นแดงยาวไปสุดขอบ
   ของเดิมเป็นตัวหนังสือเทาเปล่าๆ ไม่มีแถบสี กลืนไปกับเนื้อหา */
.relart-head {
    font-size: 20px; font-weight: 700; line-height: 28px;
    margin: 60px 0 18px; padding: 0;
    border-bottom: 2px solid var(--red);
}
.relart-head span {
    display: inline-block; background: var(--red); color: #fff;
    padding: 7px 20px; border-radius: 4px 4px 0 0;
}
.relart-alt { grid-template-columns: 549px 1fr; margin: 0 0 0 5px; }
.relart-alt .relart-item { grid-template-columns: 180px 324px; column-gap: 22px; }
.relart-alt .relart-img { height: 115px; }

/* ==========================================================================
   หน้าสินค้า (prd-*)
   เนื้อหาต่างกันทุกหน้า จึงยกบล็อกของเดิมมาทั้งก้อนพร้อม inline style
   ขนาดตัวอักษรของเดิมเขียนเป็น em อิงฐาน 14px ที่นี่จึงห้ามตั้ง font-size ทับ
   ========================================================================== */
.prd-text, .prd-green, .prd-red, .prd-note { font-size: 14px; line-height: 1.42857; }
/* ห้ามให้กฎ .content li ไปตั้งขนาด 16px ทับ ไม่งั้น em ในเนื้อหาจะคูณผิดเป็น 18.3px */
/* กล่องเนื้อหาที่ยกมาจาก iTopPlus ตั้งฐานตัวอักษรไว้ 14px
   แล้วข้างในใช้ span ขนาดเป็น em เช่น 1.143em = 16px
   ถ้าปล่อยให้ .content li ตั้ง font-size ทับ ฐาน em จะเพี้ยน
   ผลคือ bullet กลายเป็น 1.143 x 17 = 19.4px ทั้งที่ย่อหน้าข้างๆ เป็น 16px
   จึงต้องบังคับให้ li ในกล่องพวกนี้สืบทอดขนาดจากกล่อง ไม่ใช่จาก .content li
   *** .artbody ตกหล่นมาตั้งแต่แรก หน้าบทความกับรีวิวเลยขนาดไม่ตรงกัน *** */
.prd-text li, .prd-green li, .prd-red li, .prd-note li,
.artbody li, .rvbody li { font-size: inherit; line-height: inherit; }
/* หน้าสินค้าของเดิมแบ่งคอลัมน์เป็นสัดส่วน 1:2 ไม่ใช่ครึ่งต่อครึ่งแบบ prd-shake
   (รูปกว้าง 291 ที่ x=117 / ข้อความกว้าง 735 ที่ x=450)
   ต้องเขียน .cols.cols-prd ให้เจาะจงกว่า .cols .col-img img ที่ประกาศไว้ทีหลัง */
.cols.cols-prd { grid-template-columns: 4fr 8fr; column-gap: 0; }
.cols.cols-4-8 { grid-template-columns: 4fr 8fr; }
.cols.cols-5-7 { grid-template-columns: 5fr 7fr; }
.cols.cols-6-6 { grid-template-columns: 6fr 6fr; }
/* ความกว้างรูปกำหนดเป็น max-width ติดมากับแท็ก (ดูตาราง IMG_W ในตัวสร้างหน้า)
   ที่นี่จึงให้รูปกางเต็มคอลัมน์แล้วปล่อยให้ max-width เป็นตัวคุม
   บนจอเล็กที่คอลัมน์แคบกว่าค่านั้น รูปจะย่อตามเองโดยไม่ล้นกรอบ */
.cols.cols-prd .col-img { padding: 0; text-align: center; }
.cols.cols-prd .col-img img { width: 100%; max-width: 100%; height: auto; }
.prd-text p, .prd-green p, .prd-red p, .prd-note p { margin: 0 0 10px; }
.prd-text ul, .prd-green ul, .prd-red ul { margin: 0 0 10px; padding-left: 40px; }
.prd-text img, .prd-green img { max-width: 100%; height: auto; }

.prd-green { margin: 0 0 6px; }
.prd-red   { margin: 24px 0 6px; }
.prd-note  { margin: 12px 0; }

/* หัวข้อชวนแอดไลน์ ท้ายหน้ารายละเอียดโปรโมชั่น
   เว็บจริงใช้ <h1> จัดกลาง 24.5px น้ำหนัก 500 สีแดง
   ตอนเขียน v2 ใหม่แปลงเหลือ <span> ธรรมดา จึงกลายเป็น 14px ชิดซ้าย
   ที่นี่ใช้ <h2> ไม่ใช่ <h1> เพราะหน้ามี <h1 class="pagetitle"> อยู่แล้ว
   มี h1 สองอันในหน้าเดียวไม่ดีต่อ SEO และโปรแกรมอ่านหน้าจอ */
.promo-head {
    margin: 0 0 16px;
    color: #ff0000;
    font-size: 24.5px;
    font-weight: 500;
    line-height: 27px;
    text-align: center;
}
@media (max-width: 767px) {
    .promo-head { font-size: 21px; line-height: 24px; }
}
.prd-text  { margin: 0 0 10px; }

/* ---------- กล่องคำเตือนตามกฎ อย. -------------------------------------
   แบบเดิมเป็นตัวเล็กสีแดงกึ่งกลาง 4 บรรทัดติดกัน อ่านยากและดูรก
   เพราะสีแดงในเว็บนี้ใช้กับคำกำกับสั้นบรรทัดเดียวอยู่แล้ว
   พอเอามาใช้กับข้อความยาว 4 ข้อ เลยกลายเป็นพืดแดง

   แบบนี้แยกออกมาเป็นกล่อง มีแถบแดงบางด้านซ้ายบอกว่าเป็นคำเตือน
   ตัวข้อความชิดซ้ายสีเทาเข้ม อ่านง่ายกว่าและไม่แย่งสายตาจากเนื้อหาสินค้า */
.fda-note {
    margin: 26px 0 12px;
    padding: 15px 20px 16px;
    background: #faf8f8;
    border: 1px solid #ece1e2;
    border-left: 3px solid var(--red);
    text-align: left;
}
/* ขนาดตัวอักษรในกล่อง = 82% ของเนื้อหา (14px จาก 17px)
   เล็กกว่าเนื้อหาพอให้รู้ว่าเป็นข้อมูลรอง แต่ไม่เล็กจนต้องเพ่ง
   คำเตือน อย. เป็นข้อความที่กฎหมายกำหนดให้ผู้บริโภคต้องอ่านได้ */
.fda-note > b {
    display: block; margin: 0 0 8px;
    font-size: 15px; font-weight: 700; color: var(--red-dark);
}
.fda-note ol { margin: 0; padding-left: 19px; list-style: decimal; }
.fda-note li {
    font-size: 14px; line-height: 1.72; color: #6d6d6d;
    margin: 0 0 3px; text-align: left;
}
.fda-note li:last-child { margin-bottom: 0; }

/* ปุ่มในหน้าสินค้า: "รายละเอียดเพิ่มเติม" อยู่ในคอลัมน์ขวา
   ส่วน "สั่งซื้อสินค้า" อยู่กึ่งกลางเต็มความกว้าง */
.col-text .btn-narrow { margin-top: 18px; }

/* ---------- หน้ารีวิว ---------------------------------------------------
   วัดจาก rv01 ของเดิมที่จอ 1286px:
     เนื้อความ x=107 ตัวอักษร 16px สูงบรรทัด 20px
     แกลเลอรีรูป 3 คอลัมน์ รูปกว้าง 345 ช่องว่าง 9.5px เริ่มที่ x=112
     การ์ดรีวิวท้ายหน้า 351x430 พื้น #313131 รูปในการ์ด 151px */
/* ห้ามตั้ง font-size ที่นี่ ต้องปล่อยให้เป็น 14px ตาม .artbody
   เพราะขนาดตัวอักษรในเนื้อหาเดิมเขียนเป็น em อิงฐาน 14px
   (1.143em = 16px) ถ้าตั้งฐานเป็น 16 จะกลายเป็น 18.3px ทั้งหน้า */
.rvbody p { margin: 0 0 10px; }

/* คำพูดปิดท้ายเรื่องรีวิว
   ไม่ใช้แถบสีด้านซ้ายแบบกล่องคำเตือน จะได้ไม่ซ้ำลายกัน
   ใช้เครื่องหมายคำพูดตัวใหญ่จางๆ เป็นตัวนำสายตาแทน */
.rvbody .rvquote {
    margin: 30px auto 18px;
    max-width: 90%;
    padding: 0;
    border: 0;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--red-dark);
    text-align: center;
}
/* เครื่องหมายคำพูดวางไหลไปกับข้อความทั้งคู่ ไม่ลอยยึดขอบ
   ถ้ายึดขอบซ้ายแบบเดิม พอจัดกึ่งกลางแล้วมันจะค้างอยู่คนละที่กับข้อความ
   ขนาดต้องเท่ากันเป๊ะทั้งสองตัว */
.rvbody .rvquote::before,
.rvbody .rvquote::after {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    line-height: 0;
    vertical-align: -0.34em;
    color: rgba(212, 5, 19, .22);
}
.rvbody .rvquote::before {
    content: "\201C";
    margin-right: 5px;
}
/* line-height:0 กับ vertical-align กันไม่ให้ตัวใหญ่ไปดันความสูงบรรทัด */
.rvbody .rvquote::after {
    content: "\201D";
    margin-left: 5px;
}
.rvbody + .sectionbar, .rvgallery + .sectionbar { margin-top: 64px; }

/* แกลเลอรีรูป 3 คอลัมน์ ของเดิมรูปกว้าง 345 ช่องว่าง 9.5px เริ่ม x=112
   (1098 - 25 - 19 - 9.5*2) / 3 = 345 พอดี */
.rvgallery {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 9.5px;
    margin: 75px 0 0; padding: 0 19px 0 25px;
}
/* จำนวนคอลัมน์ต่างกันไปตามหน้า อ่านมาจากของเดิม
   (col-md-4 = 3 ช่อง, col-md-3 = 4 ช่อง, col-md-6 = 2 ช่อง) */
.rvgallery-2 { grid-template-columns: repeat(2, 1fr); }
.rvgallery-4 { grid-template-columns: repeat(4, 1fr); }

/* แกลเลอรีจากบล็อกแยก (contenemanager-gallery) ของเดิมชิดข้อความมากกว่า
   และเว้นช่องระหว่างรูปกว้างกว่าแบบที่ฝังในข้อความ */
.rvgallery-2:not(.rvgallery-fx),
.rvgallery-3:not(.rvgallery-fx),
.rvgallery-4:not(.rvgallery-fx) { margin-top: 55px; gap: 52px; padding: 0 33px; }

/* แบบที่ฝังในข้อความ 4 ช่อง: รูปกว้าง 256 ช่องว่าง 10 เริ่ม x=112 */
.rvgallery-fx.rvgallery-4 { gap: 10px; }
.rvgallery a { display: block; overflow: hidden; background: #fff; }
.rvgallery img, .rvgallery img[width][height] {
    width: 100%; height: auto; display: block; transition: transform .35s;
}
.rvgallery a:hover img, .rvgallery a:focus-visible img { transform: scale3d(.95, .95, 1); }

/* การ์ดรีวิวท้ายหน้า 3 ใบ */
/* การ์ด 351 กว้าง ช่องว่าง 12 เริ่มที่ x=97 => เว้นขอบซ้าย 10 ขวา 11 */
.rvcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 0; padding: 0 11px 0 10px; }
.rvcard-sm {
    background: #313131; color: #fff; text-align: center;
    padding: 35px 15px 0; height: 430px; overflow: hidden;
}
.rvcard-sm img, .rvcard-sm img[width][height] {
    display: block; width: 151px; height: auto; margin: 0 auto;
}
.rvcard-sm p { margin: 0; color: #fff; }
.rvcard-sm strong { font-size: 20px; line-height: 28.58px; }
.rvcard-sm a { color: #f00012; }
.rvcard-sm a:hover, .rvcard-sm a:focus { text-decoration: underline; }
/* ของเดิมใส่ระบบคอลัมน์ของ Bootstrap ครอบรูปในการ์ดไว้ ซึ่งเราไม่ได้ใช้แล้ว
   ปิดผลของมันทิ้ง ไม่งั้นรูปจะกว้างผิดและเบียดออกนอกการ์ด */
.rvcard-sm .row, .rvcard-sm .row-col { display: block; }

/* บล็อกเพิ่มเพื่อนไลน์ท้ายหน้า (มีเฉพาะบางบทความ)
   แทนที่ฟอร์มกรอกอีเมลของเดิมซึ่งผูกกับ AngularJS ที่ถูกถอดออกไปแล้ว
   กดแล้วไม่เกิดอะไร อีเมลที่ลูกค้ากรอกหายไปเฉยๆ
   ของใหม่ลิงก์ตรงไปไลน์ ใช้งานได้จริงโดยไม่ต้องมีระบบหลังบ้าน */
.subscribe {
    display: flex; align-items: center; justify-content: center; gap: 30px;
    background: #f2fbf5; border: 1px solid #cdeed8; border-radius: 10px;
    padding: 24px 26px; margin: 40px 0 0;
}
.subscribe-text { max-width: 340px; }
.content p.subscribe-title {
    font-size: 18px; font-weight: 700; color: #0a7c3a; line-height: 25.72px; margin: 0 0 4px;
}
.content p.subscribe-sub { font-size: 14px; line-height: 20px; color: #666; margin: 0 0 16px; }

.line-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: #06c755; color: #fff; font-size: 17px; font-weight: 600;
    padding: 11px 26px; border-radius: 6px;
    box-shadow: 0 2px 8px rgba(6,199,85,.35);
    transition: background-color .2s, transform .2s;
}
.line-btn:hover, .line-btn:focus { background: #05a948; color: #fff; transform: translateY(-1px); }
/* ไอคอนไลน์เป็น SVG ฝังในหน้า ไม่ใช่ไฟล์รูป จะได้ไม่เพิ่ม request และคมทุกความละเอียด */
.line-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }

.subscribe-qr img, .subscribe-qr img[width][height] {
    display: block; width: 132px; height: 132px;
    border: 1px solid var(--line); border-radius: 6px; padding: 6px; background: #fff;
}
.content p.subscribe-qrcap { font-size: 12px; line-height: 16px; color: #888; text-align: center; margin: 6px 0 0; }

/* ==========================================================================
   หน้ารายการ (knowledge / review / promotion)
   วัดจาก knowledge.html ของเดิม: รูปย่อ 316x202 ที่ x=115
   หัวข้อ 18px/700 สี #666 ที่ x=474  เกริ่น 16px/400  ระยะห่างแถว 238
   ========================================================================== */
/* row-gap ลดจาก 36 เป็น 20 เพราะเพิ่ม padding-bottom 18 ให้เส้นคั่นแล้ว
   ถ้าไม่ลด หน้าสาระน่ารู้จะยาวเกินของเดิม 192px */
.listcards { display: grid; grid-template-columns: 1fr; row-gap: 20px; margin: 40px 0 0; }
/* ของเดิมมีเส้นคั่นใต้ทุกรายการ สีชมพูอ่อน rgb(242,145,152) หนา 1px
   (ในไฟล์เดิมเป็น <p class="clearfix"> ที่ตั้ง border-bottom ไว้) */
.listcard {
    display: grid; grid-template-columns: 316px 1fr; column-gap: 43px;
    align-items: start; padding-left: 28px;
    padding-bottom: 18px; border-bottom: 1px solid rgb(242, 145, 152);
}
.listcard-img {
    display: block; height: 202px;
    background-size: cover; background-position: 50% 25%; background-repeat: no-repeat;
}
.listcard-text { display: block; }
.listcard-title { display: block; font-size: 18px; font-weight: 700; line-height: 24px; color: #666; }
.listcard-excerpt {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 16px; line-height: 24px; color: #666; margin-top: 6px; text-align: justify;
}
.listcard:hover .listcard-title { color: var(--red-dark); text-decoration: underline; }

/* ==========================================================================
   ปุ่มติดต่อลอยมุมขวาล่าง (สร้างด้วย JS จึงไม่มีใน HTML)
   ของเดิมวางไว้ห่างขอบขวา 30px ขอบล่าง 15px ขนาดราว 52x57
   ========================================================================== */
.fab { position: fixed; right: 24px; bottom: 20px; z-index: 900; text-align: right; }
/* พื้นปุ่มต้องเป็นสีขาว ไม่ใช่สีแดง
   ขอบซ้าย-ขวาของหน้าเป็นพื้นแดง ถ้าปุ่มแดงด้วยจะกลืนหายไปเลยมองไม่เห็น
   ขาว + ขอบแดง + เงาเข้ม เด่นทั้งบนพื้นแดงและบนพื้นขาว */
.fab-btn {
    width: 60px; height: 60px; border-radius: 50%;
    background: #fff; color: var(--red);
    border: 3px solid var(--red); cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    margin-left: auto;
    transition: background-color .2s, color .2s, transform .2s;
}
.fab-btn:hover, .fab-btn:focus-visible {
    background: var(--red); color: #fff; transform: translateY(-2px);
}
.fab-btn svg { width: 30px; height: 30px; }
.fab.open .fab-btn { background: var(--red); color: #fff; border-color: #fff; }

.fab-list { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
/* display:flex มีน้ำหนักมากกว่าค่า display:none ที่มากับ attribute hidden
   ถ้าไม่เขียนบรรทัดนี้ รายการช่องทางติดต่อจะกางค้างไว้ตลอดเวลา */
.fab-list[hidden] { display: none; }
.fab-item {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px 9px 12px; border-radius: 26px;
    background: #fff; color: var(--ink); font-size: 15px; font-weight: 600;
    box-shadow: 0 3px 12px rgba(0,0,0,.2); white-space: nowrap;
}
.fab-item:hover, .fab-item:focus-visible { color: var(--ink); transform: translateY(-1px); }
.fab-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; color: #fff; flex: 0 0 auto;
}
.fab-ico svg { width: 18px; height: 18px; }
.fab-line .fab-ico { background: #06c755; }   /* เขียวไลน์ */
.fab-tel  .fab-ico { background: var(--red); }

@media (max-width: 767px) {
    .fab { right: 14px; bottom: 14px; }
    .fab-item { font-size: 14px; padding: 8px 14px 8px 10px; }
}

/* ---------- หน้าโปรโมชั่น (เทมเพลตบล็อก 2 คอลัมน์) ----------------------
   ค่าสีและระยะทั้งหมดวัดจากหน้าเดิม:
     แถบหัวข้อส้ม  ไล่สีจาก rgb(245,130,32)  ตัวอักษรขาว 30px หนา 700
     แถบชื่อชุดฟ้า rgb(51,167,230)  h4 ขาว 20.25px หนา 700
     กล่องข้างขวา  พื้น #eee  เส้นขอบ 1px solid rgb(142,141,141)  ตัวอักษร #888
     ปุ่มแดง       rgb(212,5,19)  ขาว 18px  กว้าง 266 */
.promo { margin-top: 56px; }   /* ของเดิมเว้นจากแบนเนอร์ถึงแถบส้ม 62px */
/* ระยะเว้นวัดจากของเดิม: กล่องซ้ายกว้าง 690 เริ่มที่ x=119 (คอลัมน์เริ่ม 97) */
.promobox { border-left: 5px solid var(--red); padding: 0 10px 0 22px; }
/* การ์ดครอบชุดสินค้าแต่ละชุด ของเดิมพื้นขาว เว้นใน 5px ห่างใบถัดไป 10px
   กรอบของการ์ดเป็น "เงา" ไม่ใช่เส้นขอบ (box-shadow 0 0 5px ดำจาง 20%) มุมมน 3px */
.promo-card {
    background: #fff; padding: 5px; margin: 0 0 10px;
    border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.promo-card::after { content: ""; display: table; clear: both; }
/* ในการ์ด: คอลัมน์รูปไม่เว้นขอบ คอลัมน์ข้อความเว้น 23 ซ้าย 20 ขวา (ตามของเดิม)
   ใช้ตัวเลือกแบบลูกหลาน ไม่ใช่ลูกโดยตรง เพราะโครงของเดิมมี <a> คั่นกลางอยู่ */
.promo-card .c-md-5 { padding: 0; }
.promo-card .c-md-7 { padding: 0 20px 0 23px; }
.promo-card .media-body { padding-left: 10px; }
/* แถบส้มของเดิมเว้นจากขอบกล่องข้างละ 20px (รูปด้านล่างชิดขอบกว่าแถบ) */
.promobox-head {
    background: linear-gradient(rgb(245, 130, 32), rgb(233, 112, 15));
    color: #fff; font-size: 30px; font-weight: 700; line-height: 33px;
    margin: 0 20px; padding: 11px 20px 0;
}
/* หน้าโปรโมชั่นของเดิมไม่มีแถบแดงชื่อหน้า (h1 ของเดิมซ่อนไว้)
   จึงซ่อนแบบเดียวกัน ยังอ่านได้ด้วยโปรแกรมอ่านหน้าจอและ Google */
.pagetitle-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* เนื้อหาในกล่องนี้ของเดิมใช้ฐาน 18px (ไม่ใช่ 14px แบบส่วนอื่นของเว็บ)
   ส่วนย่อหน้า <p> เล็กลงเป็น 16px  ถ้าไม่ตั้งไว้ทุกอย่างจะเหลือ 14px หมด */
.promobox-body { font-size: 18px; line-height: 1.42857; }
.promobox-body p, .promobox-body li { font-size: 16px; }
.promo-title { background: rgb(51, 167, 230); padding: 0 20px 0 23px; margin: 0 0 10px; float: none; width: auto; }
.promo-title h4 { color: #fff; font-size: 20.25px; font-weight: 700; margin: 0; padding: 8px 0; }
.promo-title a { color: #fff; }
.promobox-body img { max-width: 100%; height: auto; }
.promobox-body::after { content: ""; display: table; clear: both; }
/* ข้อความในบล็อกนี้ของเดิมลอยซ้าย (float) ปุ่มจึงต้องเคลียร์ก่อน
   ไม่งั้นปุ่มจะขึ้นไปทับข้อความ */
.btn-promo {
    clear: both; display: block; max-width: 266px; margin: 10px auto 0;
    background: rgb(212, 5, 19); color: #fff; font-size: 18px;
    text-align: center; padding: 10px 0 7px; cursor: pointer;
}
.btn-promo:hover { background: var(--red-hover); }
.promo-side { color: #888; }
.promo-side img { max-width: 100%; height: auto; }
.promo-side h3 { font-size: 21px; font-weight: 500; line-height: 1.1; margin: 0 0 10px; }
/* กล่อง "เพิ่มเพื่อนไลน์" ในแถบข้าง ของเดิมเป็นแผงมีขอบเทาอ่อน มุมมน 4px */
.sidethumb {
    background: #fff; border: 1px solid #ddd; border-radius: 4px;
    padding: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}
.sidebox {
    background: #eee; border: 1px solid rgb(142, 141, 141); border-radius: 5px;
    padding: 10px; margin-top: 14px;
}
/* หัวกล่องของเดิมเป็น <h1> ซ้อนอยู่ข้างใน ต้องคุมตัวในด้วยไม่งั้นได้ 21px ตามค่าปริยาย */
.sidebox-head, .sidebox-head * { font-size: 18px; font-weight: 700; }
.sidebox-head { color: #888; padding: 11px 20px; margin: 0; }
/* ---------- ปุ่มแชร์ (ไอคอนสีตามแบรนด์ เห็นแล้วรู้เลยว่าแชร์ไปไหน) --------
   ของเดิมเป็น widget ของ AngularJS ที่ถูกถอดออกไปแล้ว กดไม่ติด
   ของใหม่เป็นลิงก์ธรรมดา ไม่ต้องใช้ JavaScript เลย จึงไม่กระทบ TBT */
.sharerow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 15px 0; }
.sharerow-label { font-size: 13px; color: #888; }
/* flex-shrink: 0 จำเป็น ไม่งั้นวงกลมจะโดนบีบแบนเมื่อคอลัมน์แคบ */
.sharebtn {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; transition: transform .15s, box-shadow .15s;
}
.sharebtn svg { width: 16px; height: 16px; fill: currentColor; }
.sharebtn:hover, .sharebtn:focus-visible {
    transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.sharebtn-fb   { background: #1877f2; }
.sharebtn-x    { background: #000; }
.sharebtn-line { background: #06c755; }

/* ---------- footer ------------------------------------------------------
   ของเดิม: พื้น rgb(38,38,38) เต็มความกว้างจอ ตัวอักษร 14px สี rgb(111,111,111) */
.footer { background: #262626; color: #6f6f6f; text-align: center; padding: 21px 0; font-size: 14px; line-height: 20px; }

/* ---------- lightbox (แทน fancybox) ------------------------------------- */
.lb { position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 9999; display: none; }
.lb.on { display: flex; align-items: center; justify-content: center; }
.lb img { max-width: 92vw; max-height: 88vh; background: #fff; padding: 6px; }
.lb-close {
    position: absolute; top: 18px; right: 18px;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--red); color: #fff; border: 2px solid #fff;
    font: 700 24px/1 Arial, sans-serif; cursor: pointer;
}
.lb-close:hover { background: #262626; }

/* ---------- จอเล็ก ------------------------------------------------------ */
@media (max-width: 991px) {

    /* หัวเว็บ - ทำตามของเดิมเป๊ะ
       ของเดิมที่จอ 412px: "ซ่อนเบอร์โทรกับ Line ทิ้งทั้งหมด"
       เหลือแค่โลโก้จัดกึ่งกลาง แถบหัวสูง 157px โลโก้กว้าง 255px
       ช่องทางติดต่อย้ายไปเป็นไอคอนในแถบเมนูด้านล่างแทน
       ถ้าไม่ซ่อน ตัวเลขเบอร์โทร 22px จะตัดบรรทัดกลางคัน หน้าตาแตก */
    .header .contact  { display: none; }
    /* โลโก้ชิดขอบล่างของแถบ ไม่ใช่กึ่งกลาง (ของเดิม: แถบ 157 โลโก้สูง 107 เว้นบน 50 ล่าง 0) */
    .header .wrap     { justify-content: center; align-items: flex-end; min-height: 152px; }
    .header .logo img { width: 242px; }

    /* กล่องขาวบนมือถือไม่ชนขอบจอ ของเดิมปล่อยพื้นแดงของ body โผล่ข้างละ 15px
       (วัดจากเว็บเดิมที่จอ 412: กล่องขาว x=15 กว้าง 363)
       ระยะในทุกตัวด้านล่างจึงต้องหักออก 15 เพื่อให้เนื้อหาอยู่ที่เดิมเป๊ะ */
    .sheet { margin-left: 15px; margin-right: 15px; }

    /* แบนเนอร์บนมือถือเว้นขอบข้างละ 25px และห่างจากแถบเมนู 9px (ของเดิม x=25 w=362)
       25 - 15 (ระยะที่กล่องขาวขยับเข้ามา) = 10 */
    .banner      { padding-top: 9px; }
    .banner .wrap { padding: 0 10px; max-width: none; }

    /* แถบเมนู: ของเดิมเรียง ไอคอน -> ปุ่ม MENU ชิดขวา
       (ไม่ใช่ MENU ซ้าย ไอคอนขวา แบบที่เคยทำไว้) */
    .nav-inner { justify-content: flex-end; gap: 17px; }
    .burger { display: inline-flex; order: 2; }
    .icons  { display: inline-flex; order: 1; }

    .menu { display: none; width: 100%; order: 3; }
    .nav.open .menu { display: block; }
    .menu > li > a, .menu > li > button { width: 100%; text-align: left; }
    .submenu { position: static; border: 0; box-shadow: none; min-width: 0; padding-left: 12px; }
    /* จอเล็กกางออกด้านข้างไม่ได้ ไม่มีที่พอ ให้กางลงมาแบบพับ-คลี่แทน */
    .submenu2 { position: static; border: 0; box-shadow: none; min-width: 0; padding-left: 12px; }
    .caret-r { float: none; margin: 0 0 0 6px; transform: rotate(90deg); }
    .submenu .grp.open > button > .caret-r { transform: rotate(90deg) translateX(2px); }

    /* 2 คอลัมน์กลายเป็นเรียงลงมา รูปอยู่บน ข้อความอยู่ล่าง */
    .cols { grid-template-columns: 1fr; gap: 10px; }
    .flavors { grid-template-columns: repeat(3, 1fr); }

    /* ---- หน้าแรกบนจอเล็ก (วัดจากเว็บเดิมที่จอ 412px) ------------------
       เนื้อหาเริ่มที่ x=36 ในจอ 412  ตอนนี้กล่องขาวขยับเข้ามา 15 แล้ว
       ระยะในจึงเหลือ 36 - 15 = 21 เนื้อหาจะยังอยู่ที่ x=36 เท่าเดิม */
    .content { padding-left: 21px; padding-right: 21px; }

    /* บล็อกแนะนำบริษัท: เรียงลงมา รูปกว้าง 315 กึ่งกลาง
       ปิด <br> ทิ้งบนจอเล็ก ให้ข้อความไหลเองตามความกว้าง
       ถ้าปล่อยไว้ แต่ละบรรทัดที่บังคับไว้จะตัดเป็น 2 บรรทัด บล็อกสูงเกินไป 72px */
    .about { grid-template-columns: 1fr; margin: 40px 0 0; }
    .about-img img { width: 315px; }
    .about-text br { display: none; }
    /* บนจอเล็กข้อความไหลเองแล้วสูงกว่าของเดิม 9px หักคืนที่ระยะเหนือปุ่ม */
    .btn-more { margin-top: 11px; }

    /* กริดสินค้า: 3 คอลัมน์ รูปกว้าง 100  (340 - 20*2) / 3 = 100 พอดี */
    .pgrid { grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 24px; }
    .pcard .btn { width: 100%; }
    .pgrid + .sectionbar { margin-top: 91px; }   /* จอเล็กเว้นมากกว่าจอใหญ่ */

    /* รีวิว: เรียงลงมาทีละใบ กว้างเต็ม 340 รูปในการ์ด 197 */
    .reviews { grid-template-columns: 1fr; gap: 22px; }
    .rvcard > img { width: 197px; }

    /* จอกลาง (แท็บเล็ต) คอลัมน์ยุบเป็นเต็มความกว้างแล้ว
       ถ้าปล่อยให้ปุ่มเป็น 1 ใน 3 ของทั้งหน้า จะกลายเป็นปุ่มยักษ์ผิดสัดส่วน */
    /* เขียน padding ใหม่ต้องใส่ค่าบน-ล่างเดิมด้วยเสมอ ไม่งั้นปุ่มแบนเหลือ 20px */
    .btn-narrow { width: auto; max-width: 300px; padding: 10px 20px 7px; }


    /* สาระน่ารู้: รูปอยู่บน ข้อความอยู่ล่าง รูปสูง 190 */
    /* ---- หน้าบทความบนจอเล็ก ----
       ของเดิมที่จอ 412px: บทความแนะนำเรียงลงมาทีละชิ้น
       รูปย่อ 110x70 อยู่บน (x=41) ข้อความอยู่ล่างเยื้อง 23px */
    .relart { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 28px; margin: 12px 0 0 5px; }
    .relart-alt { grid-template-columns: 1fr; margin: 12px 0 0 5px; }
    .relart-item, .relart-alt .relart-item { grid-template-columns: 1fr; column-gap: 0; }
    .relart-img, .relart-alt .relart-img { width: 110px; height: 70px; }
    .relart-text { padding-left: 23px; margin-top: 4px; }
    .relart-head { margin-left: 13px; }
    /* ของเดิมบนมือถือยังเว้นขอบเนื้อความ 20px เท่าจอใหญ่ (ข้อความอยู่ที่ x=56 กว้าง 302)
       ถ้าเอาออก ข้อความจะกว้างขึ้น บรรทัดน้อยลง แล้วทุกอย่างใต้ลงไปเลื่อนหมด */
    .artfig { margin-top: 30px; padding: 0 20px; }

    /* หน้ารายการบนจอเล็ก: รูปย่ออยู่บน ข้อความอยู่ล่าง
       ของเดิมจัดเนื้อหาการ์ด (รูป+หัวข้อ+เกริ่น) ไว้กึ่งกลาง กว้าง 268
       ส่วนเส้นคั่นด้านล่างกินเต็มความกว้างเนื้อหา (วัดที่จอ 412: เนื้อหา x=64 w=268 / เส้น x=41 w=311) */
    .listcard { grid-template-columns: 1fr; column-gap: 0; row-gap: 10px; padding-left: 0;
                justify-items: center; }
    .listcard-text { width: 268px; max-width: 100%; }
    .listcard-img { height: 190px; }
    /* หน้าสินค้าบนจอเล็ก: รูปกับข้อความเรียงลงมา */
    .cols.cols-prd { grid-template-columns: 1fr; }
    .cols.cols-prd .col-img { padding: 0; }

    .articles { margin-left: -21px; margin-right: -21px; padding-bottom: 100px; }
    .art { grid-template-columns: 1fr; padding-bottom: 0; margin-bottom: 64px; }
    .art-img { height: 190px; }
    .art-text { padding: 18px 23px 0; }
    .footer { padding: 22px 0; }
}

@media (max-width: 767px) {
    /* ไม่ย่อหัวเว็บลงอีกในช่วงนี้ ของเดิมที่จอ 412px ยังเป็น 157px / โลโก้ 255px */
    .pagetitle, .rel-head { font-size: 20px; line-height: 28px; }
    .rel-item { width: 150px; }
    .rel-img { height: 124px; padding: 10px; }
    .rel-img img, .rel-img img[width][height] { width: 120px; height: 100px; }
    /* ของเดิมที่จอ 412px เรียงรูปรสชาติทีละรูป (กว้าง 312) ไม่ใช่ 2 รูปต่อแถว */
    .flavors { grid-template-columns: 1fr; }
    .flavors img { width: 100%; max-width: 312px; margin: 0 auto; }
    /* บล็อกขนาดบรรจุ วางคู่กันไม่ไหวบนมือถือ ให้เรียงลงมาทีละอัน */
    .sizes { grid-template-columns: 1fr; gap: 34px; }
    /* กล่องคำเตือน: ลดขอบในลง จอแคบจะได้ไม่เหลือที่ให้ข้อความน้อยเกินไป */
    .fda-note { padding: 13px 15px 14px; }
    .fda-note ol { padding-left: 18px; }
    /* คำพูดปิดท้าย: ย่อลงตามจอ ไม่งั้นเครื่องหมายคำพูดกินที่ไปครึ่งบรรทัด */
    .rvbody .rvquote { font-size: 17px; max-width: 100%; }
    .rvbody .rvquote::before,
    .rvbody .rvquote::after { font-size: 36px; vertical-align: -0.3em; }
    /* หน้ารายการ: รูปย่อของเดิมกว้าง 268 สูง 172 วางกึ่งกลาง ไม่ใช่เต็มความกว้าง */
    .listcard-img { width: 268px; max-width: 100%; height: 172px; }
    .media { flex-direction: column; align-items: center; text-align: center; }
    .btn-narrow { width: auto; max-width: 240px; padding: 10px 20px 7px; }
    .btn-wide { margin-left: 0; margin-right: 0; }

    /* การ์ดรีวิวพื้นเทาเข้ม: ของเดิมเป็น col-xs-12 = เรียงลงมาทีละใบเมื่อจอ < 768
       (ช่วง 768-991 ยังเป็น 3 คอลัมน์ตาม col-sm-4 จึงไม่แตะ)
       ความสูงต้องปล่อยตามเนื้อหา ไม่ตรึง 430px ไม่งั้นข้อความล้นออกนอกการ์ด
       และรูปต้องขยายตามการ์ด ไม่ตรึง 151px ไม่งั้นเหลือ 22px */
    .rvcards { grid-template-columns: 1fr; padding: 0; }
    .rvcard-sm { height: auto; padding-bottom: 30px; }
    .rvcard-sm img, .rvcard-sm img[width][height] { width: 100%; max-width: 138px; }
    .rvcard-sm p { height: auto; }

    /* กริดรูปในหน้ารีวิว: ของเดิมที่จอ 412px เรียงทีละรูป (กว้าง 281)
       ถ้าคง 3-4 คอลัมน์ไว้ รูปจะเหลือ 87px เล็กจนดูไม่รู้เรื่อง */
    .rvgallery, .rvgallery-2, .rvgallery-3, .rvgallery-4,
    .rvgallery-2:not(.rvgallery-fx), .rvgallery-3:not(.rvgallery-fx),
    .rvgallery-4:not(.rvgallery-fx) {
        grid-template-columns: 1fr; gap: 14px; padding: 0;
    }
    .rvgallery img { width: 100%; max-width: 281px; margin: 0 auto; }

    /* ---- การ์ดเพิ่มเพื่อนไลน์บนจอเล็ก ----
       จอใหญ่วางข้อความซ้าย QR ขวา แต่บนมือถือความกว้างไม่พอ
       ข้อความจะถูกบีบจนหัวข้อตัดคำกลางคัน และปุ่มเล็กจนกดยาก
       จึงเรียงลงมาทีละชิ้นและจัดกึ่งกลาง
       ลำดับ: หัวข้อ -> คำอธิบาย -> ปุ่ม (กดแล้วเปิดแอปไลน์ทันที) -> QR
       เอาปุ่มไว้ก่อน QR เพราะบนมือถือกดปุ่มได้เลย ส่วน QR ต้องใช้เครื่องอื่นสแกน */
    .subscribe {
        flex-direction: column; gap: 18px; text-align: center;
        padding: 22px 18px;
    }
    .subscribe-text { max-width: none; width: 100%; }
    .content p.subscribe-sub { margin-bottom: 18px; }
    /* ปุ่มเต็มความกว้าง กดง่ายด้วยนิ้วโป้ง */
    .line-btn { display: flex; width: 100%; font-size: 16px; padding: 13px 18px; }
    .subscribe-qr { order: 2; }
    .subscribe-qr img, .subscribe-qr img[width][height] { width: 116px; height: 116px; margin: 0 auto; }

    /* ของเดิมที่จอ 412px ไม่ปล่อยรูปเต็มความกว้าง: รูปบทความ 248 รูปสินค้า 265 */
    .artfig img { max-width: 248px; }
    .cols.cols-prd .col-img img { max-width: 265px; }

    /* หน้าโปรโมชั่นบนจอเล็ก: การ์ดชุดสินค้าไม่ต้องเว้นขอบซ้าย-ขวาเพิ่ม */
    .promo-card .c-md-7, .promo-card .c-md-5 { padding: 0 5px; }
    .promobox { padding: 0 5px 0 10px; }
    .promobox-head { margin: 0; font-size: 22px; line-height: 26px; }
    .promo-side { margin-top: 24px; }
}


/* ==========================================================================
   สไตล์เฉพาะหน้าข้อมูลผลิตภัณฑ์
   ติดคลาส prd-page ไว้ที่ <main> ของหน้าสินค้าเท่านั้น
   หน้าบทความ รีวิว และหน้าอื่น จึงไม่โดนกระทบ

   ขนาดที่เจ้าของเว็บเลือก
     ชื่อสินค้า        22px เขียว
     หัวข้อระดับส่วน   22px แดง + เส้นดำเต็มหน้า
     หัวข้อในคอลัมน์   20px เขียว
     เนื้อหาทั่วไป     17px  (ระยะบรรทัด 26px)
     กล่องคำเตือน      14px
   ========================================================================== */
.prd-page .lead            { font-size: 17px; line-height: 26px; }
.prd-page .h-green         { font-size: 20px; line-height: 28.58px; }
.prd-page .h-green-lg      { font-size: 22px; line-height: 31.4px; }
.prd-page .list-main li    { line-height: 29px; }

/* li ในหน้าสินค้าแบบใหม่ (ไม่มี span ฝังขนาดไว้ข้างใน) ใช้ 17px
   ส่วน li ที่อยู่ในกล่องเก่า prd-text ฯลฯ ยังสืบทอดฐาน 14px ตามกฎข้างบน
   จึงไม่ไปกวนขนาดของ span ที่เขียนเป็น em ไว้ */
.prd-page li               { font-size: 17px; line-height: 26px; }
.prd-page .prd-text li,
.prd-page .prd-green li,
.prd-page .prd-red li,
.prd-page .prd-note li     { font-size: inherit; line-height: inherit; }

/* หัวข้อแดงระดับคอลัมน์
   ใช้กับหัวข้อแดงที่อยู่ในคอลัมน์ขวา ซึ่งขึ้นเส้นคั่นเต็มหน้าไม่ได้
   ขนาดและระยะเท่า .h-green ทุกอย่าง ต่างแค่สี  (parslem, roseguard) */
.prd-page .h-red {
    color: var(--red);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 28.58px;
}

/* รายการที่ใช้ ✔ เป็นสัญลักษณ์
   ของเดิม ✔ เป็นตัวอักษรจริงที่พิมพ์ไว้ในเนื้อหา พอรื้อมาร์กอัปเก่าจึงย้ายมาเป็น
   สัญลักษณ์หน้ารายการแทน ตาเห็นเหมือนเดิม แต่แก้เนื้อหาได้ง่ายขึ้นมาก */
.prd-page .list-check {
    list-style: none;
    margin: 0 0 10px;
    padding-left: 0;
}
.prd-page .list-check li {
    position: relative;
    padding-left: 25px;
    line-height: 29px;
}
.prd-page .list-check li::before {
    content: "\2714";
    position: absolute;
    left: 0;
    top: 0;
    color: #000;
    font-size: 20px;
    line-height: 29px;
}