/* ============================
   Error page – center & responsive width
   ============================ */

.cios-error-shell {
  min-height: 65vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* ค่า default = มือถือเป็นหลัก */
.cios-error-box {
  width: 100%;
  max-width: 480px;   /* มือถือ / จอเล็ก */
  padding: 0 15px;
}

/* iPad / Tablet (แนวตั้ง–แนวนอน) */
@media (min-width: 768px) {
  .cios-error-shell {
    min-height: 70vh;
  }

  .cios-error-box {
    max-width: 620px;  /* กว้างขึ้นหน่อยสำหรับ tablet / จอ md */
    padding: 0 20px;
  }
}

/* Desktop จอใหญ่ (Bootstrap lg ขึ้นไป) */
@media (min-width: 1200px) {
  .cios-error-box {
    max-width: 720px;  /* ขยายอีกนิดให้ดูเต็มตา */
  }
}


/* =========================================
   CIOS Footer – skin ใหม่ ซ้อนบน .page-footer เดิม
   ==========================================*/

.page-footer.cios-footer {
    /* ใช้พื้นฐานเดิม แต่ให้ยืดสูงได้ */
    height: auto;
    min-height: 52px;
    padding-top: 10px;
    padding-bottom: 10px;

    /* เดิมมี padding-left: 233px ไว้ชดเชยเมนูซ้าย
       ถ้า layout เดิมยังใช้ก็ปล่อยไว้ได้ */
    background: linear-gradient(90deg, #1f2937, #020617);
    border-top: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.5);
}

.cios-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ฝั่งซ้าย: โลโก้ + ชื่อระบบ */
.cios-footer-main {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.cios-footer-icon {
    font-size: 20px;
    color: #60a5fa;
}

/* ฝั่งขวา: meta เล็ก ๆ */
.cios-footer-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 12px;
    color: #cbd5f5;
}

.cios-footer-meta-item i {
    margin-right: 4px;
    font-size: 16px;
    vertical-align: middle;
}

.cios-footer-meta-sep {
    opacity: 0.55;
}

/* ข้อความหลัก */
.cios-footer-text {
    color: #e5e7eb;
}

/* -----------------------------
   Responsive – Tablet / Mobile
   -----------------------------*/

@media (max-width: 991px) {
    .page-footer.cios-footer {
        padding-left: 13px; /* ลด offset จากเมนูซ้ายบนจอเล็ก */
    }

    .cios-footer-inner .row > div {
        text-align: center;
    }

    .cios-footer-main,
    .cios-footer-meta {
        justify-content: center;
    }

    .cios-footer-meta {
        margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .cios-footer-main {
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
    }

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

/* CIOS Footer – layout row ให้เสมอกัน */
.cios-footer-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/* ฝั่งซ้ายเดิม */
.cios-footer-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
}

/* ฝั่งขวา – ใช้ชื่อหน่วยงาน ไม่มีปี */
.cios-footer-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;

    gap: 6px;
    font-size: 13px;
    color: #e5e7eb;
}

.cios-footer-meta i {
    font-size: 18px;
    color: #93c5fd;
}

/* Responsive – ซ้อนสองบรรทัดบนจอเล็ก */
@media (max-width: 991px) {
    .page-footer.cios-footer {
        padding-left: 13px;
    }

    .cios-footer-row {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cios-footer-meta {
        justify-content: center;
        margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .cios-footer-main {
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
    }
}

.cios-footer-meta .cios-footer-link {
    color: #e5e7eb;
    text-decoration: none;
}

.cios-footer-meta .cios-footer-link:hover,
.cios-footer-meta .cios-footer-link:focus {
    color: #ffffff;
    text-decoration: underline;
}

/* Desktop จอใหญ่ – ให้ footer เต็มความกว้าง และจัดซ้าย/ขวา */
@media (min-width: 1200px) {
    .page-footer.cios-footer .cios-footer-inner {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0 15px;  /* กันชนซ้ายขวานิดหน่อย */
    }

    .page-footer.cios-footer .cios-footer-row {
        justify-content: space-between; /* ซ้าย-ขวาตึงเต็มแถว */
    }

    .page-footer.cios-footer .cios-footer-main {
        justify-content: flex-start;    /* ฝั่งชื่อระบบชิดซ้าย */
    }

    .page-footer.cios-footer .cios-footer-meta {
        justify-content: flex-end;      /* ฝั่ง "สำนักงานศาลยุติธรรม" ชิดขวา */
    }
}