tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: [‘Inter’, ‘system-ui’, ‘-apple-system’, ‘sans-serif’],
serif: [‘Playfair Display’, ‘Georgia’, ‘serif’],
},
colors: {
primary: ‘#0b2f1d’,
secondary: ‘#071d12’,
accent: ‘#c5a880’,
accentHover: ‘#dfc095’,
cream: ‘#FAF9F6’,
}
}
}
}

/* CSS animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleUp {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn {
animation: fadeIn 0.4s ease-out forwards;
}
.animate-scaleUp {
animation: scaleUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.write-vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
}
/* Custom scrollbars */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #071d12;
}
::-webkit-scrollbar-thumb {
background: #c5a880/30;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #c5a880/60;
}

TOÀN

TOÀN JP
園松

Vườn Tùng Nhật Bản Cao Cấp

0985.84.7272

Đăng Ký Tư Vấn

Câu Chuyện Toàn JP
Danh Mục Kiệt Tác Bonsai
Phong Cách Sân Vườn
Phác Thảo & Tính Chi Phí
Hệ Thống Showroom

Hotline VIP: 0985.84.7272

KIỆT TÁC QUÝ TỘC NHẬT BẢN • 日本盆栽

Tinh Hoa Vườn Tùng
Nâng Tầm Biệt Thự

Toàn JP tự hào cung cấp độc bản các siêu cây Tùng La Hán, Thông Đen Bonsai trên 100 tuổi nhập khẩu nguyên gốc từ vùng Saitama Nhật Bản. Bảo vật phong thủy trấn trạch đỉnh cao cho các lâu đài, lâu viên đẳng cấp bậc nhất Việt Nam.

Xem Bộ Sưu Tập Cổ Thụ
Tính Chi Phí Sân Vườn

本物の羅漢松

Trấn Trạch Vượng Khí

NGHỆ THUẬT CẢNH QUAN • 日本庭園

Tinh Hoa Thiết Kế Sân Vườn Nhật

Thiết lập các tiểu cảnh đá rêu phong, lối đi thiền định tịnh tâm.

ZEN

Vườn Thiền Định Khô – Karesansui

Hán tự: 枯山水 – thiền định

Sử dụng đá cuội, đá tảng nguyên khối, sỏi trắng được cào tạo sóng tượng trưng cho nước, kết hợp với các gốc tùng bonsai cô độc đầy biểu cảm. Không dùng nước thật, mang lại không gian tĩnh lặng tuyệt đối cho tâm trí.

Thành phần chính:

Cát/sỏi trắng cào sóng cát

Đá tảng tự nhiên biểu thị đảo

Cây Thông đen bonsai cô độc

Đèn đá lồng đèn Ishidouro

Thảm rêu nhung xanh mướt

Lên sơ phác style này

TEA PATH

Vườn Trà Đạo – Chaniwa

Hán tự: 茶庭 – thanh tịnh

Lối dẫn vào trà thất tĩnh mịch, mộc mạc và rêu phong. Thiết kế nhằm thanh lọc tâm hồn của trà khách trước khi bước vào buổi lễ thưởng trà trang nghiêm.

Thành phần chính:

Lối đi rải đá tấm bước đi Tobi-ishi

Chậu đá rửa tay Tsukubai có ống nước tre

Hàng rào tre mộc mạc

Rừng trúc xanh rì rào

Đèn đá dẫn lối âm u

Lên sơ phác style này

KOI POND

Vườn Sơn Thủy Dạo Mát – Kaiyushiki

Hán tự: 回遊式 – sơn thủy

Phong cách dành riêng cho hoàng gia và giới quý tộc Nhật Bản xưa. Sân vườn có quy mô rộng lớn bao gồm một hồ nước lớn ở trung tâm, hòn non bộ, cầu gỗ bắc ngang, lầu vọng cảnh và các cụm tùng la hán cổ thụ bao quanh phản chiếu bóng nước.

Thành phần chính:

Hồ cá Koi sinh động rộng lớn

Cầu gỗ hình vòm sơn đỏ hoặc đá xanh

Thác nước tự nhiên róc rách

Lầu thưởng trà vọng cảnh ven hồ

Những dáng tùng bay lả lướt ngả bóng mặt nước

Lên sơ phác style này

TÙNG LA HÁN • 羅漢松

Tác phẩm cổ

Tuổi Cây

Chiều Cao

Thế Dáng

Nguồn Gốc

Ý nghĩa Trấn Trạch

Yêu cầu báo giá chi tiết

// Raw Embedded Data
const products = [{“id”:”prod-1″,”name”:”Tùng La Hán Nhật Bản dáng Trực Quân Tử”,”jpName”:”羅漢松 – 直幹”,”category”:”tung-la-han”,”description”:”Thân cây mọc thẳng đứng kiêu hãnh, các tán lá (bông dăm) được tạo tác xòe rộng cân đối như những tầng mây xanh biếc. Thể hiện ý chí kiên cường, ngay thẳng và khí phách hiên ngang của bậc đại trượng phu.”,”meaning”:”Mang lại năng lượng thịnh vượng, xua đuổi tà khí, khẳng định uy quyền và địa vị tối thượng của gia chủ.”,”age”:”120 năm”,”height”:”4.5m”,”style”:”Dáng Trực (Chokkan)”,”origin”:”Tỉnh Saitama, Nhật Bản”,”image”:”https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&q=80&w=800″},{“id”:”prod-2″,”name”:”Tùng La Hán Cổ Thụ Thác Đổ”,”jpName”:”羅漢松 – 懸崖”,”category”:”tung-la-han”,”description”:”Ngọn cây đổ dốc duyên dáng xuống phía dưới chân chậu như dòng thác nước chảy xiết qua khe đá hiểm trở, nhưng tán lá vẫn vươn lên đón nắng rạng ngời. Một tuyệt phẩm đầy kịch tính.”,”meaning”:”Tượng trưng cho sức sống mãnh liệt, vượt qua mọi nghịch cảnh thử thách để đạt tới thành công vang dội.”,”age”:”180 năm”,”height”:”2.8m (Độ đổ 3.2m)”,”style”:”Dáng Huyền / Thác đổ (Kengai)”,”origin”:”Vùng Kyushu, Nhật Bản”,”image”:”https://images.unsplash.com/photo-1599599810769-bcde5a160d32?auto=format&fit=crop&q=80&w=800″},{“id”:”prod-3″,”name”:”Thông Đen Nhật Bản Bonsai Độc Bản”,”jpName”:”黒松 – 斜幹”,”category”:”thong-den”,”description”:”Được mệnh danh là ‘Vua của các loài Bonsai’ (Kuromatsu). Thân cây xù xì, nứt nẻ như vảy rồng đen huyền bí, lá kim nhọn hoắt dũng mãnh, các nhánh uốn lượn sắc sảo mang vẻ đẹp phong trần phong sương.”,”meaning”:”Đại diện cho sự trường thọ vô song, tinh thần bất khuất, mang lại vượng khí vô hạn cho gia viên.”,”age”:”250 năm”,”height”:”3.2m”,”style”:”Dáng Hoành / Xiên (Shakan)”,”origin”:”Tỉnh Chiba, Nhật Bản”,”image”:”https://images.unsplash.com/photo-1515150144380-bca9f1650ed9?auto=format&fit=crop&q=80&w=800″},{“id”:”prod-4″,”name”:”Hoa Đỗ Quyên Satsuki Bonsai Cổ Thụ”,”jpName”:”皐月つつじ – 盆栽”,”category”:”do-quyen-tra-nhat”,”description”:”Thân đỗ quyên sần sùi lâu năm nở hoa đồng loạt rực rỡ sắc hồng, đỏ và trắng đan xen vào tháng 5 dương lịch. Các chi dăm dày đặc, tán tròn đều đặn như mâm xôi.”,”meaning”:”Biểu trưng cho sự ấm áp, sung túc, hạnh phúc sum vầy và tình yêu thương viên mãn trong gia đình.”,”age”:”85 năm”,”height”:”1.2m”,”style”:”Dáng đa thân nghệ thuật”,”origin”:”Vùng Shizuoka, Nhật Bản”,”image”:”https://images.unsplash.com/photo-1512428559087-560fa5ceab42?auto=format&fit=crop&q=80&w=800″},{“id”:”prod-5″,”name”:”Cây Hồng Giòn Thạch Lựu Cổ Thụ Nhật Bản”,”jpName”:”柿の木 / 石榴”,”category”:”cay-an-qua-co-thu”,”description”:”Loài cây ăn quả bản địa Nhật Bản được thuần hóa hàng trăm năm. Thân gỗ lũa mộc mạc, mùa thu lá chuyển màu vàng đỏ rực rỡ và trĩu nặng những quả hồng chín mọng nước ngọt ngào như những chiếc đèn lồng.”,”meaning”:”Thu hút tài lộc, gia đạo bình an, cuộc sống ngọt ngào viên mãn và của cải dồi dào gõ cửa.”,”age”:”150 năm”,”height”:”3.8m”,”style”:”Dáng Bonsai Đại Cảnh”,”origin”:”Vùng Yamagata, Nhật Bản”,”image”:”https://images.unsplash.com/photo-1504618223053-559bdef9dd5a?auto=format&fit=crop&q=80&w=800″},{“id”:”prod-6″,”name”:”Hoa Trà Cổ Thụ Bạch Trà Tsubaki”,”jpName”:”ツバキ – 白茶”,”category”:”do-quyen-tra-nhat”,”description”:”Cây trà cổ thụ có những cánh hoa xếp nếp hoàn hảo như lụa bạch, lá xanh sẫm bóng loáng tràn đầy nhựa sống. Nở hoa kiêu sa giữa tuyết lạnh hoặc cuối đông, đầu xuân ấm áp.”,”meaning”:”Đại diện cho sự thuần khiết, thanh cao, quý phái thượng lưu và lòng kiên định không dời đổi.”,”age”:”95 năm”,”height”:”2.5m”,”style”:”Dáng trực lắc nhẹ”,”origin”:”Tỉnh Kyoto, Nhật Bản”,”image”:”https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&q=80&w=800″}];
const styles = [{“id”:”style-1″,”name”:”Vườn Thiền Định Khô – Karesansui”,”jpName”:”枯山水 – thiền định”,”description”:”Sử dụng đá cuội, đá tảng nguyên khối, sỏi trắng được cào tạo sóng tượng trưng cho nước, kết hợp với các gốc tùng bonsai cô độc đầy biểu cảm. Không dùng nước thật, mang lại không gian tĩnh lặng tuyệt đối cho tâm trí.”,”elements”:[“Cát/sỏi trắng cào sóng cát”,”Đá tảng tự nhiên biểu thị đảo”,”Cây Thông đen bonsai cô độc”,”Đèn đá lồng đèn Ishidouro”,”Thảm rêu nhung xanh mướt”],”image”:”https://images.unsplash.com/photo-1504618223053-559bdef9dd5a?auto=format&fit=crop&q=80&w=800″},{“id”:”style-2″,”name”:”Vườn Trà Đạo – Chaniwa”,”jpName”:”茶庭 – thanh tịnh”,”description”:”Lối dẫn vào trà thất tĩnh mịch, mộc mạc và rêu phong. Thiết kế nhằm thanh lọc tâm hồn của trà khách trước khi bước vào buổi lễ thưởng trà trang nghiêm.”,”elements”:[“Lối đi rải đá tấm bước đi Tobi-ishi”,”Chậu đá rửa tay Tsukubai có ống nước tre”,”Hàng rào tre mộc mạc”,”Rừng trúc xanh rì rào”,”Đèn đá dẫn lối âm u”],”image”:”https://images.unsplash.com/photo-1508193638397-1c4234db14d8?auto=format&fit=crop&q=80&w=800″},{“id”:”style-3″,”name”:”Vườn Sơn Thủy Dạo Mát – Kaiyushiki”,”jpName”:”回遊式 – sơn thủy”,”description”:”Phong cách dành riêng cho hoàng gia và giới quý tộc Nhật Bản xưa. Sân vườn có quy mô rộng lớn bao gồm một hồ nước lớn ở trung tâm, hòn non bộ, cầu gỗ bắc ngang, lầu vọng cảnh và các cụm tùng la hán cổ thụ bao quanh phản chiếu bóng nước.”,”elements”:[“Hồ cá Koi sinh động rộng lớn”,”Cầu gỗ hình vòm sơn đỏ hoặc đá xanh”,”Thác nước tự nhiên róc rách”,”Lầu thưởng trà vọng cảnh ven hồ”,”Những dáng tùng bay lả lướt ngả bóng mặt nước”],”image”:”https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?auto=format&fit=crop&q=80&w=800″}];

let currentCategory = ‘all’;
let currentStyleIndex = 0;
let selectedArea = 120;

// Render products on page load
function renderProducts() {
const container = document.getElementById(‘products-grid’);
container.innerHTML = ”;

const filtered = currentCategory === ‘all’
? products
: products.filter(p => p.category === currentCategory);

filtered.forEach(p => {
const card = document.createElement(‘div’);
card.className = “bg-primary/40 border border-white/5 rounded-2xl overflow-hidden hover:border-accent/30 shadow-xl transition-all duration-300 flex flex-col justify-between group”;

card.innerHTML = `

${p.jpName.split(‘ – ‘)[0]}

Tuổi: ${p.age}

Cao: ${p.height}

${p.style.split(‘ ‘)[0]}

`;
container.appendChild(card);
});
}

// Header scroll behavior
window.addEventListener(‘scroll’, function() {
const header = document.getElementById(‘header’);
if (window.scrollY > 30) {
header.classList.add(‘bg-primary/95’, ‘shadow-lg’, ‘border-b’, ‘border-accent/20’);
header.classList.remove(‘bg-gradient-to-b’, ‘from-primary/80’, ‘to-transparent’);
} else {
header.classList.remove(‘bg-primary/95’, ‘shadow-lg’, ‘border-b’, ‘border-accent/20’);
header.classList.add(‘bg-gradient-to-b’, ‘from-primary/80’, ‘to-transparent’);
}
});

// Toggle mobile drawer
function toggleMobileMenu() {
const menu = document.getElementById(‘mobile-menu’);
menu.classList.toggle(‘hidden’);
}

// Filter product category
function filterCategory(catId) {
currentCategory = catId;
document.querySelectorAll(‘.category-tab’).forEach(btn => {
btn.className = “category-tab px-5 py-2.5 rounded-full text-xs font-medium text-gray-300 bg-primary/40 hover:bg-white/10 border border-white/5”;
});
const activeTab = document.getElementById(‘tab-‘ + catId);
if (activeTab) {
activeTab.className = “category-tab px-5 py-2.5 rounded-full text-xs font-bold transition-all bg-accent text-primary”;
}
renderProducts();
}

// Product Modal Logic
function openProductModal(prodId) {
const p = products.find(prod => prod.id === prodId);
if (!p) return;

document.getElementById(‘modal-img’).src = p.image;
document.getElementById(‘modal-img’).alt = p.name;
document.getElementById(‘modal-name’).innerText = p.name;
document.getElementById(‘modal-cat’).innerText = p.category === ‘tung-la-han’ ? ‘TÙNG LA HÁN • 羅漢松’ : p.category === ‘thong-den’ ? ‘THÔNG ĐEN • 黒松’ : ‘ĐỖ QUYÊN • 皐月’;
document.getElementById(‘modal-jp’).innerText = ‘Hán tự danh xưng: ‘ + p.jpName;
document.getElementById(‘modal-age’).innerText = p.age;
document.getElementById(‘modal-height’).innerText = p.height;
document.getElementById(‘modal-style’).innerText = p.style;
document.getElementById(‘modal-origin’).innerText = p.origin;
document.getElementById(‘modal-desc’).innerText = p.description;
document.getElementById(‘modal-meaning’).innerText = p.meaning;

const modal = document.getElementById(‘product-modal’);
modal.className = “fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm overflow-y-auto”;
}

function closeProductModal() {
const modal = document.getElementById(‘product-modal’);
modal.className = “fixed inset-0 z-[100] hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm overflow-y-auto”;
}

// Selected style in estimator
function changeSelectedStyle(styleIndex) {
currentStyleIndex = styleIndex;
for (let i = 0; i < 3; i++) {
const btn = document.getElementById('style-btn-' + i);
if (i === styleIndex) {
btn.className = "p-4 rounded-xl text-left border transition-all text-primary bg-accent border-accent font-serif font-bold text-sm";
} else {
btn.className = "p-4 rounded-xl text-left border transition-all text-gray-300 bg-secondary/60 border-white/5 hover:border-white/20 font-serif font-bold text-sm";
}
}
recalculateCost();
}

function selectEstimatorStyle(idx) {
changeSelectedStyle(idx);
document.getElementById('garden-planner').scrollIntoView({ behavior: 'smooth' });
}

// Live calculation logic
function updateArea(val) {
selectedArea = parseInt(val);
document.getElementById('area-val-label').innerText = val + ' m²';
recalculateCost();
}

function calculateEstimatePrice() {
const styleMultiplier = currentStyleIndex === 0 ? 1.2 : currentStyleIndex === 1 ? 1.0 : 1.5;
const baseCostPerSqm = 3500000;

let elementCosts = 0;
if (document.getElementById('el-koiPond').checked) elementCosts += 8000000 * (selectedArea / 100 + 0.5);
if (document.getElementById('el-stoneLantern').checked) elementCosts += 1500000 * (selectedArea / 100 + 0.5);
if (document.getElementById('el-redBridge').checked) elementCosts += 2500000 * (selectedArea / 100 + 0.5);
if (document.getElementById('el-steppingStones').checked) elementCosts += 800000 * (selectedArea / 100 + 0.5);

const total = (selectedArea * baseCostPerSqm * styleMultiplier) + elementCosts;
return total;
}

function formattedPrice(price) {
return new Intl.NumberFormat("vi-VN", {
style: "currency",
currency: "VND",
maximumFractionDigits: 0
}).format(price);
}

function recalculateCost() {
const outputCard = document.getElementById('estimator-result-card');
if (outputCard && !outputCard.classList.contains('hidden')) {
const total = calculateEstimatePrice();
document.getElementById('res-total-price').innerText = formattedPrice(total);
document.getElementById('res-area').innerText = selectedArea + ' m²';
document.getElementById('res-style').innerText = currentStyleIndex === 0 ? 'Vườn Khô Thiền Định' : currentStyleIndex === 1 ? 'Vườn Trà Đạo' : 'Vườn Sơn Thủy';
}
}

function submitEstimatorForm() {
const name = document.getElementById('client-name').value;
const phone = document.getElementById('client-phone').value;

if (!name || !phone) {
alert("Quý khách vui lòng nhập đầy đủ họ tên và số điện thoại liên hệ.");
return;
}

document.getElementById('estimator-default-card').classList.add('hidden');
const resultCard = document.getElementById('estimator-result-card');
resultCard.classList.remove('hidden');

document.getElementById('result-client-info').innerText = "Khách hàng VIP: " + name + " • SĐT: " + phone;

recalculateCost();
}

// Initialize Products
renderProducts();