.projects-page{font-family:'Kanit',sans-serif;color:#343b46;background:linear-gradient(180deg,#fffaf6 0,#fff 300px)}
.projects-hero{padding-top:66px;padding-bottom:35px}.projects-eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;color:#ee7838;margin-bottom:10px}.projects-hero h1{font-weight:600;font-size:clamp(28px,4vw,42px);margin-bottom:12px}.projects-hero p{color:#7f8998;max-width:780px;font-size:15px}
.projects-filters{background:#fff;border:1px solid #f3e2d5;border-radius:20px;padding:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;box-shadow:0 10px 36px rgba(38,39,42,.035)}.projects-filters label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:#525a68}.projects-filters .form-control,.projects-filters .form-select{border:1px solid #e9dcd2;border-radius:10px;min-height:43px;font-size:13px}.projects-filters .form-control:focus,.projects-filters .form-select:focus{border-color:#ee7838;box-shadow:0 0 0 .2rem rgba(238,120,56,.12)}.projects-filter-search{grid-column:span 2}.projects-filter-actions{display:flex;gap:8px;align-items:end}.btn-project-search,.btn-project-clear{min-height:43px;display:inline-flex;justify-content:center;align-items:center;padding:10px 16px;border-radius:10px;text-decoration:none;font-size:13px;white-space:nowrap}.btn-project-search{border:1px solid #ee7838;background:#ee7838;color:#fff}.btn-project-search:hover{background:#d96327;color:#fff}.btn-project-clear{border:1px solid #ead9cc;background:#fff;color:#6e7784}.btn-project-clear:hover{background:#fff5ee;color:#d96327}
.projects-results-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:32px 0 20px}.projects-results-bar h2{font-size:21px;font-weight:600;margin:0}.projects-results-bar p{font-size:13px;color:#8a929d;margin:5px 0 0}.projects-view-switch{display:flex;border:1px solid #efdfd4;border-radius:10px;padding:3px;gap:3px}.projects-view-switch button{border:0;background:transparent;border-radius:7px;padding:8px 14px;font-size:13px;color:#657080}.projects-view-switch button.is-active{background:#ee7838;color:#fff}
.projects-collection.is-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.project-explorer-card{background:#fff;border:1px solid #f0e1d7;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .22s ease,box-shadow .22s ease}.project-explorer-card:hover{transform:translateY(-4px);box-shadow:0 12px 35px rgba(38,39,42,.09)}.project-explorer-media{width:100%;aspect-ratio:16/10;overflow:hidden;background:#fff4ec}.project-explorer-media img{width:100%;height:100%;object-fit:cover;display:block}.project-image-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#c08c70;background:linear-gradient(135deg,#fff4e9,#f8eee8)}.project-image-fallback[hidden]{display:none}.project-image-fallback span{font-size:48px;line-height:1}.project-image-fallback small{font-size:12px}.project-explorer-content{padding:20px;display:flex;flex-direction:column;gap:14px;flex:1}.project-explorer-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.project-plan-tag{background:#fff0e6;color:#c96329;border-radius:6px;padding:5px 8px;font-size:11px}.project-status-tag{background:#f2f5f4;color:#526c61;border-radius:6px;padding:5px 8px;font-size:11px}.project-explorer-content h3{font-size:17px;font-weight:500;line-height:1.55;margin:0;overflow-wrap:anywhere}.project-explorer-meta{display:flex;flex-direction:column;gap:6px;color:#7b8593;font-size:12px}.project-explorer-bottom{border-top:1px solid #f3e9e1;padding-top:14px;margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:12px}.project-explorer-bottom small{display:block;color:#8b929c;font-size:11px}.project-explorer-bottom strong{font-size:16px;color:#ee7838;font-weight:600}.project-detail-link{font-size:12px;text-decoration:none;color:#d96b30;white-space:nowrap}.project-detail-link:hover{text-decoration:underline;color:#b9511e}
.projects-collection.is-list{display:flex;flex-direction:column;gap:14px}.is-list .project-explorer-card{flex-direction:row}.is-list .project-explorer-media{width:250px;aspect-ratio:auto;flex-shrink:0}.is-list .project-explorer-content{padding:20px}.is-list .project-explorer-content h3{font-size:19px}.projects-pagination{display:flex;justify-content:center;gap:8px;margin:30px 0}.projects-pagination a{border:1px solid #ecdccd;color:#69717c;border-radius:9px;min-width:39px;padding:8px 12px;text-decoration:none;text-align:center;font-size:13px}.projects-pagination a.is-active,.projects-pagination a:hover{background:#ee7838;border-color:#ee7838;color:#fff}.projects-empty{text-align:center;padding:70px 20px;background:#fff;border:1px dashed #eddacc;border-radius:18px}.projects-empty-icon{font-size:50px;color:#ee7838}.projects-empty h3{font-size:19px}.projects-empty p{color:#7c8795;font-size:14px}.projects-empty .btn-project-search{margin-top:10px}
@media(max-width:991px){.projects-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.projects-collection.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.projects-hero{padding-top:36px}.projects-filters{grid-template-columns:1fr}.projects-filter-search{grid-column:span 1}.projects-filter-actions{flex-wrap:wrap}.projects-collection.is-grid{grid-template-columns:1fr}.is-list .project-explorer-card{flex-direction:column}.is-list .project-explorer-media{width:100%;aspect-ratio:16/10}.projects-results-bar{align-items:flex-start;flex-direction:column}.project-explorer-bottom{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.project-explorer-card{transition:none}}

/* สีสถานะโครงการตามค่าจริงจากฐานข้อมูล */
.projects-page .project-status-tag.status-completed { background:#E8F7EE; color:#16803C; border:1px solid #B8E5C7; }
.projects-page .project-status-tag.status-progress { background:#EAF3FF; color:#2563EB; border:1px solid #BFDBFE; }
.projects-page .project-status-tag.status-pending { background:#FFF4E5; color:#B45309; border:1px solid #FCD9A5; }
.projects-page .project-status-tag.status-neutral { background:#F2F5F4; color:#526C61; border:1px solid #E1E7E3; }

/* ยังไม่ได้ดำเนินการ */
.project-status-tag.status-pending {
    background-color: #FFF4E5 !important;
    color: #B45309 !important;
    border: 1px solid #FCD9A5;
}

/* กำลังดำเนินการ */
.project-status-tag.status-progress {
    background-color: #EAF3FF !important;
    color: #2563EB !important;
    border: 1px solid #BFDBFE;
}

/* ดำเนินการเสร็จสิ้น */
.project-status-tag.status-completed {
    background-color: #E8F7EE !important;
    color: #16803C !important;
    border: 1px solid #B8E5C7;
}