@charset "utf-8";

        /* --- 1. สไตล์ส่วนแสดงรูปภาพ (Gallery) --- */
        .img-review-home {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
        }

        .img-review-home img {
            cursor: pointer;
            object-fit: cover; /* ทำให้รูปไม่เบี้ยวเมื่อกำหนดความสูง */
            border-radius: 8px;
            transition: transform 0.3s ease;
            display: block;
        }

        /* ปรับขนาดตามอุปกรณ์ (Responsive) */
        @media screen and (min-width: 1024px) { /* คอมพิวเตอร์: 3 รูป */
            .img-review-home img { width: calc(33.33% - 20px); height: 200px; }
        }
        @media screen and (max-width: 1023px) and (min-width: 600px) { /* แท็บเล็ต: 3 รูป */
            .img-review-home img { width: calc(33.33% - 20px); height: 150px; }
        }
        @media screen and (max-width: 599px) { /* มือถือ: 1 รูปเต็ม */
            .img-review-home img { width: calc(35% - 20px); height: auto; }
        }

        .img-review-home img:hover {
            transform: scale(1.02);
            filter: brightness(0.9);
        }

        /* --- 2. สไตล์ส่วน Popup (Modal) --- */
        .modal {
	display: none; /* ซ่อนไว้เริ่มต้น */
	position: fixed;
	z-index: 99999999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8); /* พื้นหลังดำโปร่งแสง */
	backdrop-filter: blur(10px); /* เอฟเฟกต์พื้นหลังมัว */
	-webkit-backdrop-filter: blur(10px);
	justify-content: center;
	align-items: center;
	animation: fadeIn 0.3s ease;
        }

        .modal-content {
            max-width: 90%;
            max-height: 85vh;
            border-radius: 5px;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            border: 3px solid white;
        }

        /* ปุ่มปิด — class เฉพาะของ review.php (กัน conflict กับ .close-btn ของ notiPopup ใน content-all.css) */
        .img-modal-close {
            position: absolute;
            top: 20px;
            right: 25px;
            color: #fff;
            font-size: 50px;
            font-weight: normal;
            cursor: pointer;
            line-height: 0.5;
            z-index: 1000002;
            padding: 20px;
            background: none;
            border: none;
            transition: transform 0.15s ease, color 0.15s ease;
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
        }

        .img-modal-close:hover {
            transform: scale(1.2);
            color: #FDE594;
        }

        /* Animation ตอนเปิด */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Mobile/Tablet */
        @media screen and (max-width: 768px) {
            .img-modal-close { top: 12px; right: 12px; font-size: 50px; padding: 15px; }
        }
        /* CSS Document */