{"id":571,"date":"2025-05-18T10:58:12","date_gmt":"2025-05-18T10:58:12","guid":{"rendered":"https:\/\/big5toulkoks.com\/?page_id=571"},"modified":"2025-05-19T15:05:42","modified_gmt":"2025-05-19T15:05:42","slug":"page-1","status":"publish","type":"page","link":"https:\/\/big5toulkoks.com\/index.php\/page-1\/","title":{"rendered":"page 1"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Real Estate Gallery<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n html, body {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n font-family: 'Segoe UI', sans-serif;\n background: #fff;\n scroll-behavior: smooth;\n }\n\n .gallery-wrapper {\n position: relative;\n overflow: hidden;\n overscroll-behavior-x: contain;\n touch-action: pan-x;\n }\n\n .hero-scroll-wrapper {\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n width: 100%;\n aspect-ratio: 16 \/ 9;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n touch-action: pan-x;\n }\n\n .hero-scroll-wrapper::-webkit-scrollbar {\n display: none;\n }\n\n .hero-scroll-wrapper img {\n min-width: 100%;\n height: 100%;\n object-fit: cover;\n scroll-snap-align: center;\n flex-shrink: 0;\n }\n\n .carousel-controls {\n position: absolute;\n top: 50%;\n width: 100%;\n display: flex;\n justify-content: space-between;\n transform: translateY(-50%);\n z-index: 2;\n padding: 0 10px;\n }\n\n .carousel-controls button {\n background-color: rgba(0, 0, 0, 0.3);\n border: none;\n color: #fff;\n font-size: 18px;\n padding: 10px 15px;\n border-radius: 50%;\n cursor: pointer;\n }\n\n .thumbnail-bar {\n display: flex;\n overflow-x: auto;\n gap: 10px;\n padding: 10px;\n background-color: #f9f9f9;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n }\n\n .thumbnail-bar::-webkit-scrollbar {\n display: none;\n }\n\n .thumbnail-bar img {\n aspect-ratio: 16 \/ 9;\n height: 80px;\n object-fit: cover;\n border-radius: 8px;\n cursor: pointer;\n opacity: 0.6;\n transition: all 0.2s;\n flex-shrink: 0;\n }\n\n .thumbnail-bar img.active {\n border: 2px solid #007bff;\n opacity: 1;\n }\n\n .thumbnail-bar img:hover {\n transform: scale(1.05);\n }\n\n @media (max-width: 768px) {\n .thumbnail-bar img {\n height: 60px;\n }\n }\n\n @media (max-width: 480px) {\n .thumbnail-bar img {\n height: 50px;\n }\n\n .carousel-controls button {\n font-size: 22px;\n padding: 8px 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<!-- HERO GALLERY WITH ARROWS -->\n<div class=\"gallery-wrapper\">\n <div class=\"hero-scroll-wrapper\" id=\"heroGallery\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1744.jpg\" alt=\"img1\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1739.jpg\" alt=\"img2\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1747.jpg\" alt=\"img3\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1743.jpg\" alt=\"img4\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1303.jpg\" alt=\"img5\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1738.jpg\" alt=\"img6\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1744.jpg\" alt=\"img1\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1739.jpg\" alt=\"img2\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1747.jpg\" alt=\"img3\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1743.jpg\" alt=\"img4\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1303.jpg\" alt=\"img5\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1738.jpg\" alt=\"img6\">\n <\/div>\n\n <!-- Carousel Controls -->\n <div class=\"carousel-controls\">\n <button onclick=\"scrollGallery(-1)\">❮<\/button>\n <button onclick=\"scrollGallery(1)\">❯<\/button>\n <\/div>\n<\/div>\n\n<!-- THUMBNAILS -->\n<div class=\"thumbnail-bar\" id=\"thumbnailBar\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1744.jpg\" onclick=\"scrollToIndex(0)\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1739.jpg\" onclick=\"scrollToIndex(1)\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1747.jpg\" onclick=\"scrollToIndex(2)\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1743.jpg\" onclick=\"scrollToIndex(3)\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1303.jpg\" onclick=\"scrollToIndex(4)\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1738.jpg\" onclick=\"scrollToIndex(5)\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1744.jpg\" alt=\"img1\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1739.jpg\" alt=\"img2\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1747.jpg\" alt=\"img3\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1743.jpg\" alt=\"img4\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1303.jpg\" alt=\"img5\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1738.jpg\" alt=\"img6\">\n<\/div>\n\n<script>\n const gallery = document.getElementById('heroGallery');\n const thumbnails = document.querySelectorAll('#thumbnailBar img');\n const galleryImages = gallery.querySelectorAll('img');\n let currentIndex = 0;\n\n function scrollToIndex(index) {\n gallery.scrollTo({\n left: galleryImages[index].offsetLeft,\n behavior: 'smooth'\n });\n\n thumbnails.forEach((thumb, i) => {\n thumb.classList.toggle('active', i === index);\n });\n\n currentIndex = index;\n }\n\n function scrollGallery(direction) {\n currentIndex = (currentIndex + direction + galleryImages.length) % galleryImages.length;\n scrollToIndex(currentIndex);\n }\n\n gallery.addEventListener('scroll', () => {\n const scrollLeft = gallery.scrollLeft;\n const width = gallery.offsetWidth;\n const index = Math.round(scrollLeft \/ width);\n if (index !== currentIndex) {\n currentIndex = index;\n thumbnails.forEach((thumb, i) => {\n thumb.classList.toggle('active', i === index);\n });\n }\n });\n\n scrollToIndex(0); \/\/ Initial load\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a1d7fa2 e-con-full e-flex e-con e-child\" data-id=\"a1d7fa2\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d828363 elementor-widget elementor-widget-html\" data-id=\"d828363\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- STEP 2: PROPERTY OVERVIEW -->\n<section class=\"property-overview\">\n <div class=\"property-main\">\n <div class=\"property-left\">\n <h1 class=\"property-title\">TIME SQUARE 8, Toul Tampoung<\/h1>\n <p class=\"property-address\">#32, Street 271, Toul Tampoung, Phnom Penh, Cambodia<\/p>\n <div class=\"property-price\">$75,000<\/div>\n\n <table class=\"property-table\">\n <tr>\n <th>\ud83d\udecf\ufe0f Bedrooms<\/th>\n <th>\ud83d\udec1 Bathrooms<\/th>\n <th>\ud83d\udcd0 Area<\/th>\n <th>\ud83d\ude97 Parking<\/th>\n <\/tr>\n <tr>\n <td>4<\/td>\n <td>3<\/td>\n <td>260 m\u00b2<\/td>\n <td>2<\/td>\n <\/tr>\n <\/table>\n\n <!-- Description with Collapse -->\n <div class=\"property-description-box\">\n <h3 class=\"desc-title\">Description<\/h3>\n <div class=\"desc-content\" id=\"descText\">\n <strong>Time Square 8 \u2013 Rise Above the Ordinary<\/strong><br><br>\n\n Discover Time Square 8, a stunning 50-story luxury condominium nestled in the vibrant heart of Toul Tom Pong, Phnom Penh.<br>\n Developed by Megakim World Corp., a reputable company behind seven successful projects, this high-rise is designed for both modern living and smart investing, offering exceptional returns and long-term value.<br><br>\n\n This exceptional development is located on Street 410, near the Russian Market, and features:<br>\n - A 47-floor tower with 2 basement levels (47F\/B2)<br>\n - Built on a land size of 1,494 sqm<br>\n - 700 residential units<br>\n - 7 high-speed elevators for smooth transportation<br><br>\n\n <strong>Exclusive Amenities:<\/strong><br>\n - Rooftop infinity pool<br>\n - Fully equipped gym<br>\n - Private cinema<br>\n - Multi-purpose event hall<br>\n - Multi-level car parking<br><br>\n\n With over 20% of units sold in the first week, demand is soaring\u2014<em>now is the time to secure your unit<\/em> in one of Phnom Penh\u2019s most anticipated luxury developments.<br><br>\n\n <strong>Floor Breakdown:<\/strong><br>\n \u2022 50F: High Ground \u2013 offering a panoramic view of the city<br>\n \u2022 49F: Fully-equipped Gym and Tennis Court<br>\n \u2022 48F: Infinity Pool for luxury leisure living<br>\n \u2022 40\u201347F: Duplex Floors \u2013 ideal for spacious, multi-level living<br>\n \u2022 39F: TS Sky Lounge \u2013 a private relaxation and social area<br>\n \u2022 8\u201338F: Classic Residential Floors<br>\n \u2022 2\u20137F: Dedicated Car Parking<br>\n \u2022 Ground Floor (GF): Lobby and Balcony Caf\u00e9 for social gatherings and resident convenience<br>\n \u2022 Basement Levels (B1\u2013B2F): Additional Car Parking facilities<br><br>\n\n <strong>Act fast. Live higher. Invest smarter.<\/strong><br>\n <em>Contact us today to reserve your spot at Time Square 8.<\/em>\n <\/div>\n <button class=\"desc-toggle\" onclick=\"toggleDescription(this)\">Continue Reading \u25bc<\/button>\n<\/div>\n \n\n <!-- LISTING AGENT SECTION -->\n <div class=\"agent-section\">\n <h3 class=\"agent-title\">Listing Agent<\/h3>\n <div class=\"agent-box\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/photo_2025-03-18_09-45-36.jpg\" class=\"agent-img\">\n <div class=\"agent-info\">\n <a href=\"mailto:christina@compass.com\" class=\"agent-name\">Ling Kimrith<\/a>\n <p class=\"agent-role\">Agent Leader<\/p>\n <p class=\"agent-company\">Big5 Real estate<\/p>\n <\/div>\n <\/div>\n <div class=\"agent-contact-buttons\">\n <a href=\"tel:+85512623289\" class=\"agent-btn\">Call<\/a>\n <a href=\"sms:+85512623289\" class=\"agent-btn\">Text<\/a>\n <a href=\"mailto:christina@compass.com\" class=\"agent-btn\">Email<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<style>\n.property-overview {\n max-width: 1100px;\n margin: 2px auto;\n padding: 4px;\n border-radius: 12px;\n background: linear-gradient(to right, #ffffff, #f7fafd);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n font-family: 'Segoe UI', sans-serif;\n}\n\n.property-main {\n display: flex;\n flex-wrap: wrap;\n gap: 24px;\n}\n\n.property-left {\n flex: 1 1 60%;\n}\n\n.property-title {\n font-size: clamp(20px, 3vw, 22px);\n font-weight: 600;\n color: #222;\n margin: 4px 0 8px;\n line-height: 1.3;\n word-break: break-word;\n}\n\n.property-address {\n font-size: 15px;\n color: #777;\n margin-bottom: 6px;\n}\n\n.property-price {\n font-size: 18px;\n color: #333;\n font-weight: bold;\n margin-bottom: 6px;\n}\n\n.property-table {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 20px;\n}\n\n.property-table th,\n.property-table td {\n border: 1px solid #ddd;\n padding: 5px 1px;\n text-align: center;\n font-size: 13px;\n}\n\n.property-table th {\n background-color: #f1f1f1;\n color: #333;\n font-weight: 600;\n}\n\n.property-description-box {\n background: #fff;\n padding: 6px;\n border-radius: 8px;\n box-shadow: 0 1px 6px rgba(0,0,0,0.06);\n margin-bottom: 20px;\n font-family: 'Segoe UI', sans-serif;\n}\n\n.desc-title {\n font-size: 16px;\n font-weight: bold;\n margin-bottom: 8px;\n}\n\n.desc-content {\n max-height: 300px;\n overflow: hidden;\n position: relative;\n transition: max-height 0.4s ease;\n}\n\n\/* scroll only after expanded *\/\n.desc-content.expanded {\n max-height: 500px;\n overflow-y: auto;\n padding-right: 4px;\n scrollbar-width: thin;\n}\n\n.desc-content.expanded::-webkit-scrollbar {\n width: 6px;\n}\n.desc-content.expanded::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.2);\n border-radius: 3px;\n}\n\n.desc-toggle {\n background: none;\n color: #007bff;\n border: none;\n font-size: 14px;\n cursor: pointer;\n padding: 6px 0;\n display: block;\n}\n\n.agent-section {\n background: #fff;\n padding: 16px;\n border-radius: 10px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);\n margin-bottom: 24px;\n text-align: center;\n}\n\n.agent-title {\n font-size: 16px;\n font-weight: 700;\n margin-bottom: 16px;\n text-align: left;\n}\n\n.agent-box {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.agent-img {\n width: 72px;\n height: 72px;\n border-radius: 50%;\n object-fit: cover;\n border: 2px solid #ccc;\n}\n\n.agent-info {\n text-align: left;\n}\n\n.agent-name {\n font-size: 16px;\n font-weight: 600;\n color: #007bff;\n text-decoration: none;\n}\n\n.agent-role, .agent-company {\n font-size: 14px;\n color: #333;\n margin: 2px 0;\n}\n\n.agent-contact-buttons {\n display: flex;\n justify-content: flex-start;\n gap: 10px;\n margin-top: 12px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.agent-btn {\n padding: 8px 20px;\n background: #ffffff;\n border: 1px solid #ccc;\n border-radius: 8px;\n text-decoration: none;\n color: #333;\n font-weight: 600;\n font-size: 14px;\n text-align: center;\n transition: background 0.3s, color 0.3s, border-color 0.3s;\n min-width: 90px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.agent-btn:hover {\n background-color: #007bff;\n color: #fff;\n border-color: #007bff;\n\n\/* Mobile & Tablet Responsive *\/\n@media (max-width: 768px) {\n .property-main {\n flex-direction: column;\n }\n .property-title {\n font-size: 15px;\n }\n .property-price {\n font-size: 16px;\n }\n .agent-info {\n flex-direction: column;\n text-align: center;\n }\n}\n<\/style>\n\n<script>\nfunction toggleDescription(button) {\n const content = document.getElementById(\"descText\");\n\n if (!content.classList.contains(\"expanded\")) {\n content.classList.add(\"expanded\");\n button.innerHTML = \"Collapse \u25b2\";\n setTimeout(() => {\n content.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n }, 200);\n } else {\n content.classList.remove(\"expanded\");\n button.innerHTML = \"Continue Reading \u25bc\";\n }\n}\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75974f6 elementor-widget elementor-widget-html\" data-id=\"75974f6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"similar-homes-section\">\n <h3 class=\"similar-title\">Similar Homes<\/h3>\n\n <div class=\"similar-tabs\">\n <button class=\"tab-btn active\" onclick=\"showTab('recommended')\">Recommended<\/button>\n <button class=\"tab-btn\" onclick=\"showTab('price')\">Price<\/button>\n <button class=\"tab-btn\" onclick=\"showTab('location')\">Location<\/button>\n<\/div>\n\n\n<style>\n\/* \ud83d\udd37 Container Section *\/\n.similar-homes-section {\n padding: 12px;\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);\n font-family: 'Segoe UI', sans-serif;\n margin-top: 5px;\n}\n\n\/* \ud83d\udd37 Section Title *\/\n.similar-title {\n font-size: clamp(20px, 2.5vw, 24px);\n font-weight: bold;\n margin-bottom: 16px;\n}\n\n\/* \ud83d\udd37 Tabs Navigation *\/\n.similar-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n.tab-btn {\n padding: 8px 16px;\n font-size: clamp(14px, 2vw, 16px);\n font-weight: 600;\n border-radius: 4px;\n border: 1px solid #ccc;\n background-color: #f9f9f9;\n cursor: pointer;\n transition: background 0.3s;\n}\n\n.tab-btn.active {\n background-color: #000;\n color: #fff;\n border-color: #000;\n}\n\n\/* \ud83d\udd37 Tab Content Section *\/\n.tab-content {\n display: none;\n}\n\n.tab-content.active {\n display: block;\n}\n\n\/* \ud83d\udd37 Similar Card Style *\/\n.similar-card {\n background: #f7f7f7;\n border-radius: 8px;\n padding: 8px;\n margin-bottom: 20px;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n}\n\n.similar-card img {\n width: 100%;\n height: auto;\n border-radius: 6px;\n margin-bottom: 8px;\n object-fit: cover;\n}\n\n\/* \ud83d\udd37 Text Info inside Card *\/\n.similar-card .price {\n font-size: clamp(16px, 2vw, 20px);\n font-weight: bold;\n color: #007bff;\n margin-bottom: 4px;\n}\n\n.similar-card .details,\n.similar-card .location {\n font-size: clamp(13px, 1.8vw, 15px);\n color: #555;\n margin: 2px 0;\n}\n<\/style>\n\n\n\n\n<div id=\"recommended\" class=\"tab-content active\">\n\n<script>\nfunction showTab(tabId) {\n const tabs = document.querySelectorAll('.tab-content');\n const buttons = document.querySelectorAll('.tab-btn');\n\n \/\/ Hide all tab contents\n tabs.forEach(tab => tab.classList.remove('active'));\n\n \/\/ Remove active class from all buttons\n buttons.forEach(btn => btn.classList.remove('active'));\n\n \/\/ Show selected tab\n document.getElementById(tabId).classList.add('active');\n\n \/\/ Add active class to the clicked button\n \/\/ Use event delegation to support Safari\/iOS\n buttons.forEach(btn => {\n if (btn.getAttribute('onclick').includes(tabId)) {\n btn.classList.add('active');\n }\n });\n}\n<\/script>\n\n\n<!-- Listing Cards Grid -->\n<div class=\"carousel-grid\">\n\n <!-- Card 1 -->\n <div class=\"carousel-card\">\n <div class=\"carousel-gallery\" ontouchstart=\"touchStart(event)\" ontouchend=\"touchEnd(event)\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1744.jpg\" class=\"active\" alt=\"img1\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1747.jpg\" alt=\"img2\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1738.jpg\" alt=\"img3\">\n <div class=\"carousel-controls\">\n <button class=\"prev\" onclick=\"prevImage(this)\">\u2039<\/button>\n <button class=\"next\" onclick=\"nextImage(this)\">\u203a<\/button>\n <\/div>\n <\/div>\n <div class=\"carousel-info\">\n <div class=\"price\">$75,000<\/div>\n <div class=\"details\">4 beds | 3 baths | 260 m\u00b2<\/div>\n <div class=\"location\">Toul Tompoung, Phnom Penh<\/div>\n <\/div>\n <\/div>\n\n <!-- Card 2 -->\n <div class=\"carousel-card\">\n <div class=\"carousel-gallery\" ontouchstart=\"touchStart(event)\" ontouchend=\"touchEnd(event)\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1303.jpg\" class=\"active\" alt=\"img1\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1107.jpg\" alt=\"img2\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1739.jpg\" alt=\"img3\">\n <div class=\"carousel-controls\">\n <button class=\"prev\" onclick=\"prevImage(this)\">\u2039<\/button>\n <button class=\"next\" onclick=\"nextImage(this)\">\u203a<\/button>\n <\/div>\n <\/div>\n <div class=\"carousel-info\">\n <div class=\"price\">$92,000<\/div>\n <div class=\"details\">2 beds | 2 baths | 180 m\u00b2<\/div>\n <div class=\"location\">BKK1, Phnom Penh<\/div>\n <\/div>\n <\/div>\n\n <!-- Card 3 -->\n <div class=\"carousel-card\">\n <div class=\"carousel-gallery\" ontouchstart=\"touchStart(event)\" ontouchend=\"touchEnd(event)\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1738.jpg\" class=\"active\" alt=\"img1\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1743.jpg\" alt=\"img2\">\n <img decoding=\"async\" src=\"https:\/\/big5toulkoks.com\/wp-content\/uploads\/2025\/05\/IMG_1739.jpg\" alt=\"img3\">\n <div class=\"carousel-controls\">\n <button class=\"prev\" onclick=\"prevImage(this)\">\u2039<\/button>\n <button class=\"next\" onclick=\"nextImage(this)\">\u203a<\/button>\n <\/div>\n <\/div>\n <div class=\"carousel-info\">\n <div class=\"price\">$105,000<\/div>\n <div class=\"details\">5 beds | 4 baths | 310 m\u00b2<\/div>\n <div class=\"location\">Sen Sok, Phnom Penh<\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<!-- STYLE -->\n<style>\n.carousel-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n gap: 20px;\n margin-top: 24px;\n}\n\n.carousel-card {\n border-radius: 10px;\n overflow: hidden;\n background: #fff;\n box-shadow: 0 0px 12px rgba(0,0,0,0.2);\n font-family: 'Segoe UI', sans-serif;\n}\n\n.carousel-gallery {\n position: relative;\n width: 100%;\n height: 180px;\n overflow: hidden;\n}\n\n.carousel-gallery img {\n position: absolute;\n width: 100%;\n height: 180px;\n object-fit: cover;\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n pointer-events: none;\n}\n\n.carousel-gallery img.active {\n opacity: 1;\n position: relative;\n pointer-events: auto;\n}\n\n.carousel-controls {\n top: 50%;\n left: 0;\n right: 0;\n display: flex;\n justify-content: space-between;\n padding: 0 12px;\n transform: translateY(-50%);\n z-index: 2;\n}\n\n\n.carousel-controls button {\n background: rgba(255, 255, 255, 0.8);\n color: #333;\n border: 1px solid rgba(0, 0, 0, 0.1);\n width: 34px;\n height: 34px;\n border-radius: 50%;\n font-size: 18px;\n font-weight: bold;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.3s ease;\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n}\n\n.carousel-controls button:hover {\n background: #007bff;\n color: white;\n border-color: #007bff;\n}\n\n.carousel-info {\n padding: 12px;\n}\n\n.carousel-info .price {\n font-size: 17px;\n font-weight: bold;\n color: #007bff;\n}\n\n.carousel-info .details {\n font-size: 14px;\n color: #444;\n}\n\n.carousel-info .location {\n font-size: 13px;\n color: #666;\n}\n<\/style>\n\n<script>\nlet xStart = null;\n\nfunction nextImage(btn) {\n const gallery = btn.closest('.carousel-gallery');\n const imgs = gallery.querySelectorAll('img');\n let index = [...imgs].findIndex(img => img.classList.contains('active'));\n imgs[index].classList.remove('active');\n index = (index + 1) % imgs.length;\n imgs[index].classList.add('active');\n}\n\nfunction prevImage(btn) {\n const gallery = btn.closest('.carousel-gallery');\n const imgs = gallery.querySelectorAll('img');\n let index = [...imgs].findIndex(img => img.classList.contains('active'));\n imgs[index].classList.remove('active');\n index = (index - 1 + imgs.length) % imgs.length;\n imgs[index].classList.add('active');\n}\n\nfunction touchStart(evt) {\n xStart = evt.changedTouches[0].clientX;\n}\n\nfunction touchEnd(evt) {\n if (xStart === null) return;\n const xEnd = evt.changedTouches[0].clientX;\n const diff = xStart - xEnd;\n const gallery = evt.target.closest('.carousel-gallery');\n\n if (Math.abs(diff) > 30) {\n const btn = diff > 0\n ? gallery.querySelector('.next')\n : gallery.querySelector('.prev');\n requestAnimationFrame(() => btn.click());\n }\n\n xStart = null;\n}\n<\/script>\n\n\n...<\/div>\n\n\n\n\n<div id=\"price\" class=\"tab-content\">.\u17a2\u178f\u17cb\u1791\u17b6\u1793\u17cb\u1798\u17b6\u1793..<\/div>\n<div id=\"location\" class=\"tab-content\">.\u17a2\u178f\u17cb\u1791\u17b6\u1793\u17cb\u1798\u17b6\u1793..<\/div>\n\n \n <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1f418a1 e-flex e-con-boxed e-con e-parent\" data-id=\"1f418a1\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1cc694d elementor-widget elementor-widget-html\" data-id=\"1cc694d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Bootstrap Icons -->\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.10.5\/font\/bootstrap-icons.css\" rel=\"stylesheet\" \/>\n\n<style>\n @media (max-width: 768px) {\n .bottom-contact-bar {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n background: #fff;\n display: flex;\n justify-content: space-around;\n border-top: 1px solid #ccc;\n z-index: 9999;\n box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);\n }\n\n .bottom-contact-bar a {\n flex: 1;\n text-align: center;\n padding: 8px 0;\n color: #333;\n font-size: 14px;\n text-decoration: none;\n border-right: 1px solid #eee;\n }\n\n .bottom-contact-bar a:last-child {\n border-right: none;\n }\n\n .bottom-contact-bar i {\n display: block;\n font-size: 17px;\n margin-bottom: 2px;\n }\n\n body {\n padding-bottom: 60px; \/* Prevent content being hidden under bar *\/\n }\n }\n<\/style>\n\n<!-- Mobile Contact Bar -->\n<div class=\"bottom-contact-bar\">\n <a href=\"https:\/\/wa.me\/85512345678\" target=\"_blank\">\n <i class=\"bi bi-whatsapp\" style=\"color: #25D366;\"><\/i>\n <\/a>\n <a href=\"https:\/\/t.me\/kimrithDC\" target=\"_blank\">\n <i class=\"bi bi-telegram\" style=\"color: #229ED9;\"><\/i>\n <\/a>\n <a href=\"tel:+85512345678\">\n <i class=\"bi bi-telephone-fill\" style=\"color: #4CAF50;\"><\/i>\n <\/a>\n <a href=\"#contact-form\">\n <i class=\"bi bi-envelope-fill\" style=\"color: #f7941d;\"><\/i> \n <\/a>\n<\/div>\n\n\n<style>\n @media (max-width: 768px) {\n .bottom-contact-bar {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n background: #fff;\n display: flex;\n justify-content: space-around;\n border-top: 1px solid #ccc;\n z-index: 9999;\n box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);\n }\n\n .bottom-contact-bar a {\n flex: 1;\n text-align: center;\n padding: 8px 0;\n color: #333;\n font-size: 14px;\n text-decoration: none;\n border-right: 1px solid #eee;\n }\n\n .bottom-contact-bar a:last-child {\n border-right: none;\n }\n\n .bottom-contact-bar i {\n display: block;\n font-size: 17px;\n margin-bottom: 2px;\n }\n\n body {\n padding-bottom: 60px; \/* Prevent content being hidden under bar *\/\n }\n }\n\n \/* Hide on Desktop *\/\n @media (min-width: 769px) {\n .bottom-contact-bar {\n display: none;\n }\n }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1529fbb e-flex e-con-boxed e-con e-parent\" data-id=\"1529fbb\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b2680d7 elementor-widget elementor-widget-html\" data-id=\"b2680d7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- MOBILE CONTACT FORM -->\n<div class=\"mobile-request-form\">\n <h3 class=\"form-title\">Request Details<\/h3>\n\n <div class=\"form-row\">\n <div class=\"form-col\">\n <input type=\"text\" id=\"name\" placeholder=\"\ud83d\udc64 Name\" class=\"form-input\">\n <\/div>\n <div class=\"form-col\">\n <input type=\"tel\" id=\"phone\" placeholder=\" Phone Number\" class=\"form-input\">\n <\/div>\n <\/div>\n\n <input type=\"email\" id=\"email\" placeholder=\"\u2709\ufe0f Please enter your email address\" class=\"form-input full-width\">\n \n <textarea id=\"message\" placeholder=\"\ud83d\udd8a\ufe0f Write message to agent here\" class=\"form-textarea\"><\/textarea>\n \n <button class=\"form-submit\" onclick=\"submitToTelegram()\">Submit details<\/button>\n<\/div>\n\n<style>\n\/* Only show on mobile *\/\n@media (max-width: 768px) {\n .mobile-request-form {\n width: 95%;\n max-width: 420px;\n margin: 20px auto;\n background: #fff;\n padding: 16px;\n border-radius: 10px;\n box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n font-family: 'Segoe UI', sans-serif;\n }\n\n .form-title {\n font-size: 18px;\n font-weight: 700;\n text-align: center;\n margin-bottom: 16px;\n }\n\n .form-row {\n display: flex;\n gap: 10px;\n margin-bottom: 12px;\n }\n\n .form-col {\n flex: 1;\n }\n\n .form-input {\n width: 100%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 6px;\n font-size: 14px;\n }\n\n .form-input.full-width {\n margin-bottom: 12px;\n }\n\n .form-textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 6px;\n font-size: 14px;\n height: 80px;\n margin-bottom: 14px;\n resize: vertical;\n }\n\n .form-submit {\n width: 100%;\n background: #007bff;\n color: white;\n font-weight: bold;\n padding: 12px;\n font-size: 16px;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.3s ease;\n }\n\n .form-submit:hover {\n background: #0069d9;\n }\n}\n\n\/* Hide form on desktop\/tablet *\/\n@media (min-width: 769px) {\n .mobile-request-form {\n display: none;\n }\n}\n<\/style>\n\n<script>\nfunction submitToTelegram() {\n const name = document.getElementById('name').value;\n const phone = document.getElementById('phone').value;\n const email = document.getElementById('email').value;\n const message = document.getElementById('message').value;\n\n const text = `\ud83d\udce9 New Agent Request\\n\\n\ud83d\udc64 Name: ${name}\\n\ud83d\udcde Phone: ${phone}\\n\ud83d\udce7 Email: ${email}\\n\ud83d\udcdd Message: ${message}`;\n \n const telegramToken = '7963953851:AAEVVm11eqEY9Y2Fp4XreBOtwzRuur9I0us';\n const telegramChatId = '-1002428365381';\n const telegramURL = `https:\/\/api.telegram.org\/bot${telegramToken}\/sendMessage`;\n\n fetch(telegramURL, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify({\n chat_id: telegramChatId,\n text: text\n })\n })\n .then(response => {\n if (response.ok) {\n alert('Your message has been sent successfully!');\n } else {\n alert('Failed to send message.');\n }\n });\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Real Estate Gallery ❮ ❯ TIME SQUARE 8, Toul Tampoung #32, Street 271, Toul Tampoung, Phnom Penh, Cambodia $75,000 \ud83d\udecf\ufe0f Bedrooms \ud83d\udec1 Bathrooms \ud83d\udcd0 Area \ud83d\ude97 Parking 4 3 260 m\u00b2 2 Description Time Square 8 \u2013 Rise Above the Ordinary Discover Time Square 8, a stunning 50-story luxury condominium nestled in the vibrant heart […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-571","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/big5toulkoks.com\/index.php\/wp-json\/wp\/v2\/pages\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/big5toulkoks.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/big5toulkoks.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/big5toulkoks.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/big5toulkoks.com\/index.php\/wp-json\/wp\/v2\/comments?post=571"}],"version-history":[{"count":154,"href":"https:\/\/big5toulkoks.com\/index.php\/wp-json\/wp\/v2\/pages\/571\/revisions"}],"predecessor-version":[{"id":753,"href":"https:\/\/big5toulkoks.com\/index.php\/wp-json\/wp\/v2\/pages\/571\/revisions\/753"}],"wp:attachment":[{"href":"https:\/\/big5toulkoks.com\/index.php\/wp-json\/wp\/v2\/media?parent=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}