/* ==========================================================================
   path: public/layouts/theme2/css/custom.css
   ส่วนตกแต่งการ์ดข่าว (News Card)
   ใช้กับหน้ารวมข่าว / ข่าวกิจกรรม
   ========================================================================== */

/* รูปภาพในการ์ดข่าว
   - มุมโค้งมน
   - บังคับอัตราส่วนให้สวยสม่ำเสมอทุกข่าว */
.news-card img {
    border-radius: 20px;
    /* มุมโค้ง */
    object-fit: cover;
    /* ครอบภาพไม่ยืด */
    width: 100%;
    height: 320px;
    /* ความสูงรูปมาตรฐาน */
}

/* แถบ meta ใต้รูป (วันที่ / จำนวนผู้ชม) */
.news-meta {
    font-size: 0.875rem;
    /* ตัวอักษรเล็กกว่าปกติ */
    color: #555;
    /* เทาเข้ม อ่านง่าย */
    margin-top: 15px;
}

/* ชื่อหัวข้อข่าว */
.card-news-title {
    font-size: 1.2rem;
    font-weight: 600;
    /* เน้นหัวข้อ */
    line-height: 1.4;
}

/* ลิงก์ภายในการ์ดข่าว */
.news-card a {
    color: #282828;
    /* สีข้อความหลัก */
    text-decoration: none;
    /* ไม่มีเส้นใต้ */
}

/* hover ที่ชื่อข่าว */
.news-card a:hover {
    color: #0d6efd;
    /* น้ำเงิน bootstrap (สื่อว่าคลิกได้) */
}



/* ==========================================================================
   path: public/layouts/theme2/css/datepicker-inputgroup-lg.css
   Datepicker สำหรับ form-control-lg
   - ใช้กับ input-group ที่มี icon ปฏิทิน (fa-calendar)
   - เน้นความเป็นทางการ เรียบร้อย เท่ากันทั้งฟอร์ม
   ========================================================================== */

/* input-group หลัก
   - บังคับให้ input และ icon สูงเท่ากัน */
.input-group.input-datepicker {
    align-items: stretch;
}

/* ช่อง input วันที่
   - ล็อกความสูง 48px (มาตรฐาน form-control-lg)
   - ปรับ border-radius เฉพาะฝั่งซ้าย */
.input-group.input-datepicker .form-control.form-control-lg {
    height: 48px;
    border-radius: 12px 0 0 12px;
}

/* กล่อง icon ปฏิทิน (ด้านขวา)
   - ทำหน้าที่เหมือนปุ่ม
   - ความสูงเท่ากับ input */
.input-group.input-datepicker .input-group-addon.open-datepicker {
    width: 56px;
    /* ความกว้างปุ่ม */
    height: 48px;
    /* ล็อกความสูง */
    display: flex;
    align-items: center;
    /* จัด icon กึ่งกลางแนวตั้ง */
    justify-content: center;
    /* จัด icon กึ่งกลางแนวนอน */

    background-color: #fff;
    border: 1px solid #dee2e6;
    border-left: 0;
    /* ไม่ให้ซ้อน border กับ input */
    border-radius: 0 12px 12px 0;

    cursor: pointer;
    user-select: none;
    /* ป้องกันการ select */
}

/* hover เมื่อเอาเมาส์ชี้ */
.input-group.input-datepicker .input-group-addon.open-datepicker:hover {
    background-color: #f8f9fa;
}

/* active ตอนคลิก */
.input-group.input-datepicker .input-group-addon.open-datepicker:active {
    background-color: #e9ecef;
}

/* icon ปฏิทิน
   - ขยายให้เหมาะกับ LG
   - ใช้สี text-secondary (สุภาพ ทางการ) */
.input-group.input-datepicker .open-datepicker .fa-calendar {
    font-size: 24px;
    line-height: 1;
    color: #6c757d;
    /* text-secondary */
}



/* ==========================================================================
   path: public/layouts/theme2/css/buttons-theme2.css
   Theme2 Button Style (Government / Official)
   ใช้กับปุ่มค้นหา และปุ่มหลักของเว็บไซต์
   ========================================================================== */

/* -------------------------
   ปุ่มหลักของ theme2
   ------------------------- */
.btn-filter2 {
    /* ตัวแปรสี (ปรับง่ายในอนาคต) */
    --btn-bg: #1f3c88;
    /* น้ำเงินกรมท่า */
    --btn-bg-hover: #162f6b;
    /* hover */
    --btn-bg-active: #102a6a;
    /* active */

    background-color: var(--btn-bg);
    border-color: var(--btn-bg);
    color: #ffffff;

    font-weight: 500;
    border-radius: 12px;
    transition: all .2s ease-in-out;
}

/* hover */
.btn-filter2:hover {
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    color: #ffffff;
}

/* active / pressed */
.btn-filter2:active,
.btn-filter2.active {
    background-color: var(--btn-bg-active);
    border-color: var(--btn-bg-active);
}

/* focus-visible
   - รองรับ accessibility
   - ใช้ ring สุภาพ ไม่ฉูดฉาด */
.btn-filter2:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(31, 60, 136, 0.25);
}

/* disabled */
.btn-filter2:disabled,
.btn-filter2.disabled {
    background-color: #adb5bd;
    border-color: #adb5bd;
    color: #ffffff;
    cursor: not-allowed;
}

/* -------------------------
   ปุ่มขนาดใหญ่ (btn-lg)
   - ความสูงเท่ากับ form-control-lg
   ------------------------- */
.btn-filter2.btn-lg {
    height: 48px;
    padding: 0 1.5rem;
    font-size: 1.1rem;
}