/* footer.css */
/* แยกออกจาก template/footer.php เมื่อ 2026-08-19 */
.main-footer {
        color: #ccc;
        padding: 40px 0;
    }

    .footer-top-section {
        margin-bottom: 40px;
    }

    .footer-title {
        color: #fff;
        font-weight: bold;
    }

    .footer-subtitle {
        color: #aaa;
    }

    .footer-heading {
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #fff;
    }

    .main-footer-content p {
        font-size: 14px;
        line-height: 1.6;
    }

    .social-icon-img {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 5px;
        text-decoration: none;
        transition: transform 0.2s ease;
    }

    .social-icon-img img {
        height: 40px;
        width: 40px;
        object-fit: contain;
    }

    .social-icon-img:hover {
        transform: scale(1.1);
    }

    .social-icon-fa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 22px;
        color: white;
    }

    .footer-bottom-bar {
        text-align: center;
        color: #888;
        font-size: 13px;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        /* Lighter border for subtlety */
    }

    @media (max-width: 767.98px) {

        .pr-md-5,
        .px-md-3,
        .pl-md-5 {
            padding-right: 15px !important;
            padding-left: 15px !important;
            margin-bottom: 20px;
        }

        .footer-heading {
            text-align: center;
        }

        .social-icons-group {
            text-align: center;
        }

        .main-footer-content p {
            text-align: center;
        }
    }

/* mobile.css */
/* ==========================================================================
   mobile.css — ปรับหน้าจอมือถือให้อ่านสบาย ไม่ "ตะโกน"  (สร้าง 2026-09-07)
   --------------------------------------------------------------------------
   โหลดเป็นไฟล์สุดท้ายของทุกหน้า (template/footer.php) จึงชนะไฟล์อื่นได้
   โดยไม่ต้องไปแก้ CSS เดิมทีละไฟล์  ⇒ จอเดสก์ท็อปไม่กระทบเลย
   ทุกกฎอยู่ใน @media เท่านั้น — ห้ามเขียนกฎนอก @media ในไฟล์นี้

   3 ปัญหาที่แก้
   1. ตัวหนังสือใหญ่เกิน — หัวข้อจาก CSS และ font-size ที่ฝังมากับเนื้อหา CMS
   2. กล่อง/รูปสูงเกิน — ความสูงตายตัว 250-450px ทำให้จอนึงเห็นได้แค่ 1-2 กล่อง
   3. เนื้อที่แนวนอนหาย — padding ซ้อนกัน 5 ชั้น เหลือความกว้างจริง 270 จาก 375
   ========================================================================== */

@media (max-width: 768px) {

    /* ── 1. หัวข้อ ────────────────────────────────────────────────────── */

    /* หัวข้อหน้า — PHP ใส่ font-size:28px แบบ inline มา จึงต้อง !important */
    .page-h1 {
        font-size: 17px !important;
        line-height: 1.35 !important;
        margin-bottom: .6em !important;
    }

    /* หัวข้อกลุ่มที่มีขีดส้มนำหน้า (บทความ / โครงการที่ผ่านมา / พาร์ทเนอร์) */
    .line-ref-custom,
    .line-ref-custom.line-ref-white,
    .line-ref {
        font-size: 1.15rem;
        margin-bottom: 1rem;
    }

    .line-ref-custom:after {
        height: 1.5rem;
    }

    /* หัวข้อการ์ด */
    .news-box-title {
        font-size: 1rem;
        line-height: 1.35em;
    }

    .sub-news-title {
        font-size: .9rem;
    }

    .project-title,
    .card-title {
        font-size: .95rem;
    }

    .project-text,
    .card-text {
        font-size: .85rem;
    }

    /* หัวข้อย่อยในหน้า detail (ความคิดเห็น / โครงการที่เกี่ยวข้อง / สินค้าที่เกี่ยวข้อง) */
    .shop-content-display ~ h3,
    .container > .box-content > h3,
    h3.shop-title,
    h6.shop-title {
        font-size: 1.05rem;
    }

    .footer-title {
        font-size: 1.05rem;
    }

    /* แถบข่าววิ่งใต้เมนู — .news-ticker บังคับ 11px แล้วลิงก์ข้างในเป็น 0.8em
       ผลลัพธ์จริงคือ 8.8px ซึ่งเล็กจนอ่านไม่ออก ดึงกลับมาที่ 12px */
    .news-ticker a,
    #newsMarquee a {
        font-size: 12px !important;
    }

    /* ── ปุ่มเลื่อนซ้าย/ขวา — หน้าตาเดียวกันทุกหมวด ─────────────────────
       เดิมแต่ละหมวดเขียนปุ่มของตัวเอง: 40px กลม (บทความ/ข่าว) · 24px ไม่มีกรอบ
       (สินค้า) · สี่เหลี่ยม (โครงการ) · พาร์ทเนอร์อีกแบบ  เลื่อนหน้าเดียวเจอ 4 แบบ
       รวมเป็นวงกลม 30px ชุดเดียว — ปุ่มแบนเนอร์หัวเว็บไม่รวมด้วย เพราะแบนเนอร์
       สูงแค่ ~88px ต้องเล็กกว่านี้ */
    .scroll-btn,
    .scroll-btn-custom,
    .scroll-btn-partner,
    .partners-carousel .scroll-btn-partner,
    .blog-sub-btn,
    .video-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 30px !important;
        text-align: center;
        border: none;
        border-radius: 50%;
        /* เดิม .35 — ทับบนพื้นขาวได้เทาอ่อน ตัวลูกศรขาวบนเทานั้นคอนทราสต์ 2.5
           ต่ำกว่าเกณฑ์ 4.5 (Lighthouse ฟ้อง 2026-09-22) · .72 ได้ราว 5.9 ผ่านสบาย
           ยังเป็นวงกลมโปร่งเหมือนเดิม แค่เข้มขึ้นให้มองเห็นลูกศรจริง ๆ */
        background-color: rgba(0, 0, 0, .72);
        color: #fff;
        box-shadow: none;
    }

    .scroll-btn.left,
    .scroll-btn-custom.left,
    .scroll-btn-partner.left {
        left: -4px;
    }

    .scroll-btn.right,
    .scroll-btn-custom.right,
    .scroll-btn-partner.right {
        right: -4px;
    }

    /* แบนเนอร์หัวหน้าแรก — บนมือถือสูงแค่ ~88px (สัดส่วน 1920x450)
       แต่ปุ่มเลื่อนกินไป 41x50 คือกว่าครึ่งความสูงแบนเนอร์ และจุด 7 จุดกว้างรวม 154px
       ทั้งคู่เขียน style ติดมากับแท็กใน template/banner_slide.php จึงต้อง !important */
    #bnrPrev,
    #bnrNext {
        padding: 5px 7px !important;
        font-size: 11px !important;
        border-radius: 3px;
    }

    #bnrPrev { left: 6px !important; }
    #bnrNext { right: 6px !important; }

    .bnr-dots {
        bottom: 6px !important;
    }

    .bnr-dot {
        width: 6px !important;
        height: 6px !important;
        margin: 0 3px !important;
    }


    /* ── 2. ความสูงของรูป/กล่อง ──────────────────────────────────────── */

    /* บทความเด่นหน้าแรก — เดิมรูปคงที่ 450x450 กินทั้งจอ */
    #mainBlogCarousel .carousel-item img {
        width: 100%;
        height: 210px;
    }

    .card-premium {
        min-height: 0;
    }

    /* การ์ดบทความหน้าแรกกว้างเต็มจอเท่าการ์ดโครงการ แต่กรอบรูปเป็นความสูงตายตัว
       130px รูปจึงเตี้ยกว่าโครงการ (62% ของความกว้าง ≈ 218px) เกือบครึ่ง
       เปลี่ยนเป็นอัตราส่วนเดียวกัน — ความสูงจาก padding ต้องคู่กับ img แบบ absolute
       (<picture> เป็น display:contents จาก index_.css จึงไม่มีกล่องมาคั่น) */
    .sub-news-image-wrapper {
        height: 0;
        padding-top: 75%;   /* 09-08 user ขอให้รูปสูงขึ้น (เดิม 62%) */
    }

    .sub-news-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* กรอบรูปในแถว "ที่เกี่ยวข้อง" ท้ายหน้า detail */
    .card-image-wrapper {
        height: 150px;
    }

    .shop-card .card-image-wrapper {
        height: 110px;
    }

    /* แถว "ที่เกี่ยวข้อง" ท้ายหน้า detail — รูปแต่ละใบขนาดไม่เท่ากัน
       ต้นเหตุ: หน้า detail ตั้ง id ของกล่องไม่ตรงกัน (shop-scroll-box บ้าง
       project-scroll-box บ้าง) กฎที่อิง id จึงจับได้บ้างไม่ได้บ้าง
       และหน้า detail ไม่ได้โหลด CSS การ์ดของหน้าแรกมาด้วย <img> เลยเป็น
       บล็อกธรรมดา (position: static) ไม่ถูกครอบ ⇒ สูงตามสัดส่วนไฟล์ต้นฉบับ
       แก้โดยอิงตัวห่อ .shop-wrapper-container แทน id แล้วบังคับกรอบสัดส่วนเดียว */
    /* ตัวห่อแถวนี้ถูกตั้ง padding ไว้คนละค่าในแต่ละหน้า (Blog_detail 10px ·
       product_detail 40px) แถว "ที่เกี่ยวข้อง" จึงแคบไม่เท่ากันตามหน้าที่เปิด
       บนจอ 375px ที่ 40px คือหายไป 80px การ์ดเหลือ 118px แทนที่จะเป็น 138px
       ตั้งเป็น 0 ให้ตรงแนวกับเนื้อหาส่วนอื่นของหน้าเหมือนกันหมด
       (หน้าแรกใช้คลาสนี้เหมือนกันแต่ไม่ได้ตั้ง padding ไว้ จึงไม่กระทบ) */
    .shop-wrapper-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .shop-wrapper-container .card-image-wrapper {
        position: relative;
        width: 100%;
        height: 0 !important;
        padding-top: 62% !important;
        overflow: hidden;
        border-radius: 6px 6px 0 0;
    }

    .shop-wrapper-container .card-image-wrapper img,
    .shop-wrapper-container .card-image-wrapper .card-img-top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;   /* ครอบส่วนล่างทิ้ง ให้เห็นหัวรูปเสมอ */
    }

    /* กล่อง "สอบถาม/สั่งซื้อ" ท้ายหน้า detail เขียน padding-left:50px ติดมากับแท็ก
       (views/{Blog,idia,news,product,project}_detail.php) บนจอ 375px คือกินไป 1 ใน 7
       ของความกว้าง ทำให้ย่อหน้านี้เยื้องเข้าไปคนละแนวกับเนื้อหาอื่นทั้งหน้า */
    .container > .box-content [style*="padding-left:50px"],
    .container > .box-content [style*="padding-left: 50px"],
    .shop-content-display [style*="padding-left:50px"],
    .shop-content-display [style*="padding-left: 50px"] {
        padding-left: 0 !important;
    }

    /* แถวสินค้า/ข่าวหน้าแรกใช้ padding-top:100% ทำรูปเป็นจัตุรัส
       พอการ์ดกว้างเต็มจอ รูปจึงสูง 311px กินเกินครึ่งหน้าจอไปแล้วทั้งที่ยังไม่ถึงหัวข้อ
       ความสูงจาก padding ชนะ height เสมอ (box-sizing: border-box) จึงต้องแก้ที่ padding */
    #shop-scroll-box .card-image-wrapper,
    .blog-scroll .card-image-wrapper {
        padding-top: 62% !important;
        height: auto;
    }

    /* รายการหัวข้อย่อยในเนื้อหา CMS เขียน padding-left:48px ติดมากับแท็ก <ul> เอง
       บางเรื่องซ้อน <ul> สองชั้น = เยื้องเข้าไป 96px จากคอลัมน์ที่กว้าง 348px
       คือกินไป 28% ข้อความเลยไปกองอยู่ครึ่งขวาของจอ ดูเหมือนจัดชิดขวา
       (เจอที่ /en/blog/nrc-stc-... · ค่าเขียนติดแท็กจึงต้อง !important) */
    .container > .box-content ul,
    .container > .box-content ol,
    .shop-content-display ul,
    .shop-content-display ol {
        padding-left: 20px !important;
        margin-left: 0 !important;
    }

    /* ชั้นที่ซ้อนเข้าไปอีกให้เยื้องเพิ่มแค่เล็กน้อย พอให้เห็นว่าเป็นชั้นย่อย */
    .container > .box-content ul ul,
    .container > .box-content ul ol,
    .container > .box-content ol ul,
    .container > .box-content ol ol,
    .shop-content-display ul ul,
    .shop-content-display ul ol,
    .shop-content-display ol ul,
    .shop-content-display ol ol {
        padding-left: 14px !important;
    }

    /* รูปที่ฝังมากับเนื้อหา CMS มักมี width/height ติดมาด้วย ทำให้ล้นจอ */
    .shop-content-display img,
    .container > .box-content img.content-img {
        max-width: 100% !important;
        height: auto !important;
    }


    /* ── 3. คืนเนื้อที่แนวนอน ────────────────────────────────────────── */

    /* padding ซ้อนกัน 5 ชั้น: container 12 + box-content 12 + col 12 + grid 10 */
    .content-news {
        padding: 0;
        gap: 14px;
    }

    /* .box-content มี 2 ความหมาย — ตัวห่อหน้า (index_.css) กับตัวเนื้อการ์ด
       (news_.css) จึงเจาะจงเฉพาะตัวที่เป็นลูกตรงของ .container */
    .container > .box-content {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 30px;
    }

    .content-sticky {
        padding-bottom: 30px;
    }

    /* การ์ดในหน้า list ไม่ต้องคุมกว้าง 350px แล้ว เพราะเรียงคอลัมน์เดียว */
    .box-news {
        max-width: 100%;
        width: 100%;
    }


    /* ── 3.1 แถวเลื่อนแนวนอนหน้าแรก — 2 ใบต่อหน้าจอ เท่ากันทุกหมวด ───────
       เดิมแต่ละหมวดกว้างไม่เท่ากันเลย (ข่าว 90% · สินค้า 1 ใน 4 · โครงการ 100%)
       จอเดียวจึงเห็นหมวดละขนาด ดูเป็นคนละเว็บ
       ตอนนี้ทุกหมวดใช้สูตรเดียว: 2 ใบต่อหน้าจอ ช่องว่าง 12px
       scroll-snap ทำให้ปล่อยนิ้วแล้วหยุดตรงขอบการ์ดพอดีทุกครั้ง */
    .blog-scroll,
    .shop-scroll,
    .project-carousel .project-slider {
        gap: 12px;
        scroll-snap-type: x mandatory;
    }

    /* ข่าว (.blog-card) กับ สินค้า (.shop-card) = 2 ใบต่อหน้าจอ
       การ์ดสองหมวดนี้เป็นรูป + หัวข้อสั้น ๆ ครึ่งจอจึงยังอ่านออก */
    .blog-card,
    .shop-card {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
        width: calc(50% - 6px);
        min-width: 0;
        scroll-snap-align: start;
    }

    /* โครงการ = 4 ใบต่อหน้าจอ (บน 2 ล่าง 2) แล้วปัดไปดูชุดถัดไป
       ใช้ grid 2 แถวไหลเป็นคอลัมน์ คอลัมน์ละครึ่งจอ — การ์ดจึงไม่ต้องคุมความกว้างเอง
       (ของเดิมเป็น flex ใบละเต็มจอ) */
    .project-carousel .project-slider {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: calc(50% - 6px);
        align-items: stretch;
    }

    .project-carousel .col-md-3 {
        flex: none;
        max-width: none;
        width: auto;
        min-width: 0;
        margin-bottom: 0;      /* mb-4 ของ bootstrap ซ้อนกับ gap ของ grid */
        scroll-snap-align: start;
    }

    /* วิดีโอแนะนำ — เดิมเป็น .row ธรรมดา บนมือถือจึงเรียงลงมา 4 บรรทัด
       ทำให้เป็นแถวเลื่อนแนวนอนเหมือนหมวดอื่น แต่คลิปละ 1 ใบเต็มจอ
       เพราะภาพ 16:9 ที่กว้างครึ่งจอ (150px) เล็กจนดูไม่ออกว่าเป็นคลิปอะไร */
    .video-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .video-row::-webkit-scrollbar {
        display: none;
    }

    /* 09-08 user สั่งให้เป็น 2 ใบต่อหน้าจอเหมือนข่าว (เดิมใบละเต็มจอ) */
    .video-row > [class*="col-"] {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
        width: calc(50% - 6px);
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
        scroll-snap-align: start;
    }

    /* การ์ดโครงการ — เดิม padding-top:80% (4:5) สูงเกือบเต็มจอเมื่อกว้างเต็มจอ
       09-08 user ขอให้รูปสูงขึ้นแต่ "กล่องเท่าเดิม" จึงขยายรูป 62% → 75%
       แล้วไปตัดคืนที่คำโปรย (เหลือบรรทัดเดียว) กับระยะห่างของปุ่มดูเพิ่มเติม */
    .project-image-wrapper {
        padding-top: 75%;
    }

    .project-body {
        padding: 12px;
    }

    /* คำโปรยใต้ชื่อโครงการ เหลือบรรทัดเดียวพอ (เดิม 2 บรรทัด) */
    .project-text {
        -webkit-line-clamp: 1;
        margin-bottom: 0;
    }

    /* ปุ่ม "ดูเพิ่มเติม" — เดิมเว้นจากคำโปรยถึง 1rem ดูโหว่ไปทั้งกล่อง */
    .project-card .learn-more {
        font-size: .75rem;
        margin-top: .25rem;
    }

    /* ชื่อบทความในการ์ดหน้าแรก เหลือ 2 บรรทัด (เดิม 3)
       🔑 display คำนวณออกมาเป็น flow-root ไม่ใช่ -webkit-box จากที่ไฟล์เดิมตั้งไว้
       -webkit-line-clamp จึงไม่มีผลเลย ต้องบังคับ display คู่กันไปด้วยทุกครั้ง */
    .sub-news-title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    /* กล่องข้อความของการ์ดบทความจองความสูงไว้ 100px ทำให้ตัดบรรทัดแล้วกล่องไม่ยุบ */
    .blog-sub-scroll .card-body {
        min-height: 0;
        padding: 10px 12px 12px;
    }

    /* ── 3.2 ส่วนบทความหน้าแรก — แถวเลื่อน 2 ใบต่อหน้าจอ ────────────────
       ของเดิมบนมือถือคือการ์ดใหญ่ 1 ใบ แล้วการ์ดเล็กเรียงต่อลงมาอีก 4 บรรทัด
       ยาวมากและดูเป็นคนละก้อนกับหมวดอื่นบนหน้าเดียวกัน */
    .blog-home-main {
        display: none !important;   /* การ์ดใหญ่กินเกือบเต็มจอไปหนึ่งใบ */
    }

    .blog-home-side {
        position: relative;         /* ยึดตำแหน่งปุ่มลูกศร */
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-left: 0;            /* ไม่งั้นการ์ดบทความแคบกว่าการ์ดโครงการ 10px */
        padding-right: 0;
    }

    .blog-sub-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        margin: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .blog-sub-scroll::-webkit-scrollbar {
        display: none;
    }

    /* บทความ = 1.5 ใบต่อหน้าจอ (09-08 user บอกว่า 2 ใบแล้วการ์ดเล็กเกินไป)
       เห็นใบเต็มหนึ่งใบ + โผล่ครึ่งใบถัดไป เป็นการบอกใบ้ว่าเลื่อนต่อได้
       สูตร: 1.5 x กว้างการ์ด + ช่องว่าง 1 ช่อง = ความกว้างที่เห็น */
    .blog-sub-scroll > .col {
        flex: 0 0 calc((100% - 12px) / 1.5);
        max-width: calc((100% - 12px) / 1.5);
        width: calc((100% - 12px) / 1.5);
        padding: 0;
        scroll-snap-align: start;
    }

    /* เรื่องที่จอใหญ่ไม่ได้แสดง (ลำดับ 0 และ 5-7) — บนมือถือต้องโผล่ครบ 8 เรื่อง
       ต้อง !important เพราะกฎที่ซ่อนไว้ใน Blog_Blog_home.css ก็ !important (สู้ .d-flex) */
    .blog-sub-mobile-only {
        display: flex !important;
    }

    /* ปุ่มลูกศรของแถวบทความ/วิดีโอ — ขนาด/สีมาจากชุดกลางข้างบน เหลือแค่ตำแหน่ง */
    .blog-sub-btn,
    .video-btn {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        cursor: pointer;
    }

    .blog-sub-btn.left,
    .video-btn.left {
        left: -4px;
    }

    .blog-sub-btn.right,
    .video-btn.right {
        right: -4px;
    }


    /* ── 3.4 เงาการ์ด — เดิมโดนกล่องเลื่อนตัดขาดด้านขวา ─────────────────
       CSS บังคับว่า ถ้าแกนหนึ่งไม่ใช่ visible อีกแกนที่เป็น visible จะกลายเป็น auto
       แถวเลื่อนทุกแถวตั้ง overflow-x ไว้ ⇒ overflow-y กลายเป็น auto ไปด้วยโดยไม่รู้ตัว
       เงาเดิม (เบลอ 25px เลื่อนลง 10px สองชั้น) จึงถูกตัดทั้งสี่ด้าน เห็นชัดสุดที่ขอบขวา
       แก้สองทางพร้อมกัน: ย่อเงาให้สั้นลง + เว้นที่ในกล่องเลื่อนให้เงาอยู่ได้ */
    /* 🔑 ต้องปิด transition ของ box-shadow ก่อน ไม่งั้นกฎข้างล่างไม่มีผลเลย
       การ์ดพวกนี้ตั้ง "transition: box-shadow .3s" ไว้ตั้งแต่ไฟล์เดิม
       ค่าที่ transition ถืออยู่ระหว่างทำงาน อยู่เหนือทุกอย่างในลำดับชั้น CSS
       รวมทั้ง !important ด้วย (พิสูจน์แล้ว: getAnimations() คืน CSSTransition
       ของ box-shadow ที่ค้างสถานะ running แม้แต่ inline style ก็ยังไม่ชนะ)
       — น่าจะเป็นต้นเหตุเดียวกับที่ .scroll-btn-partner ไม่ยอมรับกฎจากไฟล์นี้ */
    .blog-card .card,
    .shop-card .card,
    .card-premium,
    .project-card,
    .box-news,
    .box-news-shop {
        transition: transform .3s ease !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .14) !important;
    }

    .blog-scroll,
    .shop-scroll,
    .blog-sub-scroll,
    .video-row,
    .project-carousel .project-slider {
        padding-top: 10px;
        padding-bottom: 14px;
        /* 09-08 user ตรวจเองแล้วชี้ว่าต้องปิด 2 บรรทัดนี้ ⇒ ปิดแล้ว
           padding ซ้าย-ขวา 10px ทำให้การ์ดเยื้องเข้าไปจากแนวหัวข้อหมวด 10px
           และกินที่ทางขวาจนซ้าย-ขวาดูไม่เท่ากัน
           ⚠️ ผลข้างเคียง: เงาการ์ดด้านซ้าย-ขวาจะถูก overflow ตัดอีกครั้ง
              (เงาบน-ล่างยังอยู่ เพราะ padding แนวตั้งยังคงไว้) */
        padding-left: 0;
        padding-right: 0;
        scroll-padding-left: 0;
        scroll-padding-right: 0;
        /* หมวดสินค้า/ข่าว/โครงการมี smooth มาแต่เดิม แต่บทความกับวิดีโอไม่มี
           กดปุ่มแล้วกระโดดทันที ดูเป็นคนละแบบกับหมวดอื่น จึงตั้งให้เท่ากันทุกแถว */
        scroll-behavior: smooth;
    }

    /* ── ขอบซ้าย-ขวาของทุกแถวให้ตรงกับหัวข้อหมวด ──────────────────────
       เดิมกว้างไม่เท่ากัน 3 ค่า: ข่าว/สินค้า 307.8 (ตรงกับหัวข้อ) · โครงการ 327.8
       · บทความ/วิดีโอ 331.8 (โดน margin -12px ของ .row ดึงออกไปนอกกรอบ)
       ดึงกลับให้เท่ากันหมด การ์ดทุกหมวดจึงกว้างเท่ากันจริง ๆ */
    .blog-home-row,
    .video-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .project-carousel {
        margin-left: 10px;
        margin-right: 10px;
    }

    /* ปุ่มลูกศรอยู่นอกกล่องเลื่อน จึงต้องขยับตามระยะที่เพิ่งเว้นไว้ */
    .scroll-btn.left,
    .scroll-btn-custom.left,
    .blog-sub-btn.left,
    .video-btn.left {
        left: 2px;
    }

    .scroll-btn.right,
    .scroll-btn-custom.right,
    .blog-sub-btn.right,
    .video-btn.right {
        right: 2px;
    }

    /* ── 3.3 หน้ารายการ — 2 คอลัมน์ทุกหมวด (09-08 user สั่งให้เท่ากันหมด)
       เดิมแยกเป็น ข่าว+สินค้า 2 คอลัมน์ · บทความ/โครงการ/วิดีโอ/ความรู้ 1 คอลัมน์
       คลาส --single ยังติดอยู่ที่ template/<หมวด>/content.php แต่ไม่มีผลแล้ว
       (คงคลาสไว้เผื่ออยากกลับไปเป็น 1 คอลัมน์ — เพิ่มกฎทับตรงนี้ได้ทันที) */
    .content-news,
    .content-news--single,
    .product-grid-container {
        /* minmax(0, 1fr) ไม่ใช่ 1fr — ไม่งั้นคำอังกฤษยาว ๆ ที่ตัดบรรทัดไม่ได้
           จะดันคอลัมน์ของตัวเองให้กว้างกว่าอีกคอลัมน์ (เจอจริงที่ /en/?product
           ได้ 178.7px กับ 160.5px แทนที่จะเท่ากัน) */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* หน้ารายการวิดีโอเป็น .row ของ bootstrap ไม่ใช่ grid เหมือนหมวดอื่น
       (views/Video.php:121 · col-md-3 บนมือถือจึงกลายเป็นเต็มบรรทัด)
       จึงต้องคุมความกว้างเอง ให้ได้ 2 ใบต่อบรรทัดเท่าหมวดที่เหลือ */
    /* ต้องเขียน .row > .video-card ไม่ใช่ .video-card เฉย ๆ
       เพราะกฎ .row > * ของ bootstrap (width:100%) เจาะจงกว่า จะชนะไป */
    .row > .video-card {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }

    .box-image {
        min-height: 0;
        max-height: none;
        aspect-ratio: 16 / 10;
    }
}


/* ── จอแคบจริง (มือถือทั่วไป) ─────────────────────────────────────────── */
@media (max-width: 576px) {

    /* ทุก view เขียน style="max-width: 90%" ติดมากับ <div class="container"> เอง
       บนจอ 375px เท่ากับทิ้งขอบซ้าย-ขวาไปข้างละ 19px ฟรี ๆ จึงต้อง !important */
    .container {
        max-width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-h1 {
        font-size: 16px !important;
    }

    .line-ref-custom,
    .line-ref-custom.line-ref-white,
    .line-ref {
        font-size: 1.1rem;
    }
}

/* ── 4. ขนาดตัวหนังสือที่ฝังมากับเนื้อหา CMS ─────────────────────────────
   คนเขียนเนื้อหาเลือกขนาดจากตัวแก้ข้อความ ค่านั้นจึงติดมาเป็น inline style
   เช่น <span style="font-size:24px"> ซึ่งบนจอ 375px คือใหญ่เกินไปมาก
   ย่อแบบ "บีบช่วง" ไม่ใช่ตัดเท่ากันหมด — ลำดับชั้นหัวข้อ/เนื้อความจึงยังอยู่
   รอบ 2 (2026-09-08) บีบลงอีกจากช่วง 15-22px เหลือ 12-17px
   สูตร  ขนาดใหม่ = 12 + (ขนาดเดิม-18) x 5/30   จำกัดช่วง 12-17px
   18px→12 · 24px→13 · 28px→13.7 · 36px→15 · 24pt→14.3 · 36pt→17
   ⚠️ ห้ามใช้วิธีคูณค่าคงที่แล้วตัดที่พื้น เพราะ 18px กับ 24px จะชนกันค่าเดียว
      หน้าสินค้าใช้ 18px เป็นเนื้อความ 24px เป็นหัวข้อย่อย ชนกันแล้วลำดับชั้นหาย
   เล็กกว่า 18px / 13pt ไม่แตะเลย — ไฟล์นี้ย่อลงอย่างเดียว ไม่ขยาย        */
@media (max-width: 768px) {

    .shop-content-display [style*="font-size:18px"],
    .shop-content-display [style*="font-size: 18px"],
    .container > .box-content [style*="font-size:18px"],
    .container > .box-content [style*="font-size: 18px"] {
        font-size: 12px !important;
    }

    .shop-content-display [style*="font-size:19px"],
    .shop-content-display [style*="font-size: 19px"],
    .container > .box-content [style*="font-size:19px"],
    .container > .box-content [style*="font-size: 19px"] {
        font-size: 12.2px !important;
    }

    .shop-content-display [style*="font-size:20px"],
    .shop-content-display [style*="font-size: 20px"],
    .container > .box-content [style*="font-size:20px"],
    .container > .box-content [style*="font-size: 20px"] {
        font-size: 12.3px !important;
    }

    .shop-content-display [style*="font-size:21px"],
    .shop-content-display [style*="font-size: 21px"],
    .container > .box-content [style*="font-size:21px"],
    .container > .box-content [style*="font-size: 21px"] {
        font-size: 12.5px !important;
    }

    .shop-content-display [style*="font-size:21.3333px"],
    .shop-content-display [style*="font-size: 21.3333px"],
    .container > .box-content [style*="font-size:21.3333px"],
    .container > .box-content [style*="font-size: 21.3333px"] {
        font-size: 12.6px !important;
    }

    .shop-content-display [style*="font-size:22px"],
    .shop-content-display [style*="font-size: 22px"],
    .container > .box-content [style*="font-size:22px"],
    .container > .box-content [style*="font-size: 22px"] {
        font-size: 12.7px !important;
    }

    .shop-content-display [style*="font-size:23px"],
    .shop-content-display [style*="font-size: 23px"],
    .container > .box-content [style*="font-size:23px"],
    .container > .box-content [style*="font-size: 23px"] {
        font-size: 12.8px !important;
    }

    .shop-content-display [style*="font-size:24px"],
    .shop-content-display [style*="font-size: 24px"],
    .container > .box-content [style*="font-size:24px"],
    .container > .box-content [style*="font-size: 24px"] {
        font-size: 13px !important;
    }

    .shop-content-display [style*="font-size:25px"],
    .shop-content-display [style*="font-size: 25px"],
    .container > .box-content [style*="font-size:25px"],
    .container > .box-content [style*="font-size: 25px"] {
        font-size: 13.2px !important;
    }

    .shop-content-display [style*="font-size:26px"],
    .shop-content-display [style*="font-size: 26px"],
    .container > .box-content [style*="font-size:26px"],
    .container > .box-content [style*="font-size: 26px"] {
        font-size: 13.3px !important;
    }

    .shop-content-display [style*="font-size:27px"],
    .shop-content-display [style*="font-size: 27px"],
    .container > .box-content [style*="font-size:27px"],
    .container > .box-content [style*="font-size: 27px"] {
        font-size: 13.5px !important;
    }

    .shop-content-display [style*="font-size:28px"],
    .shop-content-display [style*="font-size: 28px"],
    .container > .box-content [style*="font-size:28px"],
    .container > .box-content [style*="font-size: 28px"] {
        font-size: 13.7px !important;
    }

    .shop-content-display [style*="font-size:29px"],
    .shop-content-display [style*="font-size: 29px"],
    .container > .box-content [style*="font-size:29px"],
    .container > .box-content [style*="font-size: 29px"] {
        font-size: 13.8px !important;
    }

    .shop-content-display [style*="font-size:30px"],
    .shop-content-display [style*="font-size: 30px"],
    .container > .box-content [style*="font-size:30px"],
    .container > .box-content [style*="font-size: 30px"] {
        font-size: 14px !important;
    }

    .shop-content-display [style*="font-size:31px"],
    .shop-content-display [style*="font-size: 31px"],
    .container > .box-content [style*="font-size:31px"],
    .container > .box-content [style*="font-size: 31px"] {
        font-size: 14.2px !important;
    }

    .shop-content-display [style*="font-size:32px"],
    .shop-content-display [style*="font-size: 32px"],
    .container > .box-content [style*="font-size:32px"],
    .container > .box-content [style*="font-size: 32px"] {
        font-size: 14.3px !important;
    }

    .shop-content-display [style*="font-size:33px"],
    .shop-content-display [style*="font-size: 33px"],
    .container > .box-content [style*="font-size:33px"],
    .container > .box-content [style*="font-size: 33px"] {
        font-size: 14.5px !important;
    }

    .shop-content-display [style*="font-size:34px"],
    .shop-content-display [style*="font-size: 34px"],
    .container > .box-content [style*="font-size:34px"],
    .container > .box-content [style*="font-size: 34px"] {
        font-size: 14.7px !important;
    }

    .shop-content-display [style*="font-size:35px"],
    .shop-content-display [style*="font-size: 35px"],
    .container > .box-content [style*="font-size:35px"],
    .container > .box-content [style*="font-size: 35px"] {
        font-size: 14.8px !important;
    }

    .shop-content-display [style*="font-size:36px"],
    .shop-content-display [style*="font-size: 36px"],
    .container > .box-content [style*="font-size:36px"],
    .container > .box-content [style*="font-size: 36px"] {
        font-size: 15px !important;
    }

    .shop-content-display [style*="font-size:38px"],
    .shop-content-display [style*="font-size: 38px"],
    .container > .box-content [style*="font-size:38px"],
    .container > .box-content [style*="font-size: 38px"] {
        font-size: 15.3px !important;
    }

    .shop-content-display [style*="font-size:40px"],
    .shop-content-display [style*="font-size: 40px"],
    .container > .box-content [style*="font-size:40px"],
    .container > .box-content [style*="font-size: 40px"] {
        font-size: 15.7px !important;
    }

    .shop-content-display [style*="font-size:42px"],
    .shop-content-display [style*="font-size: 42px"],
    .container > .box-content [style*="font-size:42px"],
    .container > .box-content [style*="font-size: 42px"] {
        font-size: 16px !important;
    }

    .shop-content-display [style*="font-size:44px"],
    .shop-content-display [style*="font-size: 44px"],
    .container > .box-content [style*="font-size:44px"],
    .container > .box-content [style*="font-size: 44px"] {
        font-size: 16.3px !important;
    }

    .shop-content-display [style*="font-size:45px"],
    .shop-content-display [style*="font-size: 45px"],
    .container > .box-content [style*="font-size:45px"],
    .container > .box-content [style*="font-size: 45px"] {
        font-size: 16.5px !important;
    }

    .shop-content-display [style*="font-size:46px"],
    .shop-content-display [style*="font-size: 46px"],
    .container > .box-content [style*="font-size:46px"],
    .container > .box-content [style*="font-size: 46px"] {
        font-size: 16.7px !important;
    }

    .shop-content-display [style*="font-size:48px"],
    .shop-content-display [style*="font-size: 48px"],
    .container > .box-content [style*="font-size:48px"],
    .container > .box-content [style*="font-size: 48px"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:50px"],
    .shop-content-display [style*="font-size: 50px"],
    .container > .box-content [style*="font-size:50px"],
    .container > .box-content [style*="font-size: 50px"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:52px"],
    .shop-content-display [style*="font-size: 52px"],
    .container > .box-content [style*="font-size:52px"],
    .container > .box-content [style*="font-size: 52px"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:54px"],
    .shop-content-display [style*="font-size: 54px"],
    .container > .box-content [style*="font-size:54px"],
    .container > .box-content [style*="font-size: 54px"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:56px"],
    .shop-content-display [style*="font-size: 56px"],
    .container > .box-content [style*="font-size:56px"],
    .container > .box-content [style*="font-size: 56px"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:60px"],
    .shop-content-display [style*="font-size: 60px"],
    .container > .box-content [style*="font-size:60px"],
    .container > .box-content [style*="font-size: 60px"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:64px"],
    .shop-content-display [style*="font-size: 64px"],
    .container > .box-content [style*="font-size:64px"],
    .container > .box-content [style*="font-size: 64px"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:72px"],
    .shop-content-display [style*="font-size: 72px"],
    .container > .box-content [style*="font-size:72px"],
    .container > .box-content [style*="font-size: 72px"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:80px"],
    .shop-content-display [style*="font-size: 80px"],
    .container > .box-content [style*="font-size:80px"],
    .container > .box-content [style*="font-size: 80px"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:13pt"],
    .shop-content-display [style*="font-size: 13pt"],
    .container > .box-content [style*="font-size:13pt"],
    .container > .box-content [style*="font-size: 13pt"] {
        font-size: 12px !important;
    }

    .shop-content-display [style*="font-size:14pt"],
    .shop-content-display [style*="font-size: 14pt"],
    .container > .box-content [style*="font-size:14pt"],
    .container > .box-content [style*="font-size: 14pt"] {
        font-size: 12.1px !important;
    }

    .shop-content-display [style*="font-size:15pt"],
    .shop-content-display [style*="font-size: 15pt"],
    .container > .box-content [style*="font-size:15pt"],
    .container > .box-content [style*="font-size: 15pt"] {
        font-size: 12.3px !important;
    }

    .shop-content-display [style*="font-size:16pt"],
    .shop-content-display [style*="font-size: 16pt"],
    .container > .box-content [style*="font-size:16pt"],
    .container > .box-content [style*="font-size: 16pt"] {
        font-size: 12.6px !important;
    }

    .shop-content-display [style*="font-size:17pt"],
    .shop-content-display [style*="font-size: 17pt"],
    .container > .box-content [style*="font-size:17pt"],
    .container > .box-content [style*="font-size: 17pt"] {
        font-size: 12.8px !important;
    }

    .shop-content-display [style*="font-size:18pt"],
    .shop-content-display [style*="font-size: 18pt"],
    .container > .box-content [style*="font-size:18pt"],
    .container > .box-content [style*="font-size: 18pt"] {
        font-size: 13px !important;
    }

    .shop-content-display [style*="font-size:19pt"],
    .shop-content-display [style*="font-size: 19pt"],
    .container > .box-content [style*="font-size:19pt"],
    .container > .box-content [style*="font-size: 19pt"] {
        font-size: 13.2px !important;
    }

    .shop-content-display [style*="font-size:20pt"],
    .shop-content-display [style*="font-size: 20pt"],
    .container > .box-content [style*="font-size:20pt"],
    .container > .box-content [style*="font-size: 20pt"] {
        font-size: 13.4px !important;
    }

    .shop-content-display [style*="font-size:21pt"],
    .shop-content-display [style*="font-size: 21pt"],
    .container > .box-content [style*="font-size:21pt"],
    .container > .box-content [style*="font-size: 21pt"] {
        font-size: 13.7px !important;
    }

    .shop-content-display [style*="font-size:22pt"],
    .shop-content-display [style*="font-size: 22pt"],
    .container > .box-content [style*="font-size:22pt"],
    .container > .box-content [style*="font-size: 22pt"] {
        font-size: 13.9px !important;
    }

    .shop-content-display [style*="font-size:23pt"],
    .shop-content-display [style*="font-size: 23pt"],
    .container > .box-content [style*="font-size:23pt"],
    .container > .box-content [style*="font-size: 23pt"] {
        font-size: 14.1px !important;
    }

    .shop-content-display [style*="font-size:24pt"],
    .shop-content-display [style*="font-size: 24pt"],
    .container > .box-content [style*="font-size:24pt"],
    .container > .box-content [style*="font-size: 24pt"] {
        font-size: 14.3px !important;
    }

    .shop-content-display [style*="font-size:26pt"],
    .shop-content-display [style*="font-size: 26pt"],
    .container > .box-content [style*="font-size:26pt"],
    .container > .box-content [style*="font-size: 26pt"] {
        font-size: 14.8px !important;
    }

    .shop-content-display [style*="font-size:28pt"],
    .shop-content-display [style*="font-size: 28pt"],
    .container > .box-content [style*="font-size:28pt"],
    .container > .box-content [style*="font-size: 28pt"] {
        font-size: 15.2px !important;
    }

    .shop-content-display [style*="font-size:30pt"],
    .shop-content-display [style*="font-size: 30pt"],
    .container > .box-content [style*="font-size:30pt"],
    .container > .box-content [style*="font-size: 30pt"] {
        font-size: 15.7px !important;
    }

    .shop-content-display [style*="font-size:32pt"],
    .shop-content-display [style*="font-size: 32pt"],
    .container > .box-content [style*="font-size:32pt"],
    .container > .box-content [style*="font-size: 32pt"] {
        font-size: 16.1px !important;
    }

    .shop-content-display [style*="font-size:36pt"],
    .shop-content-display [style*="font-size: 36pt"],
    .container > .box-content [style*="font-size:36pt"],
    .container > .box-content [style*="font-size: 36pt"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:40pt"],
    .shop-content-display [style*="font-size: 40pt"],
    .container > .box-content [style*="font-size:40pt"],
    .container > .box-content [style*="font-size: 40pt"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:44pt"],
    .shop-content-display [style*="font-size: 44pt"],
    .container > .box-content [style*="font-size:44pt"],
    .container > .box-content [style*="font-size: 44pt"] {
        font-size: 17px !important;
    }

    .shop-content-display [style*="font-size:48pt"],
    .shop-content-display [style*="font-size: 48pt"],
    .container > .box-content [style*="font-size:48pt"],
    .container > .box-content [style*="font-size: 48pt"] {
        font-size: 17px !important;
    }
}


/* ── 5. หัวข้อหน้า (page-h1) ต้องชนะกฎข้อ 4 ────────────────────────────
   h1 มี font-size:28px แบบ inline จึงถูกกฎข้อ 4 จับไปด้วย
   แต่หัวข้อหน้าควรใหญ่กว่าเนื้อความชัด ๆ จึงเขียนทับด้วยตัวเลือกที่เจาะจงกว่า
   ตั้งไว้ที่เพดานของช่วงในข้อ 4 (17px) เพื่อไม่ให้เล็กกว่าหัวข้อในเนื้อหา */
@media (max-width: 768px) {
    .container > .box-content h1.page-h1,
    .shop-content-display h1.page-h1,
    h1.page-h1 {
        font-size: 17px !important;
    }
}

@media (max-width: 576px) {
    .container > .box-content h1.page-h1,
    .shop-content-display h1.page-h1,
    h1.page-h1 {
        font-size: 16px !important;
    }
}


/* ══ 6. ปรับหน้าแรกรอบ 09-08 (บ่าย) ═══════════════════════════════════
   user สั่ง 3 เรื่อง: โครงการ 2 → 2.5 ใบ · การ์ดโครงการเหลือแค่ชื่อ ·
   วิดีโอชิดกับสินค้า/ข่าวมากขึ้น
   ต้องอยู่ท้ายไฟล์เพราะเขียนทับกฎในข้อ 3 ที่ตัวเลือกเท่ากัน */
@media (max-width: 768px) {

    /* ── 6.1 โครงการ 2.5 คอลัมน์ต่อหน้าจอ ──────────────────────────────
       เห็นเต็ม 2 ใบ + โผล่ครึ่งใบที่ 3 (user ยืนยัน 2 รอบว่าเอา 2.5)
       สูตรเดียวกับแถวบทความที่ตั้ง 1.5 ใบ — 2.5 ใบคร่อมช่องว่าง 2 ช่อง
       ปุ่มลูกศรไม่ต้องแก้ JS อ่านความกว้างการ์ดจริงอยู่แล้ว */
    .project-carousel .project-slider {
        grid-auto-columns: calc((100% - 24px) / 2.5);
    }

    /* ── 6.2 การ์ดโครงการเหลือแค่ชื่อเรื่อง ─────────────────────────────
       ตัดคำโปรยกับปุ่ม "ดูเพิ่มเติม >" ออก การ์ดแคบลงเหลือ ~145px
       ข้อความสองบรรทัดนั้นถูกตัดจนอ่านไม่รู้เรื่องอยู่แล้ว */
    .project-card .project-text,
    .project-card .learn-more {
        display: none !important;
    }

    .project-body {
        padding-bottom: 8px;
    }

    /* ── 6.3 บีบช่องว่างรอบกล่องวิดีโอ ─────────────────────────────────
       เดิมทุกบล็อกเว้น padding 24px + margin-bottom 48px เท่ากันหมด
       ช่องว่างจริงระหว่างคลิปกับหัวข้อถัดไปจึงกว้างถึง ~116px
       บีบเฉพาะคู่ สินค้า → วิดีโอ → ข่าว ตามที่ user ชี้ */
    .block-video {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }

    .block-video .box-content {
        padding-bottom: 0 !important;
    }

    .block-video .video-row {
        padding-top: 4px;
        padding-bottom: 6px;
    }

    /* บล็อกที่อยู่เหนือวิดีโอ (สินค้า) — ตัดระยะใต้กล่องลงด้วย
       ไม่งั้นบีบข้างล่างข้างเดียวแล้วดูเบี้ยว */
    .block-product {
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 768px) {
    /* หัวข้อ "ข่าวสารล่าสุด" ยังถูกดันลงด้วย padding 24px ของบล็อกตัวเอง
       ลดลงอีกชั้น ให้ต่อจากแถวคลิปเลย (ต่อจากข้อ 6.3) */
    .block-news {
        padding-top: 10px !important;
    }
}

@media (max-width: 768px) {
    /* ป้าย NEW — การ์ดบนมือถือกว้างแค่ ~110-180px ป้ายขนาดจอใหญ่จึงล้นเกินครึ่งใบ */
    .new-badge {
        top: 6px;
        left: 6px;
        padding: 2px 6px;
        font-size: 10px;
        border-radius: 3px;
    }
}

/* ══ 7. โครงการ — ให้เท่าหมวดอื่น (09-08 รอบเย็น) ═══════════════════════ */
@media (max-width: 768px) {

    /* 🔑 ต้นเหตุ "ส่วนโครงการซ้าย-ขวาไม่เท่าหมวดอื่น" แก้ที่ต้นทางแล้ว
       (components/content.css — เลิกใช้ width:100vw + margin -50vw
        และตัด padding ซ้าย-ขวา 20px ของ .box-content-shop)
       เหลือที่นี่แค่ margin 10px ของแถวเลื่อนที่ใส่ไว้เฉพาะมือถือตอนรอบ 2 */
    .block-project .project-carousel {
        margin-left: 0;
        margin-right: 0;
    }

    /* การ์ดโครงการรูปสูงขึ้นอีกนิด
       75% → 85% ของความกว้าง */
    .project-image-wrapper {
        padding-top: 85%;
    }

    /* ชื่อโครงการตัวใหญ่ไป เห็นข้อความได้น้อยมาก — ลด 30% (.95 → .67rem)
       แล้วเพิ่มบรรทัดที่แสดงจาก 2 เป็น 3 เพื่อใช้ที่ว่างที่ได้คืนมา */
    .project-title {
        font-size: .67rem;
        -webkit-line-clamp: 3;
        line-height: 1.35;
    }
}

/* ══ 8. ตารางในเนื้อหา — ย่อทั้งตารางให้พอดีจอ แทนการแตกเป็นแนวตั้ง (09-10) ══════
   user แจ้ง: ตารางเปรียบเทียบในหน้า detail บนมือถือ "ทับกันมั่วมาก"
   ต้นเหตุ: CSS หน้า detail 4 ไฟล์ (Blog / idia ซึ่ง news ใช้ด้วย / product / project)
   สั่ง table/tr/td เป็น display:block เพื่อเรียงแนวตั้ง แต่ช่องที่ก๊อปมาจาก Docs มี height ติดมา
   ในตาราง height เป็นแค่ขั้นต่ำ (จอคอมไม่เคยทับ) · พอเป็น block มันกลายเป็นความสูงตายตัว
   ข้อความล้นลงไปทับแถวถัดไป
   ⇒ คืนรูปตารางแบบจอคอม แล้วบีบให้พอดีจอ · ถ้ายังกว้างเกิน สคริปต์ท้าย template/footer.php ย่อด้วย zoom

   ⚠️ เฉพาะตารางที่ไม่มีรูป — ตารางที่มีรูปคือตารางจัดหน้า (รูปช่องหนึ่ง ข้อความอีกช่อง เช่นหน้าโครงการ KIS)
      แบบเรียงแนวตั้ง "รูปบน ข้อความล่าง" ของเดิมเหมาะกับมันอยู่แล้ว ถ้าย่อทั้งตาราง รูปจะเหลือครึ่งจอ
   🔑 .shop-content-display ซ้ำสองครั้งตั้งใจ — ต้องเจาะจงกว่า `table td[style]` ในไฟล์หน้า detail
      (:has(img) ทำให้เหลือ class เดียว แพ้ [style] ทั้งที่ไฟล์นี้โหลดทีหลัง) */
@media (max-width: 768px) {

    /* ย่อสุดแล้วยังไม่พอ = เลื่อนซ้ายขวาได้ ดีกว่าโดนตัดทิ้ง (.shop-content-display ตั้ง overflow-x:hidden) */
    .shop-content-display .table-responsive-wrap {
        overflow-x: auto !important;
    }

    .shop-content-display.shop-content-display table:not(:has(img)) {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        font-size: 12px;
    }

    .shop-content-display.shop-content-display table:not(:has(img)) thead {
        display: table-header-group !important;
    }

    .shop-content-display.shop-content-display table:not(:has(img)) tbody {
        display: table-row-group !important;
        width: auto !important;
    }

    .shop-content-display.shop-content-display table:not(:has(img)) tr {
        display: table-row !important;
        width: auto !important;
        height: auto !important;
    }

    /* width ของช่องที่ติดมา (pt รวมกันเกินจอ) ต้องปลด ไม่งั้นตารางดันออกนอกจอ */
    .shop-content-display.shop-content-display table:not(:has(img)) td,
    .shop-content-display.shop-content-display table:not(:has(img)) th {
        display: table-cell !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        padding: 6px 5px !important;
        /* ไฟล์หน้า detail ตั้ง break-word ไว้ ⇒ คอลัมน์แคบแล้วคำโดนหั่นกลางคำ ("characteristic-s")
           ห้ามหั่นคำ ตารางกว้างเกินเมื่อไหร่ให้สคริปต์ zoom ย่อทั้งตารางแทน */
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* ขนาดตัวหนังสือที่ฝังมากับเนื้อหา — ในตารางใช้ขนาดเดียวกันหมด ไม่งั้นคอลัมน์ไม่พอ
       (ชนะกฎขนาดรายค่าในส่วน 4 เพราะเจาะจงกว่า) ตัวหนายังหนาเหมือนเดิม */
    .shop-content-display.shop-content-display table:not(:has(img)) [style*="font-size"] {
        font-size: inherit !important;
    }
}