/* สไตล์เสริมเล็กน้อยให้เหมือนตัวอย่าง Portfolio */
 .portfolio .portfolio-filters {
     list-style: none;
     margin: 0 0 20px 0;
     padding: 0;
     display: flex;
     gap: .5rem;
     flex-wrap: wrap;
     justify-content: center;
 }

 .portfolio .portfolio-filters li {
     cursor: pointer;
     padding: .4rem .8rem;
     border-radius: 999px;
     border: 1px solid #e5e7eb;
     font-size: 14px
 }

 .portfolio .portfolio-filters li.filter-active {
     background: #111;
     color: #fff;
     border-color: #111;
 }

 .portfolio .portfolio-item {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
 }

 .portfolio .portfolio-item img {
     width: 100%;
     height: auto;
     display: block;
     transform: scale(1);
     transition: transform .7s ease, filter .35s ease
 }

 .portfolio .portfolio-item:hover img {
     transform: scale(1.12)
 }

 .portfolio .portfolio-info {
     position: absolute;
     inset: auto 0 0 0;
     padding: 10px 12px;
     background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
     color: #fff;
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: .5rem
 }

 .portfolio .portfolio-info .meta {
     font-size: 12px;
     opacity: .9
 }

 .portfolio .portfolio-info .actions a {
     display: inline-flex;
     padding: .35rem;
     border-radius: 12px;
     background: rgba(0, 0, 0, .45)
 }

 .portfolio .portfolio-info .actions a:hover {
     background: rgba(0, 0, 0, .65)
 }

 .portfolio .portfolio-filters li:hover,
 .portfolio .portfolio-filters li.filter-active {
     color: var(--color-inverse);
     background-color: var(--color-primary);
     border: 1px solid var(--color-primary);
 }

 /* lazy blur-up */
 .blur-up {
     filter: blur(8px);
     transform: scale(1.02);
     transition: filter .35s ease, transform .35s ease
 }

 .blur-up.is-loaded {
     filter: blur(0);
     transform: scale(1)
 }

 /* สีกรอบภาพที่เลือกใน Fancybox thumbs */
 .fancybox__thumbs .carousel__slide .fancybox__thumb::after {
     border-color: #e40000;
 }



 /* สไตล์พอร์ตโฟลิโอแบบ Append */
 .portfolio .portfolio-item {
     position: relative;
     overflow: hidden;
 }

 .portfolio .portfolio-item img {
     width: 100%;
     height: auto;
     display: block;
 }

 .portfolio .portfolio-info {
     opacity: 0;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, .65);
     color: #fff;
     padding: 15px;
     transition: opacity .25s ease;
 }

 .portfolio .portfolio-item:hover .portfolio-info {
     opacity: 1;
 }

 .portfolio .portfolio-info h4 {
     font-size: 16px;
     margin: 0;
 }

 .portfolio .portfolio-info p {
     font-size: 13px;
     margin: 0 0 8px;
     opacity: .85;
 }

 .portfolio .portfolio-info .preview-link,
 .portfolio .portfolio-info .details-link {
     line-height: 0;
     font-size: 20px;
     color: #fff;
 }

 .portfolio .portfolio-filters {
     list-style: none;
     padding: 0;
     margin: 0 0 20px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .portfolio .portfolio-filters li {
     cursor: pointer;
     padding: 6px 12px;
     font-size: 14px;
     background: #f1f1f1;
     border-radius: 20px;
     user-select: none;
 }

 .portfolio .portfolio-filters .filter-active {
     background: #dc2626;
     color: #fff;
 }

 .badge-soft {
     background: rgba(255, 255, 255, .15);
     border: 1px solid rgba(255, 255, 255, .25);
 }


 /* ====== โครงการ์ด ====== */
 .portfolio .portfolio-card {
     background: #fff;
     border-radius: 12px;
     ;
     overflow: hidden;
     /* กันภาพล้นทั้งหมด */
     box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 /* ====== โซนรูป ====== */
 .portfolio .portfolio-img {
     position: relative;
     overflow: hidden;
     isolation: isolate;
     border-radius: 12px;
 }

 .portfolio .portfolio-img img {
     display: block;
     width: 100%;
     height: auto;
     transform-origin: center center;
     transition: transform .45s ease, filter .45s ease;
 }

 /* ชั้นทับมืด */
 .portfolio .portfolio-dim {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .45);
     opacity: 0;
     transition: opacity .35s ease;
     z-index: 1;
     pointer-events: none;
     border-radius: 12px;
 }

 /* ปุ่มไอคอนกลางภาพ */
 .portfolio .portfolio-actions {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%) scale(.96);
     display: flex;
     gap: 12px;
     z-index: 2;
     opacity: 0;
     transition: opacity .35s ease, transform .35s ease;
 }

 .portfolio .portfolio-actions a {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: #fff;
     background: rgba(228, 0, 0, .95);
     /* brand-red โปร่งนิด */
     text-decoration: none;
     box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
     transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
 }

 .portfolio .portfolio-actions a:hover,
 .portfolio .portfolio-actions a:focus-visible {
     background: #b00000;
     transform: translateZ(0) scale(1.06);
     box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
     outline: none;
 }

 /* Hover เอฟเฟกต์รวม */
 .portfolio .portfolio-item:hover .portfolio-img img {
     transform: scale(1.25);
     filter: saturate(1.05);
 }

 .portfolio .portfolio-item:hover .portfolio-dim {
     opacity: 1;
 }

 .portfolio .portfolio-item:hover .portfolio-actions {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
 }

 /* ====== โซนข้อมูลใต้รูป ====== */
 .portfolio .portfolio-info {
     padding: 14px 14px 16px;
 }

 .portfolio .portfolio-title {
     font-size: 1.05rem;
     font-weight: 600;
     margin: 0 0 6px;
     line-height: 1.35;
 }

 /* ====== Badge นุ่ม ๆ ====== */
 .badge.badge-soft {
     --soft: 228, 0, 0;
     background: rgb(255 0 0);
     color: rgb(255 255 255);
     border: 1px solid rgb(228 0 0);
     padding: .35rem .55rem;
     font-weight: 600;
     border-radius: 999px;
     font-size: .85rem;
 }

 /* ====== ปรับแต่งยิบย่อย ====== */
 .portfolio .preview-link i,
 .portfolio .details-link i {
     line-height: 1;
 }

 /* รองรับการโฟกัสจากคีย์บอร์ด */
 .portfolio .portfolio-actions a:focus-visible {
     box-shadow: 0 0 0 3px rgba(228, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .22);
 }

 .portfolio .portfolio-item .portfolio-info h4 {
     padding-right: 0;
     color: white;
 }

 .portfolio .portfolio-item .portfolio-info p {
     padding-right: 0;
 }

 .portfolio .portfolio-info {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .5rem;
     flex-direction: column;
 }

 .portfolio .portfolio-item .portfolio-info {
     background: rgb(0 0 0 / 75%);
     height: 100%;
     border-radius: 12px;
 }


 .portfolio .portfolio-info p {
     opacity: 1;
 }

 .portfolio .portfolio-item .portfolio-info .preview-link,
 .portfolio .portfolio-item .portfolio-info .details-link {
     position: relative;
     right: 0;
     font-size: 14px;
     top: 0;
     color: rgb(255 0 0);
     transition: 0.3s;
     line-height: 0;
     margin-right: 0;
     background: white;
     padding: 5px 10px;
     border-radius: 25px;
     margin-top: 10px;
 }

 .portfolio .portfolio-item .portfolio-info .preview-link:hover,
 .portfolio .portfolio-item .portfolio-info .details-link:hover {
     background: rgb(255 0 0);
     /* พื้นหลังแดง */
     color: #fff;
     /* ตัวอักษร/ไอคอนขาว */
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     transform: translateY(-2px);
     /* ยกขึ้นเล็กน้อย */
 }