html, body {
    filter: grayscale(50%) !important;
}

/* จัดเมนูหลักให้เรียงเป็นแถวเดียว (ไม่ตกบรรทัด) สำหรับจอที่ไม่ใช่มือถือ */
@media (min-width: 768px) {
    /* ul ของ DJ-MegaMenu (ดูจาก inspect ว่า id = dj-megamenu138) */
    #dj-megamenu138 {
        display: flex !important;
        flex-wrap: nowrap !important;      /* ห้ามขึ้นบรรทัดใหม่ */
        justify-content: space-between;    /* กระจายเมนูให้เต็มแถว */
    }

    /* แต่ละเมนู */
    #dj-megamenu138 > li {
        float: none !important;            /* ยกเลิก float เดิมของ DJ-MegaMenu */
        flex: 1 1 auto;                    /* ให้บีบตัวลงได้บ้างเวลาหน้าจอแคบ */
        white-space: nowrap;               /* ข้อความในเมนูไม่ตัดขึ้นบรรทัดใหม่ */
        text-align: center;                /* ตัวหนังสืออยู่กลางช่องเมนู */
    }
}

/* ซ่อน position promote และให้เมนูยืดเต็มแถวแทน */
#promote {
    display: none !important;
}

/* ให้แถวของเมนูยืดเต็มเมื่อไม่มี promote */
#menu {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;    /* เผื่อกรณีใช้ flex */
}

.bookeffect {
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* ตอนเอาเมาส์ชี้ */
.bookeffect:hover {
    transform: scale(0.96); /* ยุบลงเล็กน้อย */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* ตอนคลิกให้ยุบลงมากขึ้น */
.bookeffect:active {
    transform: scale(0.92); /* กดลงไปอีก */
}

/* =========================
   ค่าเริ่มต้น (จอใหญ่)
   ========================= */
.iconc {
    display: inline-block;
    text-align: center;
}

/* รูปด้านใน iconc */
.iconc img {
    display: block;
    margin: 0 auto;
}

/* =========================
   จอโทรศัพท์ (แนวตั้ง)
   ========================= */
@media (max-width: 768px) {

    /* ให้ทุกกล่องที่มี iconc เรียงแนวตั้ง กึ่งกลาง และกินเต็มแถว */
    .iconc {
        display: block !important;
        width: 100% !important;       /* ให้เต็มความกว้าง */
        max-width: 420px;             /* จำกัดไม่ให้ใหญ่เกินไป */
        margin: 0 auto 20px !important;
        text-align: center !important;
    }

    .iconc img {
        width: 100% !important;       /* รูปกว้างเต็มกล่อง */
        height: auto !important;
    }
}

/* ปิดทุกเอฟเฟกต์ของรูปในโมดูล ID 147 (รูปซีอีโอ) แบบเด็ดขาด */
#module-147,
#module-147 * {
    animation: none !important;
    transition: none !important;
}

#module-147 img,
#module-147 img:hover {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* ตัด effect hover เฉพาะบล็อกรูปผู้บริหารอันนี้ */
#ID1751871153225.cktype,
#ID1751871153225.cktype:hover,
#ID1751871153225.cktype:focus,
#ID1751871153225.cktype:active {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}

/* กันกรณีไปใส่ effect ไว้ที่รูปข้างใน */
#ID1751871153225.cktype img,
#ID1751871153225.cktype:hover img {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}

/* จัดรูปให้อยู่กึ่งกลางบนมือถือ */
@media (max-width: 768px) {
    #ID1751871153225.cktype img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}

/* โบว์ไว้อาลัยมุมซ้ายบนแบบไม่ใช้โมดูลเลย */
/* ===== โบว์ไว้อาลัยแบบ CSS-only ไม่ใช้ Module ===== */

html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 180px;                     /* ขนาดโบว์ ปรับตามต้องการ */
    height: 390px;                    /* สัดส่วนรูปแบบยาว */
    background-image: url("/images/banners/ribbon-v2.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    z-index: 999999 !important;       /* อยู่บนสุดของทุก element */
    pointer-events: none;             /* ไม่บังการคลิกเมนู */
}

/* มือถือ */
@media (max-width: 768px) {
    html::before {
        width: 90px;
        height: 270px;
        top: 0;
        left: 0;
    }
}

/* กรอบใหญ่ */
.law-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ตารางแบบ 75 / 25 */
.law-container table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;   /* บังคับให้ใช้สัดส่วนที่กำหนด */
}

/* คอลัมน์เรื่อง = 75% */
.law-container td:first-child,
.law-container th:first-child {
    width: 75%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    padding: 10px;
    vertical-align: top;
}

/* คอลัมน์สถานะ = 25% */
.law-container td:nth-child(2),
.law-container th:nth-child(2) {
    width: 25%;
    text-align: center;
    white-space: nowrap;
    padding: 10px;
    vertical-align: top;
    font-weight: bold;
}

/* รูปไม่ล้น */
.law-container img {
    max-width: 100%;
    height: auto;
}