Selection Overview
Shopping Bag
<a>" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover object-top grayscale-[10%]">
</div>
</div>
<div class="swiper-pagination !-bottom-8"></div>
</div>
</div>
<!-- Desktop: Grid Stack (hidden on mobile) -->
<div class="hidden lg:grid grid-cols-2 gap-4">
<div class="col-span-2 bg-surface cursor-crosshair group relative overflow-hidden">
<img src="/assets/images/products/1774664036_69c73964bb74f.jpg" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover object-top filter grayscale-[5%] group-hover:grayscale-0 transition-all duration-700">
</div>
<div class="col-span-1 bg-surface cursor-crosshair group relative overflow-hidden">
<img src="/assets/images/products/1774664036_69c73964c1f37.jfif" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover object-top filter grayscale-[10%] group-hover:grayscale-0 transition-all duration-700">
</div>
<div class="col-span-1 bg-surface cursor-crosshair group relative overflow-hidden">
<img src="/assets/images/products/1774664036_69c73964c9b0b.jpg" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover object-top filter grayscale-[10%] group-hover:grayscale-0 transition-all duration-700">
</div>
<div class="col-span-1 bg-surface cursor-crosshair group relative overflow-hidden">
<img src="/assets/images/products/1774664036_69c73964d5962.jpeg" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover object-top filter grayscale-[10%] group-hover:grayscale-0 transition-all duration-700">
</div>
<div class="col-span-1 bg-surface cursor-crosshair group relative overflow-hidden">
<img src="/assets/images/products/1774664036_69c73964df793.webp'"><a>" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover object-top filter grayscale-[10%] group-hover:grayscale-0 transition-all duration-700">
</div>
</div>
</div>
<!-- Content -->
<div class="w-full lg:w-[45%] space-y-16">
<!-- Header -->
<div class="space-y-6">
<p class="text-[12px] font-black uppercase tracking-[0.5em] text-accent">
PHƯƠNG TRÁNG GLOBAL </p>
<h1 class="text-5xl md:text-8xl font-serif italic text-primary leading-[1.1]">
Tranh dân gian Đông Hồ </h1>
<div class="flex items-center space-x-6">
<span class="text-4xl font-bold text-primary">$49.23</span>
<span
class="text-2xl text-neutral-400 line-through decoration-1 decoration-neutral-200">$57.69</span>
<span
class="text-[12px] font-black bg-rose-50 text-rose-600 px-4 py-1.5 uppercase tracking-widest">Limited Offer</span>
</div>
</div>
<!-- Abstract -->
<div class="text-[16px] text-neutral-700 leading-relaxed font-medium max-w-xl">
<p><span data-start="822" data-end="853" style="font-weight: bolder;">Traditional “Do Diep” paper</span>, made from the bark of the dó tree and coated with powdered seashells, creates a subtly shimmering surface that reflects light beautifully, giving the artwork a rustic yet refined appearance</p>'"><a> </div>
<!-- Product Form -->
<form id="atc-form" class="space-y-12">
<input type="hidden" name="id" value="118">
<!-- Color -->
<div class="space-y-6">
<h4
class="text-[12px] font-black uppercase tracking-[0.3em] text-primary border-b border-neutral-50 pb-3">
The Palette</h4>
<div class="flex flex-wrap gap-4">
<label class="relative cursor-pointer group">
<input type="radio" name="color" value="white" class="peer hidden" checked>
<div class="w-8 h-8 rounded-full border border-neutral-100 peer-checked:ring-2 peer-checked:ring-accent peer-checked:ring-offset-2 transition-all group-hover:scale-110"
style="background-color: white">
</div>
<span
class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 text-[8px] font-black uppercase tracking-widest text-primary transition-opacity whitespace-nowrap bg-white px-2 py-1 shadow-sm">white</span>
</label>
<label class="relative cursor-pointer group">
<input type="radio" name="color" value="red" class="peer hidden" >
<div class="w-8 h-8 rounded-full border border-neutral-100 peer-checked:ring-2 peer-checked:ring-accent peer-checked:ring-offset-2 transition-all group-hover:scale-110"
style="background-color: red">
</div>
<span
class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 text-[8px] font-black uppercase tracking-widest text-primary transition-opacity whitespace-nowrap bg-white px-2 py-1 shadow-sm">red</span>
</label>
<label class="relative cursor-pointer group">
<input type="radio" name="color" value="black" class="peer hidden" >
<div class="w-8 h-8 rounded-full border border-neutral-100 peer-checked:ring-2 peer-checked:ring-accent peer-checked:ring-offset-2 transition-all group-hover:scale-110"
style="background-color: black">
</div>
<span
class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 text-[8px] font-black uppercase tracking-widest text-primary transition-opacity whitespace-nowrap bg-white px-2 py-1 shadow-sm">black</span>
</label>
<label class="relative cursor-pointer group">
<input type="radio" name="color" value="sky blue" class="peer hidden" >
<div class="w-8 h-8 rounded-full border border-neutral-100 peer-checked:ring-2 peer-checked:ring-accent peer-checked:ring-offset-2 transition-all group-hover:scale-110"
style="background-color: sky blue">
</div>
<span
class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 text-[8px] font-black uppercase tracking-widest text-primary transition-opacity whitespace-nowrap bg-white px-2 py-1 shadow-sm">sky blue</span>
</label>
<label class="relative cursor-pointer group">
<input type="radio" name="color" value="green" class="peer hidden" >
<div class="w-8 h-8 rounded-full border border-neutral-100 peer-checked:ring-2 peer-checked:ring-accent peer-checked:ring-offset-2 transition-all group-hover:scale-110"
style="background-color: green">
</div>
<span
class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 text-[8px] font-black uppercase tracking-widest text-primary transition-opacity whitespace-nowrap bg-white px-2 py-1 shadow-sm">green</span>
</label>
</div>
</div>
<!-- Size -->
<div class="space-y-6">
<div class="flex justify-between items-end border-b border-neutral-50 pb-3">
<h4 class="text-[12px] font-black uppercase tracking-[0.3em] text-primary">Dimensions</h4>
<button type="button"
class="text-[8px] font-black uppercase tracking-widest text-accent hover:underline">Sizing Guide</button>
</div>
<div class="grid grid-cols-4 gap-3">
<label class="relative cursor-pointer">
<input type="radio" name="size" value="S" class="peer hidden" checked>
<div
class="h-14 flex items-center justify-center border border-neutral-100 text-[13px] font-black uppercase tracking-widest transition-all peer-checked:bg-primary peer-checked:text-white peer-checked:border-primary hover:border-accent">
S </div>
</label>
<label class="relative cursor-pointer">
<input type="radio" name="size" value="M" class="peer hidden" >
<div
class="h-14 flex items-center justify-center border border-neutral-100 text-[13px] font-black uppercase tracking-widest transition-all peer-checked:bg-primary peer-checked:text-white peer-checked:border-primary hover:border-accent">
M </div>
</label>
<label class="relative cursor-pointer">
<input type="radio" name="size" value="L" class="peer hidden" >
<div
class="h-14 flex items-center justify-center border border-neutral-100 text-[13px] font-black uppercase tracking-widest transition-all peer-checked:bg-primary peer-checked:text-white peer-checked:border-primary hover:border-accent">
L </div>
</label>
<label class="relative cursor-pointer">
<input type="radio" name="size" value="XL" class="peer hidden" >
<div
class="h-14 flex items-center justify-center border border-neutral-100 text-[13px] font-black uppercase tracking-widest transition-all peer-checked:bg-primary peer-checked:text-white peer-checked:border-primary hover:border-accent">
XL </div>
</label>
<label class="relative cursor-pointer">
<input type="radio" name="size" value="XXL" class="peer hidden" >
<div
class="h-14 flex items-center justify-center border border-neutral-100 text-[13px] font-black uppercase tracking-widest transition-all peer-checked:bg-primary peer-checked:text-white peer-checked:border-primary hover:border-accent">
XXL </div>
</label>
</div>
</div>
<!-- CTA -->
<div class="flex flex-col sm:flex-row gap-4 pt-6">
<div class="flex items-center border border-neutral-100 h-16 px-6 bg-surface">
<button type="button"
onclick="this.nextElementSibling.value = Math.max(1, parseInt(this.nextElementSibling.value)-1)"
class="p-2 text-neutral-500 hover:text-primary transition-colors"><i data-lucide="minus"
class="w-4 h-4"></i></button>
<input type="number" name="quantity" value="1" min="1"
class="w-12 bg-transparent text-center font-black text-[13px] outline-none text-primary">
<button type="button"
onclick="this.previousElementSibling.value = parseInt(this.previousElementSibling.value)+1"
class="p-2 text-neutral-500 hover:text-primary transition-colors"><i data-lucide="plus"
class="w-4 h-4"></i></button>
</div>
<button type="submit"
class="flex-grow h-16 bg-primary text-white text-[13px] font-black uppercase tracking-[0.4em] hover:bg-black transition-all shadow-xl">
Add to cart </button>
<button type="button" onclick="buyNow()"
class="flex-grow h-16 bg-accent text-white text-[13px] font-black uppercase tracking-[0.4em] hover:bg-primary transition-all shadow-xl">
BUY NOW </button>
</div>
</form>
<!-- Information -->
<div class="border-t border-neutral-100 pt-12 space-y-10">
<div class="acc-item group active">
<button
class="w-full flex justify-between items-center text-[12px] font-black uppercase tracking-[0.4em] text-primary border-b border-neutral-50 pb-4">
Details & Composition <i data-lucide="plus" class="w-3 h-3 group-[.active]:hidden"></i>
<i data-lucide="minus" class="w-3 h-3 hidden group-[.active]:block"></i>
</button>
<div
class="hidden group-[.active]:block py-8 text-[14px] text-neutral-900 leading-loose animate-fade-in">
<article class="text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&:has([data-writing-block])>*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]" tabindex="-1" dir="auto" data-turn-id="37f73148-9b1a-4865-a8a9-c1146425f314" data-testid="conversation-turn-2" data-scroll-anchor="false" data-turn="assistant"><p class="flex max-w-full flex-col grow"></p><div data-message-author-role="assistant" data-message-id="e6cd13c6-d0b9-4d01-8458-02cf010de547" dir="auto" class="min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&]:mt-1" data-message-model-slug="gpt-5-2"><div class="flex w-full flex-col gap-1 empty:hidden first:pt-[1px]"><div class="markdown prose dark:prose-invert w-full wrap-break-word light markdown-new-styling"><h2 data-start="179" data-end="268" style="color: rgb(33, 37, 41);">🎨 Dong Ho Folk Paintings – Timeless Artistic Value and the Soul of Vietnamese Culture</h2><p data-start="270" data-end="653"><span data-start="270" data-end="296" style="font-weight: bolder;">Dong Ho folk paintings</span> are one of Vietnam’s most iconic and long-standing traditional art forms, originating from Dong Ho Village (now Song Ho Commune, Thuan Thanh District, Bac Ninh Province). More than decorative artworks, Dong Ho paintings represent <span data-start="527" data-end="652" style="font-weight: bolder;">the crystallization of Vietnamese spiritual life, aesthetic thinking, and life philosophy passed down through generations</span>.</p><h3 data-start="655" data-end="683" style="color: rgb(33, 37, 41);">🌿 Unique Artistic Value</h3><p data-start="685" data-end="818">The enduring artistic value of Dong Ho paintings lies in their <span data-start="748" data-end="791" style="font-weight: bolder;">entirely handcrafted production process</span> and <span data-start="796" data-end="817" style="font-weight: bolder;">natural materials</span>:</p><ul data-start="820" data-end="1230"><li data-start="820" data-end="1045"><p data-start="822" data-end="1045"><span data-start="822" data-end="853" style="font-weight: bolder;">Traditional “Do Diep” paper</span>, made from the bark of the dó tree and coated with powdered seashells, creates a subtly shimmering surface that reflects light beautifully, giving the artwork a rustic yet refined appearance.</p></li><li data-start="1046" data-end="1230"><p data-start="1048" data-end="1099"><span data-start="1048" data-end="1073" style="font-weight: bolder;">100% natural pigments</span>, extracted from nature:</p><ul data-start="1102" data-end="1230"><li data-start="1102" data-end="1136"><p data-start="1104" data-end="1136">Black from burnt bamboo leaves</p></li><li data-start="1139" data-end="1166"><p data-start="1141" data-end="1166">Red from cinnabar stone</p></li><li data-start="1169" data-end="1200"><p data-start="1171" data-end="1200">Yellow from sophora flowers</p></li><li data-start="1203" data-end="1230"><p data-start="1205" data-end="1230">Blue from indigo leaves</p></li></ul></li></ul><p data-start="1232" data-end="1351">These natural colors are harmonious, warm, and highly durable, allowing the paintings to retain their beauty over time.</p><p data-start="1353" data-end="1681">Each artwork is printed using <span data-start="1383" data-end="1412" style="font-weight: bolder;">hand-carved wooden blocks</span>, with a separate block for each color. This meticulous process requires precision, patience, and skilled craftsmanship. The simple lines, balanced compositions, and flat color planes together form a <span data-start="1612" data-end="1643" style="font-weight: bolder;">distinctive aesthetic style</span> found only in Dong Ho folk paintings.</p><h3 data-start="1683" data-end="1729" style="color: rgb(33, 37, 41);">🧧 Profound Cultural and Spiritual Meaning</h3><p data-start="1731" data-end="1977">The themes of Dong Ho paintings vividly depict <span data-start="1778" data-end="1873" style="font-weight: bolder;">daily life, labor, festivals, customs, and the aspirations of Vietnamese people in the past</span>. Every painting carries not only decorative value but also cultural messages and humanistic philosophy:</p><ul data-start="1979" data-end="2272"><li data-start="1979" data-end="2049"><p data-start="1981" data-end="2049"><span data-start="1981" data-end="2004" style="font-weight: bolder;">“The Mouse Wedding”</span> reflects folk satire and social commentary</p></li><li data-start="2050" data-end="2155"><p data-start="2052" data-end="2155"><span data-start="2052" data-end="2072" style="font-weight: bolder;">“The Pig Family”</span> and <span data-start="2077" data-end="2101" style="font-weight: bolder;">“The Chicken Family”</span> symbolize prosperity, abundance, and family harmony</p></li><li data-start="2156" data-end="2272"><p data-start="2158" data-end="2272">Paintings of <span data-start="2171" data-end="2209" style="font-weight: bolder;">children, families, and rural life</span> express wishes for peace, happiness, and harmony with nature</p></li></ul><p data-start="2274" data-end="2450">For this reason, Dong Ho paintings have traditionally been displayed in Vietnamese homes during the Lunar New Year to <span data-start="2392" data-end="2449" style="font-weight: bolder;">invite good fortune, prosperity, blessings, and peace</span>.</p><h3 data-start="2452" data-end="2488" style="color: rgb(33, 37, 41);">🏡 Value in Modern Living Spaces</h3><p data-start="2490" data-end="2723">Today, Dong Ho folk paintings are not only cultural heritage pieces but are also highly appreciated in <span data-start="2593" data-end="2616" style="font-weight: bolder;">interior decoration</span>, especially in traditional, Indochine, minimalist, and cultural-artistic spaces. They are well suited for:</p><ul data-start="2724" data-end="2866"><li data-start="2724" data-end="2750"><p data-start="2726" data-end="2750">Homes and living rooms</p></li><li data-start="2751" data-end="2811"><p data-start="2753" data-end="2811">Cafés, restaurants, and homestays with Vietnamese themes</p></li><li data-start="2812" data-end="2866"><p data-start="2814" data-end="2866">Offices, showrooms, and cultural exhibition spaces</p></li></ul><p data-start="2868" data-end="3057">Owning a Dong Ho painting is not merely acquiring an artwork—it is <span data-start="2935" data-end="2983" style="font-weight: bolder;">preserving the spirit of Vietnamese heritage</span>, reflecting refined taste and a deep appreciation for traditional values.</p></div></div></div><p></p></article>'"><a> </div>
</div>
<div class="acc-item group">
<button
class="w-full flex justify-between items-center text-[12px] font-black uppercase tracking-[0.4em] text-primary border-b border-neutral-50 pb-4">
Shipping & Legacy <i data-lucide="plus" class="w-3 h-3 group-[.active]:hidden"></i>
<i data-lucide="minus" class="w-3 h-3 hidden group-[.active]:block"></i>
</button>
<div
class="hidden group-[.active]:block py-8 text-[13px] text-neutral-500 leading-loose font-medium opacity-80 animate-fade-in">
Hand-carried and inspected. Express delivery within 24-48 hours. Our signature packaging is standard with every piece. </div>
</div>
</div>
</div>
</div>
<!-- Section: You May Like -->
<div class="mt-48 pt-32 border-t border-neutral-100">
<div class="flex justify-between items-end mb-16">
<div class="space-y-4">
<p class="text-[12px] font-black uppercase tracking-[0.5em] text-accent">Related pieces</p>
<h2 class="text-4xl md:text-5xl font-serif italic text-primary">Discover More</h2>
</div>
<a href="/products/all"
class="text-[9px] font-black uppercase tracking-[0.4em] text-primary hover:text-accent border-b border-primary hover:border-accent transition-all pb-1">View Archives</a>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-x-10 gap-y-16">
<div class="group">
<div class="relative aspect-[3/4] overflow-hidden bg-surface mb-6">
<a href="/products/view?id=99">
<img src="/assets/images/products/1771041290.jpg" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 group-hover:scale-110 transition-all duration-[2000ms]">
</a>
</div>
<div class="text-center space-y-2">
<p class="text-[13px] font-black uppercase tracking-[0.4em] text-neutral-500">
ELEGANT EDGE </p>
<h3 class="font-serif italic text-xl text-primary truncate hover:text-accent transition-colors">
<a href="/products/view?id=99">Tranh dân gian Đông Hồ</a>
</h3>
<p class="text-[14px] font-bold text-primary">$52.31</p>
</div>
</div>
<div class="group">
<div class="relative aspect-[3/4] overflow-hidden bg-surface mb-6">
<a href="/products/view?id=106">
<img src="/assets/images/products/1774661899.jpg" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 group-hover:scale-110 transition-all duration-[2000ms]">
</a>
</div>
<div class="text-center space-y-2">
<p class="text-[13px] font-black uppercase tracking-[0.4em] text-neutral-500">
PHƯƠNG TRÁNG GLOBAL </p>
<h3 class="font-serif italic text-xl text-primary truncate hover:text-accent transition-colors">
<a href="/products/view?id=106">Tranh dân gian Đông Hồ</a>
</h3>
<p class="text-[14px] font-bold text-primary">$49.23</p>
</div>
</div>
<div class="group">
<div class="relative aspect-[3/4] overflow-hidden bg-surface mb-6">
<a href="/products/view?id=107">
<img src="/assets/images/products/1774662056.jpg" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 group-hover:scale-110 transition-all duration-[2000ms]">
</a>
</div>
<div class="text-center space-y-2">
<p class="text-[13px] font-black uppercase tracking-[0.4em] text-neutral-500">
PHƯƠNG TRÁNG GLOBAL </p>
<h3 class="font-serif italic text-xl text-primary truncate hover:text-accent transition-colors">
<a href="/products/view?id=107">Tranh dân gian Đông Hồ</a>
</h3>
<p class="text-[14px] font-bold text-primary">$52.31</p>
</div>
</div>
<div class="group">
<div class="relative aspect-[3/4] overflow-hidden bg-surface mb-6">
<a href="/products/view?id=108">
<img src="/assets/images/products/1774662202.jpg" alt="Tranh dân gian Đông Hồ"
class="w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 group-hover:scale-110 transition-all duration-[2000ms]">
</a>
</div>
<div class="text-center space-y-2">
<p class="text-[13px] font-black uppercase tracking-[0.4em] text-neutral-500">
PHƯƠNG TRÁNG GLOBAL </p>
<h3 class="font-serif italic text-xl text-primary truncate hover:text-accent transition-colors">
<a href="/products/view?id=108">Tranh dân gian Đông Hồ</a>
</h3>
<p class="text-[14px] font-bold text-primary">$49.23</p>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const mainSwiper = new Swiper('.main-swiper', {
spaceBetween: 10,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
document.querySelectorAll('.acc-item button').forEach(btn => {
btn.addEventListener('click', () => {
const item = btn.closest('.acc-item');
const isActive = item.classList.contains('active');
if (!isActive) item.classList.add('active');
else item.classList.remove('active');
});
});
// Trigger Global Add To Cart Logic
const form = document.querySelector('#atc-form');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
if (typeof addToCart === 'function') addToCart(formData);
});
}
window.buyNow = async function () {
const formData = new FormData(document.querySelector('#atc-form'));
const data = Object.fromEntries(formData);
if (typeof syncCart === 'function') {
const res = await syncCart('add', data);
if (res && res.success) {
// Sync to persistent local storage before redirect
const storageCart = {};
res.cart.forEach(item => {
storageCart[item.key] = item;
});
localStorage.setItem("my_cart", JSON.stringify(storageCart));
window.location.href = '/products/cart';
}
}
};
</script>
</main>
<!-- Master Footer -->
<!-- Chatbot Section Integration -->
<aside id="chat-widget" class="fixed bottom-10 right-10 z-[80] group">
<button id="chatToggle"
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center shadow-2xl hover:scale-110 transition-transform active:scale-95 group-hover:bg-black">
<i data-lucide="message-square" class="w-6 h-6"></i>
</button>
<div id="chatBox"
class="absolute bottom-20 right-0 w-[400px] h-[600px] bg-white shadow-2xl rounded-sm flex flex-col opacity-0 pointer-events-none translate-y-4 transition-all duration-300 border border-neutral-50">
<div class="h-20 bg-primary flex items-center justify-between px-8 text-white">
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center">
<i data-lucide="sparkles" class="w-4 h-4 text-accent"></i>
</div>
<span class="text-[13px] font-black uppercase tracking-[0.3em]">Signature Concierge</span>
</div>
<button id="chatClose" class="text-white/50 hover:text-white"><i data-lucide="x"
class="w-5 h-5"></i></button>
</div>
<div id="chatMessages"
class="flex-grow overflow-y-auto p-10 space-y-6 custom-scrollbar text-[12px] font-medium leading-relaxed">
<!-- Dynamic Messages -->
</div>
<div class="p-8 border-t border-neutral-100 flex gap-4">
<input type="text" id="chatInput" placeholder="How can we assist you?"
class="flex-grow text-[12px] border-none focus:ring-0 placeholder:text-neutral-300">
<button id="chatSend" class="text-primary hover:text-accent transition-colors"><i data-lucide="send"
class="w-5 h-5"></i></button>
</div>
</div>
</aside>
<script>
document.addEventListener("DOMContentLoaded", function () {
const chatBox = document.getElementById('chatBox');
const chatToggle = document.getElementById('chatToggle');
const chatClose = document.getElementById('chatClose');
const chatMessages = document.getElementById('chatMessages');
const chatInput = document.getElementById('chatInput');
const chatSend = document.getElementById('chatSend');
const backendUrl = "https://globalshop.it.com/server/chatbot-vnua";
const language = "";
let userId = localStorage.getItem("userId") || Math.floor(Math.random() * 9000000) + 1000000;
localStorage.setItem("userId", userId);
function append(role, text) {
const div = document.createElement("div");
div.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;
div.innerHTML = `
<div class="max-w-[80%] px-6 py-4 rounded-sm ${role === 'user' ? 'bg-primary text-white' : 'bg-surface text-primary border border-neutral-50'}">
${text}
</div>
`;
chatMessages.appendChild(div);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
async function send(text) {
append("user", text);
try {
const res = await fetch(backendUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: text, userId, language })
});
const data = await res.json();
append("bot", data.reply || "Unable to reach concierge.");
} catch {
append("bot", "Network interference detected.");
}
}
chatToggle.onclick = () => {
const isOpen = !chatBox.classList.contains('opacity-0');
chatBox.classList.toggle('opacity-0', isOpen);
chatBox.classList.toggle('pointer-events-none', isOpen);
chatBox.classList.toggle('translate-y-4', isOpen);
};
chatClose.onclick = chatToggle.onclick;
chatSend.onclick = () => {
const text = chatInput.value.trim();
if (text) { send(text); chatInput.value = ""; }
};
chatInput.onkeydown = (e) => { if (e.key === 'Enter') chatSend.onclick(); };
// Initial Greeting
setTimeout(() => {
append("bot", "Welcome back. Did you find your purchase satisfying?");
// Auto open the chat widget only on the Thank You / Order Success page
if (window.location.pathname.includes('/thankyou')) {
chatBox.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-4');
}
}, 1500);
lucide.createIcons();
});
</script>
<footer class="bg-primary text-white pt-24 pb-12 overflow-hidden">
<div class="container mx-auto px-4 md:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-16 lg:gap-8">
<!-- Column 1: Brand -->
<div class="space-y-8 animate-fade-in lg:col-span-2">
<a href="/home" class="inline-block">
<h2 class="text-3xl font-black tracking-tighter uppercase text-white">
PHƯƠNG TRÁNG GLOBAL </h2>
</a>
<p class="text-neutral-300 text-[13px] leading-relaxed max-w-sm font-medium uppercase tracking-[0.1em]">
Defining the intersection of avant-garde design and timeless craftsmanship. An editorial selection for the modern connoisseur. </p>
<div class="pt-8">
<h4 class="text-[13px] font-black uppercase tracking-[0.4em] mb-6 text-white">
Corporate Entity </h4>
<div class="text-[13px] text-neutral-400 font-medium tracking-[0.1em] leading-loose space-y-3">
<p class="font-bold text-white uppercase tracking-[0.2em] leading-relaxed">CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ PHƯƠNG TRÁNG GLOBAL</p>
<p>Address: T4-51 Đường T4, Phố Manhattan, Vinhomes Grand Park, Phường Long Bình, Thành Phố Hồ Chí Minh, Việt Nam</p>
<p>Tax code: 0319648204 - Date of issue: 21/07/2026<br>
Issued by: Department of Planning and Investment of HCMC</p>
<p>Phone Number: 0974204512<br>
Email: phuongtrangglobal@gmail.com</p>
</div>
</div>
<!-- Khối tích hợp Logo Bộ Công Thương tuân thủ chuẩn UX/UI của hệ thống -->
<div class="pt-6">
<a href="http://online.gov.vn/nen-tang/492c32ef-b2a1-488e-af0c-bc7ee0de4d14" target="_blank" rel="noopener noreferrer" class="inline-block hover:opacity-80 transition-opacity duration-300">
<img src="/assets/images/bocongthuong.png" alt="Bộ Công Thương Đã Thông Báo" class="h-12 w-auto object-contain">
</a>
</div>
</div>
<!-- Column 2: Navigation -->
<div class="animate-fade-in" style="animation-delay: 0.1s">
<h4 class="text-[13px] font-black uppercase tracking-[0.4em] mb-10 text-white">
Archive </h4>
<ul class="space-y-5 text-[12px] font-bold uppercase tracking-[0.2em] text-neutral-400">
<li><a href="/" class="hover:text-white transition-colors">Home</a></li>
<li><a href="/products/all" class="hover:text-white transition-colors">Product</a>
</li>
<li><a href="/news" class="hover:text-white transition-colors">News</a></li>
<li><a href="/gioithieu" class="hover:text-white transition-colors">About Us</a>
</li>
<li><a href="/pages/contact" class="hover:text-white transition-colors">Contact</a>
</li>
</ul>
</div>
<!-- Column 3: Policies -->
<div class="animate-fade-in" style="animation-delay: 0.2s">
<h4 class="text-[13px] font-black uppercase tracking-[0.4em] mb-10 text-white">Policies </h4>
<ul class="space-y-5 text-[12px] font-bold uppercase tracking-[0.2em] text-neutral-400">
<li><a href="/chinhsach/baomat"
class="hover:text-white transition-colors">Privacy & Data</a>
</li>
<li><a href="/chinhsach/giaohang"
class="hover:text-white transition-colors">Shipping & Cargo</a></li>
<li><a href="/chinhsach/doisanpham"
class="hover:text-white transition-colors">Returns & Exchange</a></li>
<li><a href="/chinhsach/thanhtoan"
class="hover:text-white transition-colors">Payment Policy</a></li>
<li><a href="/chinhsach/tiepnhankhieunai"
class="hover:text-white transition-colors">Complaints & Feedback</a></li>
<li><a href="/chinhsach/chinhsachgia"
class="hover:text-white transition-colors">Pricing Policy</a></li>
<li><a href="/chinhsach/dieukienhanghoa"
class="hover:text-white transition-colors">Terms & Service Limitations</a></li>
</ul>
</div>
<!-- Column 4: Guides -->
<div class="animate-fade-in" style="animation-delay: 0.3s">
<h4 class="text-[13px] font-black uppercase tracking-[0.4em] mb-10 text-white">Guides </h4>
<ul class="space-y-5 text-[12px] font-bold uppercase tracking-[0.2em] text-neutral-400">
<li><a href="/huongdan/muahang"
class="hover:text-white transition-colors">How to Shop</a>
</li>
<li><a href="/huongdan/thanhtoan"
class="hover:text-white transition-colors">Payment Guide</a>
</li>
<li><a href="/pages/contact"
class="hover:text-white transition-colors">Direct Support</a></li>
</ul>
</div>
<!-- Column 5: Newsletter -->
<div class="animate-fade-in space-y-12" style="animation-delay: 0.4s">
<div>
<h4 class="text-[13px] font-black uppercase tracking-[0.4em] mb-8 text-white">
Newsletter </h4>
<form class="relative group">
<input type="email" placeholder="YOUR EMAIL ADDRESS"
class="w-full bg-transparent border-b border-neutral-600 focus:border-white py-4 text-[12px] font-bold outline-none transition-all placeholder:text-neutral-500 uppercase tracking-widest text-white">
<button type="submit"
class="absolute right-0 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white transition-colors">
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</button>
</form>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div
class="mt-24 pt-12 border-t border-neutral-800 flex flex-col md:flex-row justify-between items-center gap-8">
<p class="text-[12px] text-neutral-500 uppercase tracking-[0.2em] font-medium text-center md:text-left">
© 2026 PHUONG TRANG GLOBAL CO.,LTD. All rights reserved. </p>
<div
class="flex items-center space-x-6 grayscale opacity-30 hover:grayscale-0 hover:opacity-100 transition-all duration-500">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" alt="Visa"
class="h-3">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" alt="Mastercard"
class="h-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" alt="PayPal" class="h-4">
</div>
</div>
</div>
</footer>
<!-- Initialize Icons -->
<script>
lucide.createIcons();
</script>
<!-- Global Cart & Menu Logic -->
<script>
// Global State
const LANG = 'en';
const USD_RATE = Number('26000');
function formatCurrency(val) {
if (LANG === 'en') return '$' + (val / USD_RATE).toFixed(2);
return new Intl.NumberFormat('vi-VN').format(val) + '₫';
}
async function syncCart(action, data = {}) {
const formData = new FormData();
formData.append('action', action);
formData.append('_STATUS', '1'); // Security check for routing
for (let k in data) formData.append(k, data[k]);
try {
const res = await fetch('/products/cart_sync', { method: 'POST', body: formData });
return await res.json();
} catch (e) { console.error('Sync fail', e); return null; }
}
window.openCartModal = () => document.getElementById('cart-modal').classList.add('open');
window.closeCartModal = () => document.getElementById('cart-modal').classList.remove('open');
window.updateCartUI = async function (cartData = null) {
if (!cartData) {
const res = await syncCart('get');
if (res) cartData = res.cart;
else return;
}
// Sync to Persistent LocalStorage for Checkout & Persistence
const storageCart = {};
cartData.forEach(item => {
storageCart[item.key] = item;
});
localStorage.setItem("my_cart", JSON.stringify(storageCart));
const container = document.getElementById('cart-modal-items');
const counter = document.getElementById('cart-counter');
const totalEl = document.getElementById('cart-modal-total');
if (!container) return;
container.innerHTML = '';
let total = 0;
let count = 0;
cartData.forEach(item => {
total += item.price * item.quantity;
count += Number(item.quantity);
const imgPath = item.img.startsWith('http') || item.img.startsWith('/') ? item.img : '/' + item.img;
const div = document.createElement('div');
div.className = "flex gap-6 group/item animate-fade-in";
div.innerHTML = `
<div class="w-20 md:w-24 aspect-[3/4] bg-surface flex-shrink-0 overflow-hidden relative">
<img src="${imgPath}" class="w-full h-full object-cover group-hover/item:scale-110 transition-transform duration-700">
</div>
<div class="flex-grow flex flex-col justify-between py-1">
<div class="space-y-1">
<p class="text-[8px] font-black uppercase tracking-[0.3em] text-neutral-300">${item.brand}</p>
<h4 class="text-xs font-black text-primary uppercase tracking-widest truncate max-w-[150px] md:max-w-xs">${item.name}</h4>
<p class="text-[9px] text-neutral-400 font-bold uppercase tracking-widest">${item.size} / ${item.color}</p>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center border border-neutral-100 h-9 px-1 bg-surface">
<button onclick="changeQty('${item.key}', ${item.quantity - 1})" class="p-1 text-neutral-400 hover:text-primary"><i data-lucide="minus" class="w-3 h-3"></i></button>
<span class="w-7 text-center text-[12px] font-black">${item.quantity}</span>
<button onclick="changeQty('${item.key}', ${item.quantity + 1})" class="p-1 text-neutral-400 hover:text-primary"><i data-lucide="plus" class="w-3 h-3"></i></button>
</div>
<div class="text-right">
<p class="text-xs font-black text-primary">${formatCurrency(item.price * item.quantity)}</p>
<button onclick="removeItem('${item.key}')" class="text-[8px] font-black uppercase tracking-widest text-rose-500 hover:text-rose-700 mt-1 transition-colors">Discard</button>
</div>
</div>
</div>
`;
container.appendChild(div);
});
if (cartData.length === 0) {
container.innerHTML = `<div class="py-12 text-center space-y-4">
<i data-lucide="shopping-bag" class="w-10 h-10 mx-auto text-neutral-100"></i>
<p class="text-[12px] font-bold uppercase tracking-[0.2em] text-neutral-300">Bag is currently empty.</p>
</div>`;
}
totalEl.textContent = formatCurrency(total);
if (counter) counter.textContent = count;
lucide.createIcons();
}
window.addToCart = async function (formData) {
const data = Object.fromEntries(formData);
const res = await syncCart('add', data);
if (res && res.success) {
await updateCartUI(res.cart);
openCartModal();
}
}
window.changeQty = async function (key, newQty) {
if (newQty < 1) return removeItem(key);
const res = await syncCart('update', { key, quantity: newQty });
if (res && res.success) updateCartUI(res.cart);
}
window.removeItem = async function (key) {
const res = await syncCart('remove', { key });
if (res && res.success) updateCartUI(res.cart);
}
document.addEventListener('DOMContentLoaded', () => {
// Mobile Menu
const toggle = document.querySelector('#mobile-menu-toggle');
const menu = document.querySelector('#mobile-menu');
const mClose = document.querySelector('#mobile-menu-close');
if (toggle && menu) {
toggle.onclick = () => menu.classList.remove('translate-x-full');
if (mClose) mClose.onclick = () => menu.classList.add('translate-x-full');
}
// Cart Init
updateCartUI();
// Modal Close
const cClose = document.getElementById('cart-modal-close');
const cCont = document.getElementById('cart-modal-continue');
const cBack = document.getElementById('cart-modal-backdrop');
[cClose, cCont, cBack].forEach(el => {
if (el) el.onclick = closeCartModal;
});
});
</script>
</body>
</html>